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.

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

37 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?

  11. britain dit :

    merci pour ce tuto,j’aimerai savoir si il est possible d’attacher les images à des iamges et si on peut utiliser la fonction « image à la une » avec ?
    merci

  12. britain dit :

    j’ai écrit trop rapidement,pardon,je voulais savoir si on pouvait attacher les images à des articles et si on peut utiliser la fonction « image à la une » avec ?,merci

  13. Cocoa dit :

    Un super plugin, par contre j’aimerai le centrer dans ma page si possible (je suis un peu perdu dans les feuilles de style).
    Sous IE les bordures sont bleu, et les outils du slide sont absents. Possibilité de résoudre le problème?
    Merci!!!!

  14. britain dit :

    il faudrait avoir le lien vers ton site,avec firebug (extension pour firefox ou chrome) on peut modifier virtuellement un site,et ainsi trouve le bon code pour le centrer.

  15. Cocoa dit :

    Pour centrer le plugin j’ai trouvé dans le css.
    Par contre le problème persiste pour IE, sous Firefox et chrome les bordures bleu n’apparaissent pas, et les outils du slider sont présent contrairement à IE.
    Merci pour ta réponse :)

  16. britain dit :

    quelle bordure bleu ?

  17. Cocoa dit :

    Contrairement à ce que je veux, une bordure bleu apparaît autour des images galerie sur internet explore ( et seulement sur ce navigateur).

  18. britain dit :

    un cadre,comme là ?
    http://sorgalla.com/projects/jcarousel/examples/static_simple.html
    si on avait l’adresse de votre site,cela serait plus facile.

  19. Cocoa dit :

    Je suis en local encore :S
    Les images de la galerie sont encadrées par un cadre bleu.
    Et je ne comprend pas pk…
    Merci!!

  20. britain dit :

    surement border:# avec le code de la couleur mais sans voir,dire dans quel .css, peut être jquery.jcarousel.css

  21. Cocoa dit :

    Merci de ton aide, je vais fouiller un peu dans le css.
    Par contre auriez vous une idée pourquoi internet explorer n’ouvre pas les images (pause lecture précédent suivant..)??

  22. britain dit :

    IE9 ?
    souci avec le javacript.

  23. Cocoa dit :

    Oui, problème de compatibilité?

  24. britain dit :

    vous avez le même souci avec la démo d’ici ?

  25. Cocoa dit :

    Oui le problème est le même ici..

  26. britain dit :

    IE9 ne reconnait pas le code,il faudrait que l’auteur répond là je ne sais pas.

  27. Cocoa dit :

    Aucune idée non plus, un petit coup de pouce de l’auteur serait génial..

  28. britain dit :

    les liens sont là mais on ne les voit pas.

  29. Cocoa dit :

    ?? Ha oui je viens de voir ca.
    D’où cela pourrait venir??

  30. britain dit :

    peut être plus un souci avec la feuille de style,IE9 ne reconnait pas les codes.
    je ne connais pas d’équivalent à firebug pour IE,dommage.

  31. Cocoa dit :

    D’accord en tout cas Merci pour votre aide!!

  32. britain dit :

    faire F12 avec IE9.
    ainsi on a un truc comme firebug.
    on voit beaucoup de choses barrés,pas pris ne compte.

  33. florent dit :

    salut a tous

    super tuto par contre je n’arrive pas a modifier le css , ni meme à l’intégrer quelqu’un pourrais m’aider plz?

  34. britain dit :

    @florent,merci de donner l’adresse de ton site,sans rien pas possible de comprendre le problème,tu as mis les codes dans header.php pour appeler la feuille de css ?

  35. niko 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

  36. Agrin dit :

    Also, the image that I am using is a PNG. Would that affect the code ( I have aerlady tried replacing jpg eith png )?I am using a child theme of twenty eleven by the way

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>