Tous Blogs - Effets sur Images et documents Les ficelles d Anna K.

début précédent 4 5 6 7 8 9 10 11 12 suivant fin

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</a>

    
        <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>
    
    </li>
    <li class="topic"><a class="set" href="#Landscapes">Landscapes</a>
    
        <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>

    
    </li>
    <li class="topic"><a class="set" href="#Birds">Birds</a>
    
        <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>
    
    </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)

début précédent 4 5 6 7 8 9 10 11 12 suivant fin

Recherche Rapide Sur le Site

Sommaires

Publicité

Catégories

top

add

deutsch

english

Dernières Astuces

Installer une PlayList au design original
Allez sur MOONK Inscrivez-vous. Vous recevez un mail : vous devez cliquer sur un lien...
Offrez-vous 9 minutes de gloire sur un site
Ce ne sont pas 15 minutes, mais 9 minutes de gloire pendant lesquelles les derniers articles...
Enlever les fonds d'origine dans le Design Jackye Brown
AVANT TOUTES ACTIONS : Dans Design, vérifiez que vous avez bien sélectionné le...
Privilège - Créer un slideshow avec boutons Play/Stop - NoobSlide/Sample 2
NoobSlide est un script qui vous permet de faire défiler vos images. Voir Sample 2 ...
Mettre une image devant le titre de la fenêtre Recommander
Vous allez dans le CSS et vous rajoutez ce qui est en rouge ou toute la ligne si elle n'existe...
Installer un Message secret à gratter
Pour obtenir ce widget très simple et ludique, connectez-vous à widgetbox. Vous pouvez...
Privilège - Créer un slideshow simple avec NoobSlide - Sample 1
NoobSlide est un script qui vous permet de faire défiler vos images. Voir Sample 1 ...
Espacer les lettres des mots dans un article
Vous écrivez votre phrase en mode normal. En mode source, vous obtenez Vous...
Récapitulatif : changer l'écriture du titre du résumé d'article en accueil
Créez un blog qui vous...
Masquer la pagination dans les articles des archives
Si vous avez un accueil splash sur votre blog, le plus simple est de mettre un lien d'entrée...

liste complète

Fêtons le Printemps

Printemps - Pluie de fleurs sur le blog

Commentaires

17/05/2008 20:28:43
Article réservé au Chevalier
17/05/2008 19:47:50
Mettre un fond transparent dans tous les articles
17/05/2008 17:10:15
Privilège - Faire défiler un message dans la barre de statut supérieure
17/05/2008 16:39:26
Article réservé au Chevalier
17/05/2008 16:18:31
Le petit lexique à l'usage du blogueur débutant

A suivre...

Visiteurs Blogasty

Faire un lien vers les Ficelles

Code à recopier:

Les Ficelles d'Anna K. Sur votre Blog

Le Widget des Ficelles

Générateurs

Suivi technique de la plateforme Over-Blog

Publicité

Achetez sur le Net!

Casque sans Fil Cartouche Encre Dvd Vierge Cd Vierge Lecteur MP3 Téléphone Mobile Ordinateur Portable

Coin Rencontre

Rencontre Annonces Club Rencontre Rencontre Sérieuse Rencontre Dialogue Rencontre Célibataire Ame Sur

Espace Connexion Internet

Wifi FAI Internet Haut Débit Réseaux Sans Fil Offre Adsl

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