Samedi 29 mars 2008

Créer une galerie de photos multipages en HTML - Lightbox2

Ce n'est pas très difficile à réaliser.

Voici un exemple : Lbox

Je l'ai mis sur une page à part car la galerie est trop large. Je n'y ai mis que quelques photos. Survolez avec la souris le menu, puis les photos.

Première étape :

Allez chez StuNicolls

Cliquez sur Download lightbox2.zip. 

Vous venez de sauvegarder un fichier .zip : une ensemble de fichiers compressés.

Pour les décompresser, j'utilise WinRAR - Extraire vers

Deuxième étape :

Dans votre administration, Documents - Autres fichiers :
  • vous créez un répertoire Lbox, vous y sauvegardez l'image :
    • close.gif
  • vous notez son adresse
Troisième étape :

Sur votre PC, vous cliquez sur le fichier lightbox2.html.
C'est un lien qui vous conduit sur une page web où apparaît la galerie.
Vous regardez sa source et la sauvegardez.
Je la mets ici pour les explications :

<style type="text/css">
/* ================================================================
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menu/lightbox2.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any
way to fit your requirements.
=================================================================== */
/* common styling */

a {color:#000;}
a:hover {text-decoration:none;}
a:visited {color:#111;}

/* slides styling */

.photo {width:720px; text-align:left; position:relative;}

.photo ul.topic {padding:0; margin:0; list-style:none; width:720px; height:auto; position:relative; z-index:10;}

.photo ul.topic li {display:block; width:240px; height:31px; float:left;}
.photo ul.topic li a.set {display:block; font-size:11px; width:239px; height:30px; text-align:center; line-height:30px; color:#000; text-decoration:none; border:1px solid #fff; border-width:1px 1px 0 0; background:#ccc; font-family:verdana, arial, sans-serif;}

.photo ul.topic li a ul,
.photo ul.topic li ul
{display:none;}

.photo ul.topic li a:hover,
.photo ul.topic li:hover a
{color:#fff; background:#aaa;}

.photo ul.topic li a:hover ul,
.photo ul.topic li:hover ul
{display:block; position:absolute; left:0; top:31px; list-style:none; padding:0; margin:0; height:375px; background:#ddd url(http://ddata.over-blog.com/xxxyyy/0/37/17/67/lbox/close.gif) no-repeat right top; width:479px; padding:70px 100px; border:20px solid #aaa;}

.photo ul.topic li a:hover ul li,
.photo ul.topic li:hover ul li
{display:inline; width:112px; height:87px; float:left; border:1px solid #fff; margin:1px;}

.photo ul.topic li a:hover ul li a,
.photo ul.topic li:hover ul li a
{display:block; width:110px; height:85px; cursor:default; float:left; text-decoration:none; background:#444; border:1px solid #888;}

.photo ul.topic li a:hover ul li a img,
.photo ul.topic li:hover ul li a img
{display:block; width:100px; height:75px; border:5px solid #eee;}

.photo ul.topic li a:hover ul li a img.large,
.photo ul.topic li:hover ul li a img.large
{position:absolute; display:block; width:0; height:0; overflow:hidden; border:0;}

.photo ul.topic li a:hover ul li a:hover,
.photo ul.topic li:hover ul li a:hover
{white-space:normal; position:relative;}

.photo ul.topic li a:hover ul li a:hover img,
.photo ul.topic li:hover ul li a:hover img
{position:absolute; left:-50px; top:-32px; width:200px; height:150px; border-color:#fff;}

.photo ul.topic li a:hover ul li a:hover img.large,
.photo ul.topic li:hover ul li a:hover img.large
{position:absolute; display:block; width:0; height:0; overflow:hidden; border:0;}

.photo ul.topic li:hover ul li a:focus,
.photo ul.topic li:hover ul li a:active,
.photo ul.topic li a:hover ul li a:active
{position:static; outline:0;}

.photo ul.topic li:hover ul li a:focus img,
.photo ul.topic li:hover ul li a:active img,
.photo ul.topic li a:hover ul li a:active img
{position:absolute; left:200px; top:170px; width:200px; height:150px; padding:0; background:#000; border:0; z-index:5;}

.photo ul.topic li:hover ul li a:focus img.large,
.photo ul.topic li:hover ul li a:active img.large,
.photo ul.topic li a:hover ul li a:active img.large
{position:absolute; left:15px; top:24px; width:640px; height:480px; padding:0; background:#000; border:4px solid #fff; z-index:10;}


</style>
</head>

<body>
<div class="photo">
<ul class="topic">
    <li><a class="set" href="#Portraits">Portraits<!--[if gte IE 7]><!--></a><!--<![endif]-->

    <!--[if lte IE 6]><table><tr><td><![endif]-->
        <ul>
<li><a href="#portrait1"><img src="http://idata.over-blog.com/0/37/17/67/photos/photo001bis.jpg" alt="" title="" /><img class="large" src="http://idata.over-blog.com/0/37/17/67/photos/photo001bis.jpg" alt="" title="" /></a></li>
<li><a href="#portrait2"><img src="http://idata.over-blog.com/0/37/17/67/photos/photo002bis.jpg" alt="" title="" /><img class="large" src="http://idata.over-blog.com/0/37/17/67/photos/photo002bis.jpg" alt="" title="" /></a></li>
<li><a href="#portrait3"><img src="http://idata.over-blog.com/0/37/17/67/photos/photo003bis.jpg" alt="" title="" /><img class="large" src="http://idata.over-blog.com/0/37/17/67/photos/photo003bis.jpg" alt="" title="" /></a></li>
<li><a href="#portrait4"><img src="lbox/portrait4a.jpg" alt="" title="" /><img class="large" src="lbox/portrait4.jpg" alt="" title="" /></a></li>
<li><a href="#portrait5"><img src="lbox/portrait5a.jpg" alt="" title="" /><img class="large" src="lbox/portrait5.jpg" alt="" title="" /></a></li>
<li><a href="#portrait6"><img src="lbox/portrait6a.jpg" alt="" title="" /><img class="large" src="lbox/portrait6.jpg" alt="" title="" /></a></li>
<li><a href="#portrait7"><img src="lbox/portrait7a.jpg" alt="" title="" /><img class="large" src="lbox/portrait7.jpg" alt="" title="" /></a></li>
<li><a href="#portrait8"><img src="lbox/portrait8a.jpg" alt="" title="" /><img class="large" src="lbox/portrait8.jpg" alt="" title="" /></a></li>
<li><a href="#portrait9"><img src="lbox/portrait9a.jpg" alt="" title="" /><img class="large" src="lbox/portrait9.jpg" alt="" title="" /></a></li>
<li><a href="#portrait10"><img src="lbox/portrait10a.jpg" alt="" title="" /><img class="large" src="lbox/portrait10.jpg" alt="" title="" /></a></li>
<li><a href="#portrait11"><img src="lbox/portrait11a.jpg" alt="" title="" /><img class="large" src="lbox/portrait11.jpg" alt="" title="" /></a></li>
<li><a href="#portrait12"><img src="lbox/portrait12a.jpg" alt="" title="" /><img class="large" src="lbox/portrait12.jpg" alt="" title="" /></a></li>
<li><a href="#portrait13"><img src="lbox/portrait13a.jpg" alt="" title="" /><img class="large" src="lbox/portrait13.jpg" alt="" title="" /></a></li>

<li><a href="#portrait14"><img src="lbox/portrait14a.jpg" alt="" title="" /><img class="large" src="lbox/portrait14.jpg" alt="" title="" /></a></li>
<li><a href="#portrait15"><img src="lbox/portrait15a.jpg" alt="" title="" /><img class="large" src="lbox/portrait15.jpg" alt="" title="" /></a></li>
<li><a href="#portrait16"><img src="lbox/portrait16a.jpg" alt="" title="" /><img class="large" src="lbox/portrait16.jpg" alt="" title="" /></a></li>
        </ul>
    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
    <li class="topic"><a class="set" href="#Landscapes">Landscapes<!--[if gte IE 7]><!--></a><!--<![endif]-->
    <!--[if lte IE 6]><table><tr><td><![endif]-->
        <ul>
<li><a href="#landscape1"><img src="http://idata.over-blog.com/0/37/17/67/photos/photo004bis.jpg" alt="" title="" /><img class="large" src="http://idata.over-blog.com/0/37/17/67/photos/photo004bis.jpg" alt="" title="" /></a></li>

<li><a href="#landscape2"><img src="http://idata.over-blog.com/0/37/17/67/photos/photo005bis.jpg" alt="" title="" /><img class="large" src="http://idata.over-blog.com/0/37/17/67/photos/photo005bis.jpg" alt="" title="" /></a></li>
<li><a href="#landscape3"><img src="http://idata.over-blog.com/0/37/17/67/photos/photo006bis.jpg" alt="" title="" /><img class="large" src="http://idata.over-blog.com/0/37/17/67/photos/photo006bis.jpg" alt="" title="" /></a></li>
<li><a href="#landscape4"><img src="http://idata.over-blog.com/0/37/17/67/photos/photo007bis.jpg" alt="" title="" /><img class="large" src="lbox/landscape4.jpg" alt="" title="" /></a></li>
<li><a href="#landscape5"><img src="http://idata.over-blog.com/0/37/17/67/photos/photo007bis.jpg" alt="" title="" /><img class="large" src="lbox/landscape5.jpg" alt="" title="" /></a></li>
<li><a href="#landscape6"><img src="lbox/landscape6a.jpg" alt="" title="" /><img class="large" src="lbox/landscape6.jpg" alt="" title="" /></a></li>
<li><a href="#landscape7"><img src="lbox/landscape7a.jpg" alt="" title="" /><img class="large" src="lbox/landscape7.jpg" alt="" title="" /></a></li>
<li><a href="#landscape8"><img src="lbox/landscape8a.jpg" alt="" title="" /><img class="large" src="lbox/landscape8.jpg" alt="" title="" /></a></li>
<li><a href="#landscape9"><img src="lbox/landscape9a.jpg" alt="" title="" /><img class="large" src="lbox/landscape9.jpg" alt="" title="" /></a></li>
<li><a href="#landscape10"><img src="lbox/landscape10a.jpg" alt="" title="" /><img class="large" src="lbox/landscape10.jpg" alt="" title="" /></a></li>
<li><a href="#landscape11"><img src="lbox/landscape11a.jpg" alt="" title="" /><img class="large" src="lbox/landscape11.jpg" alt="" title="" /></a></li>
<li><a href="#landscape12"><img src="lbox/landscape12a.jpg" alt="" title="" /><img class="large" src="lbox/landscape12.jpg" alt="" title="" /></a></li>
<li><a href="#landscape13"><img src="lbox/landscape13a.jpg" alt="" title="" /><img class="large" src="lbox/landscape13.jpg" alt="" title="" /></a></li>
<li><a href="#landscape14"><img src="lbox/landscape14a.jpg" alt="" title="" /><img class="large" src="lbox/landscape14.jpg" alt="" title="" /></a></li>
<li><a href="#landscape15"><img src="lbox/landscape15a.jpg" alt="" title="" /><img class="large" src="lbox/landscape15.jpg" alt="" title="" /></a></li>
<li><a href="#landscape16"><img src="lbox/landscape16a.jpg" alt="" title="" /><img class="large" src="lbox/landscape16.jpg" alt="" title="" /></a></li>
        </ul>

    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
    <li class="topic"><a class="set" href="#Birds">Birds<!--[if gte IE 7]><!--></a><!--<![endif]-->
    <!--[if lte IE 6]><table><tr><td><![endif]-->
        <ul>
<li><a href="#bird1"><img src="http://idata.over-blog.com/0/37/17/67/photos/photo008bis.jpg" alt="" title="" /><img class="large" src="http://idata.over-blog.com/0/37/17/67/photos/photo008bis.jpg" alt="" title="" /></a></li>
<li><a href="#bird2"><img src="http://idata.over-blog.com/0/37/17/67/photos/photo009bis.jpg" alt="" title="" /><img class="large" src="http://idata.over-blog.com/0/37/17/67/photos/photo009bis.jpg" alt="" title="" /></a></li>
<li><a href="#bird3"><img src="http://idata.over-blog.com/0/37/17/67/photos/photo001bis.jpg" alt="" title="" /><img class="large" src="http://idata.over-blog.com/0/37/17/67/photos/photo001bis.jpg" alt="" title="" /></a></li>
<li><a href="#bird4"><img src="lbox/bird4.jpg" alt="" title="" /><img class="large" src="lbox/bird4a.jpg" alt="" title="" /></a></li>
<li><a href="#bird5"><img src="lbox/bird5.jpg" alt="" title="" /><img class="large" src="lbox/bird5a.jpg" alt="" title="" /></a></li>
<li><a href="#bird6"><img src="lbox/bird6.jpg" alt="" title="" /><img class="large" src="lbox/bird6a.jpg" alt="" title="" /></a></li>

<li><a href="#bird7"><img src="lbox/bird7.jpg" alt="" title="" /><img class="large" src="lbox/bird7a.jpg" alt="" title="" /></a></li>
<li><a href="#bird8"><img src="lbox/bird8.jpg" alt="" title="" /><img class="large" src="lbox/bird8a.jpg" alt="" title="" /></a></li>
<li><a href="#bird9"><img src="lbox/bird9.jpg" alt="" title="" /><img class="large" src="lbox/bird9a.jpg" alt="" title="" /></a></li>
<li><a href="#bird10"><img src="lbox/bird10.jpg" alt="" title="" /><img class="large" src="lbox/bird10a.jpg" alt="" title="" /></a></li>
<li><a href="#bird11"><img src="lbox/bird11.jpg" alt="" title="" /><img class="large" src="lbox/bird11a.jpg" alt="" title="" /></a></li>
<li><a href="#bird12"><img src="lbox/bird12.jpg" alt="" title="" /><img class="large" src="lbox/bird12a.jpg" alt="" title="" /></a></li>
<li><a href="#bird13"><img src="lbox/bird13.jpg" alt="" title="" /><img class="large" src="lbox/bird13a.jpg" alt="" title="" /></a></li>
<li><a href="#bird14"><img src="lbox/bird14.jpg" alt="" title="" /><img class="large" src="lbox/bird14a.jpg" alt="" title="" /></a></li>
<li><a href="#bird15"><img src="lbox/bird15.jpg" alt="" title="" /><img class="large" src="lbox/bird15a.jpg" alt="" title="" /></a></li>
<li><a href="#bird16"><img src="lbox/bird16.jpg" alt="" title="" /><img class="large" src="lbox/bird16a.jpg" alt="" title="" /></a></li>
        </ul>
    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
</ul>

<br class="clear" />
</div></style>

Vous allez coller ce code en mode source.
  • en rajoutant ce qui est en rouge
  • en personnalisant avec votre propre adresse d'image (celle que vous avez sauvegardé dans votre administration à la 2ème étape) ce qui est en bleu
  • en vert, ce sont les images qui apparaîtront. Je ne les ai pas toutes mises en couleur. Vous les reconnaissez car devant chacune d'elle, il y a : src
  • il faudra peut-être revoir les dimensions :
    • dimension totale : .photo {width:720px; text-align:left; position:relative;}
    • .photo ul.topic {padding:0; margin:0; list-style:none; width:720px; height:auto; position:relative; z-index:10;}
    Si vous avez des connaissances en CSS, il est possible de modifier les couleurs, fonds, dimensions...
publié dans : Tous Blogs - Effets sur Images et documents
ajouter un commentaire commentaires (5)   

BlogsAVoir

LiensUtiles

TopListe

PlugBoard

Partenaires

PlugScroll

Annuaires

Forum

Recherche Rapide Sur le Site

 

Sommaires

 

Publicité

 

Catégories

top
add

 

Dernières Astuces

liste complète

 

Fêtons le Printemps

 

Commentaires

 

A suivre...

 
    Visiteurs Blogasty


 
    Faire un lien vers les Ficelles
 
Les Ficelles d'Anna K : Aide pour créer et personnaliser un blog

Code à recopier:



 
    Les Ficelles d'Anna K. Sur votre Blog
 

 
   Générateurs
 

 
    Suivi technique de la plateforme Over-Blog
 
 

 

Publicité

 

 
Contact - C.G.U. - Rémunération en droits d'auteur avec TF1 Network - Signaler un abus