La plupart d’entre vous connaissent certainement les excellent plugin Lightbox (images) et Vidéobox (vidéos). Sauf erreur de ma part, le plugin Lightbox inclus un système de navigation par onglets (précédent/suivant) mais pas de fonction Slide Show. Lightview est un plugin du même type mais qui a l’avantage d’inclure une fonction Slide Show.
Démo Vidéo :
1 : Pour commencer téléchargez le fichier Lightview 1.0.1 2.0.3 (zip) et uploadez le sur votre serveur.
2 : Rendez vous dans votre éditeur et ajoutez les codes suivants juste avant la balise </head> :
<link rel= »stylesheet » type= »text/css » href= »css/lightview.css » />
<script type=’text/javascript’ src=’js/prototype.js’></script>
<script type=’text/javascript’ src=’js/scriptaculous.js?load=effects’></script>
<script type=’text/javascript’ src=’js/lightview.js’></script>
3 : Pour inclure cette fonction ajoutez simplement l’attribut rel= »lightview » à vos images (individuelles) :
<a href=’image.jpg’ rel=’lightview’>mon image<a/>
3.1 : Pour utiliser la fonction Slide Show lors de l’affichage de plusieurs images incluses dans un même ensemble procédez comme suit :
<a href=’image1.jpg’ rel=’lightview[nom-de-l'ensemble]‘>Image1<a/>
<a href=’image2.jpg’ rel=’lightview[nom-de-l'ensemble]‘>Image2<a/>
etc…
3.2 : Vous pouvez enfin ajouter des titres et/ou sous-titres avec les attributs title et captation :
<a href=’image.jpg’ title=’le-titre’ rel=’lightview’ >image<a/>
<a href=’image1.jpg’ title=’le-titre-de-l’image :: le-sous-titre’ rel=’lightview’>image1<a/>
<a href=’image2.jpg’ title=’le-titre-de-l’image :: le-sous-titre’ rel=’lightview’>image2<a/>
<a href=’image3.jpg’ title=’le-titre-de-l’image :: le-sous-titre’ rel=’lightview’>image3<a/>
etc…
Plus tester Lightview, obtenir plus d’infos et détails sur les autres paramétrages rendez vous sur la page dédiée du plugin Lightview.
aguila #1
Pouvez-vous s'il vous plait m'indiquer dans quel fichier exactement je dois insérer le script entre les balises head Merci d'avance
jujudellago #2
Salut, j'adore cette librairie, a mon avis la meilleure du genre, mais j'aimerai souligner ici qu'elle n'est pas open source, mais sous "Creative Commons Attribution-Noncommercial-No Derivative Works License." et ainsi, requiert un légé cout, 3$ pour un site non-commercial, 15$ pour un nombre illimité de sites non commerciaux, 49$ pour un site commercial (c'est a dire, comportant des banners de pub) 295$ illimité. je développe moi même avec prototype & scriptaculous, et peut donc assurer qu'il y a un travail énorme pour obtenir un tel résultat, qui vaut bien la rémunération pour l'auteur.
stagueve #3
@sbapstien : merci pour l'info !!! :) J'ai modifié le lien mais il n'y a aucune raison pour que l'install soit différente. Teste telle que je l'ai indiqué et reviens me dire si ça a fonctionné STP ;)
Sbapstien #4
Salut Ton lien "Téléchargez le fichier Lightview 1.0.1 (zip)" ne marche plus jai donc ete sur le site de Lightview il y a mtn la version 2.0.3 si tu pouvai expliquer commen cela marche avec la 2.0.3 ou remettre le lien ver la 1.0.1 merci pour le tuto
Deep@leX#5
C'est très intéressant, malheureusement je suis encore sous Lightbox, par conséquent il existe un certain nombre d'articles qui ont des images ayant un rel="lightbox". Or pour le portage vers ce script que je ferai volontiers il faudrait que ça soit rétro compatible avec les attributs lightbox préexistants. Y-a-til une solution, je suis nul en programmation, je me contente d'un modeste html pour rédiger mes billets sous Dotclear 1.2.6 !