Tutorial JQuery : galerie photo avec JCarousel et Lightbox

JCarousel

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 !

Cette entrée a été publiée dans JQuery, avec comme mot(s)-clef(s) , , . Vous pouvez la mettre en favoris avec ce permalien.

11 reponses a Tutorial JQuery : galerie photo avec JCarousel et Lightbox

  1. Very nice Plugin Arnaud! If you are looking for more Image-Galleries based on jQuery, watch this article « Creative Image-Galleries by jQuery »

  2. arnaud dit :

    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 !

  3. Bat dit :

    Nice ton blog mec. Le nouveau design est super!
    Bat / Kurt

  4. Ping : » Quelques chiffres 10 jours après le nouveau design // JQuery, PHP, html, design… // arnaud-k : un blog de geek

  5. Damon dit :

    IE8
    don’t show nav buttons (next, prev, pause, close) :(

  6. Arnaud dit :

    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

  7. badr dit :

    slt,

    merci pour le tuto
    mais est ce qu’on peux mettre 2 carousel avec seulement 2 flèche de navigation?
    merci

  8. Djay dit :

    Très bien le site !!!
    comment tu integres un autoscroll pour le defilement des photos? et enlever la bordure bleu ?

  9. vallwin dit :

    Bonjour,

    Super Tuto !

    Par contre est-il possible de l’avoir sur deux lignes ? (au lieu d’une bande d’image)

  10. brolysan dit :

    pourrais tu me dire où modifier pour le transformer en vertical?

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

*

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" highlight="">