Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1201 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Galeries jquery Ui Tools

 



 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Galeries jquery Ui Tools

n°2146808
Sp@ds
Posté le 22-06-2012 à 14:09:15  profilanswer
 


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>
  5. // scrollbar vignette  
  6. <a class="prev browse left"></a>
  7. <div class="scrollableb" id="navigatorb">
  8.        <div class="itemsb">
  9.              <div>
  10.                 <img src='' />
  11.                 <img src='' />
  12.                 <img src='' />
  13.                 <img src='' />
  14.              </div>
  15.               <div>
  16.                  <img src='' />
  17.                  <img src='' />
  18.                  <img src='' />
  19.                  <img src='' />
  20.              </div>
  21.         </div>
  22.     </div>
  23. <a class="next browse right"></a>
  24. // javascript
  25. <script language="javascript" type="text/javascript">
  26.  $(".scrollableb" ).scrollable();
  27.  $(".itemsb img" ).click(function() {
  28.   // see if same thumb is being clicked
  29.   if ($(this).hasClass("active" )) { return; }
  30.   // calclulate large image's URL based on the thumbnail
  31.   var url = $(this).attr("src" ).replace("_m", "_tb" );
  32.   // get handle to element that wraps the image and make it semi-transparent
  33.   var wrap = $("#image_wrap" );
  34.   // the large image from ...
  35.   var img = new Image();
  36.   // call this function after it's loaded
  37.   img.onload = function() {
  38.    // change the image
  39.    wrap.find("img" ).attr("src", url);
  40.   };
  41.   // begin loading the image from...
  42.   img.src = url
  43.   // activate item
  44.   $(".itemsb img" ).removeClass("active" );
  45.   $(this).addClass("active" );
  46.  // when page loads simulate a "click" on the first image
  47.  }).filter(":first" ).click();
  48. </script>


mood
Publicité
Posté le 22-06-2012 à 14:09:15  profilanswer
 


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Galeries jquery Ui Tools

 

Sujets relatifs
[jquery] Question un peu bateau sur les bouclesjquery et selection de div a partir de leur nom
pb interprétation jquery dans ajax prototype[RESOLU] pb ajax, jquery, variable session
JSON php vers jquery Ajax problem[slider jquery dans CMS]
Peut on utiliser JQuery avec GWTFramework pour RIA : JQuery vs Dojo vs GWT
(jQuery) Problème scrollTo[EXAM!!!] Qui s'y connais en Jquery ???
Plus de sujets relatifs à : Galeries jquery Ui Tools


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR