Galeries jquery Ui Tools

Galeries jquery Ui Tools - HTML/CSS - Programmation

Marsh Posté le 22-06-2012 à 14:09:15    


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
 
http://img15.hostingpics.net/thumbs/mini_131642galery.jpg
 
Voila j'aurai besoin d'un petit coup de main pour adapter mon script.
 
 

Code :
  1. // conteneur image full size
  2. <a class="backward"><</a>
  3. <div id="image_wrap"><img src='' /></div>
  4. <a class="forward">></a>
  6. // scrollbar vignette  
  8. <a class="prev browse left"></a>
  9. <div class="scrollableb" id="navigatorb">
  10.        <div class="itemsb">
  11.              <div>
  12.                 <img src='' />
  13.                 <img src='' />
  14.                 <img src='' />
  15.                 <img src='' />
  16.              </div>
  17.               <div>
  18.                  <img src='' />
  19.                  <img src='' />
  20.                  <img src='' />
  21.                  <img src='' />
  22.              </div>
  23.         </div>
  24.     </div>
  25. <a class="next browse right"></a>
  27. // javascript
  28. <script language="javascript" type="text/javascript">
  30.  $(".scrollableb" ).scrollable();
  32.  $(".itemsb img" ).click(function() {
  35.   // see if same thumb is being clicked
  36.   if ($(this).hasClass("active" )) { return; }
  38.   // calclulate large image's URL based on the thumbnail
  39.   var url = $(this).attr("src" ).replace("_m", "_tb" );
  41.   // get handle to element that wraps the image and make it semi-transparent
  42.   var wrap = $("#image_wrap" );
  45.   // the large image from ...
  46.   var img = new Image();
  49.   // call this function after it's loaded
  50.   img.onload = function() {
  52.    // change the image
  53.    wrap.find("img" ).attr("src", url);
  55.   };
  57.   // begin loading the image from...
  58.   img.src = url
  60.   // activate item
  61.   $(".itemsb img" ).removeClass("active" );
  62.   $(this).addClass("active" );
  64.  // when page loads simulate a "click" on the first image
  65.  }).filter(":first" ).click();
  68. </script>


Reply

Marsh Posté le 22-06-2012 à 14:09:15   

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed