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> :
Sommaire
<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.
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 !
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
@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 ;)
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.
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