PAR ICI LE CHAT !

LIGHTBOX

Hier encore je ne savais pas ce que c'était...
J'ai essayé tous les scripts que j'ai trouvé, mais sans grand résultat...

Alors je suis allée sur le site de Zaza sur les conseils d'un visiteur mystère et j'ai trouvé la plus jolie  Lightbox et la plus complète, avec  bouton  "Next" et "prev" pour avancer ou reculer sur les photos, la possibilité de mettre une légende sous les photos et un joli cadre autour des photos...

je ne vous en dis pas plus, voyez par vous même...

Alors ?
Pas mal hein...

Commencez par ouvrir votre "page d'accueil" et coller juste avant la balise </head> le code suivant :

<script type="text/javascript" src="http://storage.canalblog.com/51/23/96840/13618117.js"></script> <script type="text/javascript" src="http://storage.canalblog.com/72/20/96840/13618095.js"></script> <script type="text/javascript" src="http://storage.canalblog.com/22/68/96840/13618109.js"></script>

"Validez" et ouvrez maintenant votre "feuille de style" et coller tout en bas de votre page (pour éviter d'encombrer le haut) le code suivant et validez :

#lightbox{ position: absolute; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0; } #lightbox a img{ border: none; } #outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; } #imageContainer{ padding: 10px; } #loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; } #hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; } #imageContainer>#hoverNav{ left: 0;} #hoverNav a{ outline: none;} #prevLink, #nextLink{ width: 49%; height: 100%; background: transparent url(http://storage.canalblog.com/45/40/96840/13616764.gif) no-repeat; /* Trick IE into showing hover */ display: block; } #prevLink { left: 0; float: left;} #nextLink { right: 0; float: right;} #prevLink:hover, #prevLink:visited:hover { background: url( http://storage.canalblog.com/97/96/96840/13616827.gif) left 15% no-repeat; } #nextLink:hover, #nextLink:visited:hover { background: url( http://storage.canalblog.com/46/48/96840/13616811.gif) right 15% no-repeat; } #imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100% } #imageData{ padding:0 10px; color: #666; } #imageData #imageDetails{ width: 70%; float: left; text-align: left; } #imageData #caption{ font-weight: bold; } #imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; } #imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; } #overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }

Maintenant il faut "redimensionner vos photos", si vous avec Xnview c'est le moment de vous en servir.

Il vous faut les photos dans leur "taille d'origine" pour le diaporama, et aussi en "petit format" pour les miniatures visibles en première page.

Une fois fait, récupérez le code ci-dessous et "changer l'adresse des images".

<p><a title="Plage La Dolce vita <br>Corse du sud" rel="lightboxuno" href="http://storage.canalblog.com/24/25/255038/13909951.jpg" target="_blank"><img width="75" height="55" border="0" alt="DSCN0076" src="http://storage.canalblog.com/12/07/255038/13909881.jpg" /> </a> <a title="Plage de Cala rossa<br>Corse du sud" rel="lightboxuno" href="http://storage.canalblog.com/81/43/255038/13910181.jpg" target="_blank"><img width="75" height="55" border="0" src="http://storage.canalblog.com/80/12/255038/13910190.jpg" alt="DSCN0097" /> </a> <a title="Restaurant de plage le 37°2<br>Corse du sud" rel="lightboxuno" href="http://storage.canalblog.com/32/44/255038/13910246.jpg" target="_blank"><img width="75" height="55" border="0" src="http://storage.canalblog.com/78/34/255038/13910255.jpg" alt="DSCN0151" /> </a> </p> <p><a title="Bonifacio<br>Corse du sud" rel="lightboxuno" href="http://storage.canalblog.com/20/65/255038/13910408.jpg" target="_blank"><img width="75" height="55" border="0" src="http://storage.canalblog.com/66/20/255038/13910371.jpg" alt="bon" /></a> <a title="Plage sur les Îles Lavezzi<br>Corse du sud" rel="lightboxuno" target="_blank" href="http://storage.canalblog.com/34/98/255038/13910675.jpg"><img width="75" height="55" border="0" alt="iles" src="http://storage.canalblog.com/28/86/255038/13910499.jpg" /></a> <a title="Plage de Cala rossa<br<Corse du sud" rel="lightboxuno" target="_blank" href="http://storage.canalblog.com/59/54/255038/13911023.jpg"><img width="75" height="55" border="0" alt="el" src="http://storage.canalblog.com/39/79/255038/13910991.jpg" /> </a> </p>

Voici la partie du code qui correspond à une image :

<p><a title="Plage La Dolce vita <br>Corse du sud" rel="lightboxuno" href="http://storage.canalblog.com/24/25/255038/13909951.jpg" target="_blank"><img width="75" height="55" border="0" alt="DSCN0076" src="http://storage.canalblog.com/12/07/255038/13909881.jpg" /> </a></p>

En gris c'est la légende qui apparait sous votre image, en rose c'est une balise pour revenir à la ligne, pour que "Corse du sud" soit à la ligne (vous pouvez l'enlever).

En rouge, c'est l'adresse de votre image grand format celle d'origine.

En blanc  c'est l'adresse de votre image miniature, que vous devez collez en entier.

Changez uniquement ce qui est en couleur.

URL pour faire un rétrolien vers ce message :
http://www.canalblog.com/cf/fe/tb/?bid=251752&pid=5206283

Liens vers des weblogs qui référencent ce message :

depuis Mü Design
Lire la suite >>