Pour le retour des tutoriels JQuery pour l’utilisation de plugins, je propose aujourd’hui de coupler 2 plugins (JCarousel et Lytebox) pour faire une petite galerie photo.
Lytebox n’est pas à proprement parler un plugin JQuery, il est totalement indépendant du framework. Il permet d’afficher les photos en grand format à l’écran, devant le contenu du reste du site.
Voir la démo de Tutorial JQuery : galerie photo avec JCarousel et Lightbox
Après avoir télécharger les 2 plugins, il faut les importer dans la page HTML où tu souhaites créer ta galerie photo :
1 2 3 4 5 6 | <link href="css/jquery.jcarousel.css" rel="stylesheet" type="text/css" /> <link href="css/lytebox.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.jcarousel.pack.js"></script> <script type="text/javascript" src="js/lytebox.js"></script> |
Le deux premières lignes permettent d’importer les 2 feuilles de style des plugins, chacune étant nécessaire au bon fonctionnement des plugins. On pourrait les fusionner dans un seul fichier pour optimiser le temps de chargement de la page, mais dans un soucis de clarté je les ai laisser séparé. Les lignes 4 à 6 permettent d’importer tout d’abord JQuery, le plugins JQuery JCarousel et enfin Lytebox.
Il faut ensuite préparer le code HTML pour permettre l’affichage du caroussel de photos (en miniature). Pour que le plugin JCarousel fonctionne, il faut créer une liste non-ordonnée (>ul<) avec pour chaque élément (&ht;li<) une image. Enfin pour permettre l’agrandissement des photos avec Lytebox, j’ai crée un lien sur les miniatures pointant vers l’adresse de la grande photo correspondante. Il faut aussi ajouter l’attribut « rel » (avec la valeur « lyteshow » pour lance un diaporama) sur les liens pour que le lien fonctionne avec la Lytebox.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <ul class="jcarousel-skin-tango"> <!-- la classe correspond au skin choisi pour le plugin JCarousel --> <li><!-- on créé un élément de la liste --> <a href="images/1-2.jpg" rel="lyteshow" title=""><!-- lien pointant vers la photo en gran format, ajouter une valeur à l'attribut title pour afficher une légende --> <img src="images/1.jpg" alt="" /><!-- on affiche la miniature --> </a><!-- on ferme le lien ;) --> </li><!-- on ferme l'élément de liste pour en ouvrir d'autres après --> <li><a href="images/2-2.jpg" rel="lyteshow" title=""><img src="images/2.jpg" alt="" /></a></li> <li><a href="images/3-2.jpg" rel="lyteshow" title=""><img src="images/3.jpg" alt="" /></a></li> <li><a href="images/4-2.jpg" rel="lyteshow" title=""><img src="images/4.jpg" alt="" /></a></li> <li><a href="images/5-2.jpg" rel="lyteshow" title=""><img src="images/5.jpg" alt="" /></a></li> <li><a href="images/6-2.jpg" rel="lyteshow" title=""><img src="images/6.jpg" alt="" /></a></li> <li><a href="images/7-2.jpg" rel="lyteshow" title=""><img src="images/7.jpg" alt="" /></a></li> <li><a href="images/8-2.jpg" rel="lyteshow" title=""><img src="images/8.jpg" alt="" /></a></li> <li><a href="images/9-2.jpg" rel="lyteshow" title=""><img src="images/9.jpg" alt="" /></a></li> <li><a href="images/10-2.jpg" rel="lyteshow" title=""><img src="images/10.jpg" alt="" /></a></li> <li><a href="images/11-2.jpg" rel="lyteshow" title=""><img src="images/11.jpg" alt="" /></a></li> <li><a href="images/12-2.jpg" rel="lyteshow" title=""><img src="images/12.jpg" alt="" /></a></li> <li><a href="images/13-2.jpg" rel="lyteshow" title=""><img src="images/13.jpg" alt="" /></a></li> </ul> |
On peut bien sûr personnaliser l’affichage en modifiant les fichiers CSS des deux plugins. Il est bien entendu nécessaire de modifier le CSS du plugin JCarousel si tu as des miniatures qui ont un autre format, mais le plugin fonctionne mieux avec des images carrées (ou juste l’élément du liste avec un « overflow:hidden »). Pour comprendre les modifications, je te conseille de partir des exemples donnés avec le plugin JQuery JCarousel ou partir de mon exemple disponible en téléchargement ici.
Pas encore de billet sur le même sujet !
Very nice Plugin Arnaud! If you are looking for more Image-Galleries based on jQuery, watch this article « Creative Image-Galleries by jQuery »
Thanks !
I didn’t developed the plugin, I only made the tutorial ! Glad you liked it.
I have already seen your articles with some very good JQuery plugins !
Nice ton blog mec. Le nouveau design est super!
Bat / Kurt
Merci !
Ping : » Quelques chiffres 10 jours après le nouveau design // JQuery, PHP, html, design… // arnaud-k : un blog de geek
IE8
don’t show nav buttons (next, prev, pause, close)
En essayant d’utiliser ton tuto je me rend compte que tu as oublié un petit détail…
Tu oublies d’appeller ton carousel dans l’entête il me semble…
Il manque ceci :
J’ai repéré cela en comparant le code que tu fournis ici,avec ton exemple…
Sinon, excellent tuto et merci bcp !
Bonne journée
slt,
merci pour le tuto
mais est ce qu’on peux mettre 2 carousel avec seulement 2 flèche de navigation?
merci
Très bien le site !!!
comment tu integres un autoscroll pour le defilement des photos? et enlever la bordure bleu ?
Bonjour,
Super Tuto !
Par contre est-il possible de l’avoir sur deux lignes ? (au lieu d’une bande d’image)
pourrais tu me dire où modifier pour le transformer en vertical?