jQuery Image Slider(wow slider) with Thumbnails dla Blogspot

Coś dla cierpliwych z ogromnym efektem

Slider jQuery przykład

tak więc: 

1. wchodzisz w układ bloga -> dodaj Gadżet

2. dodajesz HTML/JavaScript 

3. skopiuj poniższy kod:

<style type="text/css">
.slider-box {
    background: none repeat scroll 0 0 #FAFAFA;
    border-radius: 5px 5px 5px 5px;
    box-shadow: 0 0 3px #333333;
    margin: 0 auto;
    width: 675px;
 overflow: hidden;
}
#slider-wrapper {
    margin: 0 auto;
    padding: 10px;
}
#jslider-container {
    border: 2px solid #FFFFFF;
    max-width: 550px;
    position: relative;
    text-align: left;
    z-index: 90;
}
</style>
<link href="http://project.dimpost.com/image-slider/wowslider/css/wow-slider.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

<div class="slider-box">
<div id="slider-wrapper">
<div id="jslider-container">
 <div class="jslider_images">
      <ul>
  <li><a href="http://blogskrypt.blogspot.com/">
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbP5h8MgNe8r6UXb7P5vTOA0UzmyG_pE0ghcDRASYB55aiSUREcWDy6qLU2E72nRKzfXsOq7E1mgWTCMZTuB8QqJ4ZyJuy8tHwoHmgtpWHDwCzVplaknJKP-jH3wo9ioMC0paQdrBhPij_/s550/sample1.jpg" title="Sunset"/>
  </a>Łódź o zachodzie słońca</li>
  <li><a href="http://blogskrypt.blogspot.com/">
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9lrMnKY3aXe1VCdPJeAHm28mmSkMYPlU8TbA9F4a3TeQi5FTcdmQu58DRZSs2e6E12XNwkzk2bZcsb1Xbt_LDEMRSHU9v-usploxE9ke7MOq-X2Y5y3f6Se_4z_U_e36jWIv93ap9Zw8S/s550/sample2.jpg" title="Tęcza"/>
  </a></li>
  <li><a href="http://blogskrypt.blogspot.com/">
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhT7wG0eXmWp01ahpuZ1kph5P7HlLBjm1TPE-WzjISzlHkcdvRI0LY7qoTHJnkjZWVeWbKCmNsJhlXvGCkykeCZoL9if3EOHXQmQ1GSi4io45VIA7AJytd58m6Wl0BPcIqxYQ8-URW7iTVG/s550/sample3.jpg" title="Natura"/>
  </a>Drzawa na niebieskim niebie</li>
  <li><a href="http://blogskrypt.blogspot.com/">
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioNzKa0FT8sEKBsLk2y6E7Jzswq3VsqakizivDMkuLxbtNQXaJ1FUXsY12_UCGX6VwY29Q_ycDO69XegkJJtQ97LE6oBIp6JBpL8F0XghJo7API-heE7L8KSFezMlEd16I7Zv7KVaUrfsB/s550/sample4.jpg" title="Wschód słońca"/>
  </a>Niesamowity wschód słońca</li>
  <li><a href="http://blogskrypt.blogspot.com/">
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC-G9ggSGtEglIQ9CXOfATY7p_d-RJDJQd1yhy-HMGGsWy7S0rIn99j4rIB01VL0VsL6mnDEwx4LnBq1pVUmNdAPesuIwwULzA988rU3rl9QEfscNP4xTqjTX6qrZh7Ex5IckqewZUu8S5/s550/sample5.jpg" title="samochód w HDR"/>
  </a></li>
  <li><a href="http://blogskrypt.blogspot.com/">
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEctJNHEBZwCUfwlAIGhwOlK9R-VdjS61Rx01r5ZTxIccEd9ggFaRU3nz4D5jLHQyv1QwriCiOSaIhEPH40l7ErnHOO_VwRXoK7kZ-cdsWz3Ip9IkoeNhr-gi09ezfmNdEGj30Qyb6pZ2z/s550/sample6.jpg" title="Sunshine"/>
  </a>Twoja nazwa obrazka - możesz to usunąć i nic nie wpisywać</li>
   </ul>
    </div> 
    
 <div class="jslider_thumbs">
        <div>
  <a href="#" title="Sunset"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPpY0CPrKCXb1TPykeOq1emSRTLUnD5rXtiBMwcPre2prjonVMwXuYqJ9luuVItPAqiwDDCWIEOKIgP8XDoTTAQ6CuL_ILpN_ihmSlyS2hYpu2Vv9S3Gqem42D0QWkYEkCXjpoqDozVe59/s85/sample1.jpg"/></a>
  <a href="#" title="Tęcza"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4vrDNAQxQMYYmjOzyjuNqdFuMmEFcsxvrAG4ntJ1dIPn9rkzQb3nmqKPZroHy61vYxDwAZJdwxUR48QZj-mrm2IPpFttSy97YEx8NyiSsk-jGD3fI8KguSatG355c5U1VK2LpmtRDjN3i/s85/sample2.jpg"/></a>
  <a href="#" title="Natura"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7WQenu0DOmeR7Ihb6JuXV-kuZ_uIAc9rTxnDp_u1MaMtdj4qYsJ0rZOc8Voe7E67ooFS6pR8tMXzXl8YUSXqfAB4aP4OuWCNQGrF0wGKl-TOIVdpPSaWKkNQbAVUy73NNEM95J2N36OI9/s85/sample3.jpg"/></a>
  <a href="#" title="Wschód słońca"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibtuvHtCLA28sIOQkHm0_vAhYf_ltcq7hfasDT-xABc-Ioj_QgO3ZeAYyF2FLcdcw16pjH9Cy9lJHRSBleLpVZ4N4QJmt9AUoFhKz76JnJ37wRqzLI9qvl0ICwsNlSKKvpM7_kfX3dcY6R/s85/sample4.jpg"/></a>
  <a href="#" title="Samochód w HDR"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCC45_jTZWAy8cpUe_USI1W9DyE9gkWE1XNCsllLn2D5zt6HyHpB17bRSYuZvjjACcNLTCOhfFGRI9XwhoZpVf9Qw48vyHea18xJ3RGsGRxmp-vJXgBPHVFPNxiN49g6hucw3rlkvPVJLp/s85/sample5.jpg"/></a>
  <a href="#" title="Sunshine"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3s_8I-XEu-vUy7r_Qix1bOEGL1n5H-5VS_3z-A8b5qD7BSAAl1nNNFNrQUhjbWixCNZ6oAoVf9L7vyJdgzLMgn8ZpK18Szsi211MbwYSyK42WrPrhENh5Bycfxr_lBt1DVOCf6-bNKZ4V/s85/sample6.jpg"/></a>
        </div>
 </div>
    
