Un zoom pour l'album photo

Publié le 9 août 2006 par Francisek

Choses promises... Avant hier, j'annonçais la mise en place d'un zoom sur l'album photo dans mon blog et vous demandais si ça vous intéressait. Comme certains se sont manifestés (dont des fidèles de ce blog), cet outil est disponible pour vous.

Pré-requis:

Pour que le zoomer fonctionne vous devez:

avoir un blog Privilège ou Premium ;
définir dans votre CSS la largeur du conteneur de la photo (conseillé), par exemple:
#photo {width:100%;}
utiliser l'entête.

Installation:

L'installation du zoomer est assez simple:

Editez votre entête en mode source,
Insérez-y la ligne:

<script type="text/javascript" ><script>
Validez
Editez votre CSS et ajoutez à la fin du fichier (cela nécessite que le CSS soit valide):
/* Zoom */
.zoomer{
font-size:20px; /* pour modifier la taille du zoomer, changez la valeur de la taille police*/
width:5em;
height:1em;
}
.zoomer a{
font-size:0;
display:block;
float:left;
position:relative;
width:20%;
}
/* Couleur des barres de zoom */
.z20{
background-color:#ff0;
}
.z40{
background-color:#fc0;
}
.z60{
background-color:#f90;
}
.z80{
background-color:#f60;
}
.z100{
background-color:#f00;
}

Il ne vous reste plus qu'à vous rendre sur votre album pour vérifier le bon fonctionnement.
Voici ce que vous devriez voir apparaître:
Capture d'ecran de l'album