Bonjour,
Sur l'illustration ci-dessous la galerie que j'essaie de mettre en place .
Actuellement celle ci fonctionne mais j'aimerai rajouter 2 contrôleurs a coté du conteneur d'image. "rouge sur illustration".
Pour le moment l'image change lorsque l'on click sur les vignettes. Serait-il aussi possible de les faire défiler avec les contrôleur rouge?
Pour réaliser la galerie j'ai utilisé jquery Ui Tools.
Demo:
http://jquerytools.github.com/demo [...] llery.html
Voila j'aurai besoin d'un petit coup de main pour adapter mon script.
Code :
- // conteneur image full size
- <a class="backward"><</a>
- <div id="image_wrap"><img src='' /></div>
- <a class="forward">></a>
- // scrollbar vignette
- <a class="prev browse left"></a>
- <div class="scrollableb" id="navigatorb">
- <div class="itemsb">
- <div>
- <img src='' />
- <img src='' />
- <img src='' />
- <img src='' />
- </div>
- <div>
- <img src='' />
- <img src='' />
- <img src='' />
- <img src='' />
- </div>
- </div>
- </div>
- <a class="next browse right"></a>
- // javascript
- <script language="javascript" type="text/javascript">
- $(".scrollableb" ).scrollable();
- $(".itemsb img" ).click(function() {
- // see if same thumb is being clicked
- if ($(this).hasClass("active" )) { return; }
- // calclulate large image's URL based on the thumbnail
- var url = $(this).attr("src" ).replace("_m", "_tb" );
- // get handle to element that wraps the image and make it semi-transparent
- var wrap = $("#image_wrap" );
- // the large image from ...
- var img = new Image();
- // call this function after it's loaded
- img.onload = function() {
- // change the image
- wrap.find("img" ).attr("src", url);
- };
- // begin loading the image from...
- img.src = url
- // activate item
- $(".itemsb img" ).removeClass("active" );
- $(this).addClass("active" );
- // when page loads simulate a "click" on the first image
- }).filter(":first" ).click();
- </script>
|
