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?
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
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
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!!!!
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.
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
quelle bordure bleu ?
Contrairement à ce que je veux, une bordure bleu apparaît autour des images galerie sur internet explore ( et seulement sur ce navigateur).
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.
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!!
surement border:# avec le code de la couleur mais sans voir,dire dans quel .css, peut être jquery.jcarousel.css
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..)??
IE9 ?
souci avec le javacript.
Oui, problème de compatibilité?
vous avez le même souci avec la démo d’ici ?
Oui le problème est le même ici..
IE9 ne reconnait pas le code,il faudrait que l’auteur répond là je ne sais pas.
Aucune idée non plus, un petit coup de pouce de l’auteur serait génial..
les liens sont là mais on ne les voit pas.
?? Ha oui je viens de voir ca.
D’où cela pourrait venir??
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.
D’accord en tout cas Merci pour votre aide!!
faire F12 avec IE9.
ainsi on a un truc comme firebug.
on voit beaucoup de choses barrés,pas pris ne compte.
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?
@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 ?