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.