</div>
</div>
</div>
<script type="text/javascript" src="http://dimpost.googlecode.com/files/wow-slider.js"></script>

4. opis czynności do wykonania:

* zamień miejsca oznaczone kolorem czerwonym na adres twojej strony ( http://twojastrona.blogspot.com )

* zamień miejsca oznaczone kolorem niebieskim na adres obrazka. 

* zmień tytuł wyświetlanego obrazka kolor purpurowy - na obrazku jasne podświetlenie

 * zmień tytuł wyświetlanego obrazka kolor zielony - na obrazku zielone podświetlenie

5. BARDZO WAŻNE OBJAŚNIENIE

 skrypt: 

                <li><a href="http://blogskrypt.blogspot.com/">
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioNzKa0FT8sEKBsLk2y6E7Jzswq3VsqakizivDMkuLxbtNQXaJ1FUXsY12_UCGX6VwY29Q_ycDO69XegkJJtQ97LE6oBIp6JBpL8F0XghJo7API-heE7L8KSFezMlEd16I7Zv7KVaUrfsB/s550/sample4.jpg" title="Wschód słońca"/>
  </a>Niesamowity wschód słońca</li>

powyższa część skryptu przedstawia obrazki wyświetlane w Dużej ramce !

 poniższy skrypt:

<a href="#" title="Wschód słońca"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibtuvHtCLA28sIOQkHm0_vAhYf_ltcq7hfasDT-xABc-Ioj_QgO3ZeAYyF2FLcdcw16pjH9Cy9lJHRSBleLpVZ4N4QJmt9AUoFhKz76JnJ37wRqzLI9qvl0ICwsNlSKKvpM7_kfX3dcY6R/s85/sample4.jpg"/></a>

 przedstawia obrazki w prawej kolumnie ! 

Ważne by została zachowana kolejność wyświetlanych zdjęć więc:

wpisujesz w skrypt dane DUŻEGO obrazka, po czy od razu wpisujesz do skryptu małego obrazka te same linki i tytuły ! 

uwaga! adres obrazka uzyskujesz poprzez kliknięcie Prawym przyciskiem myszki ( PPM ) na wybranym przez siebie obrazku i z rozwijanego manu wybierasz opcję KOPIUJ ADRES ODNOŚNIKA.