Un zoom pour l'album photo

Publié le 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:
  1. Editez votre entête en mode source,
  2. Insérez-y la ligne:
    <script type="text/javascript" ><script>
  3. Validez
  4. 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

Publié dans Outils divers

Commenter cet article

CéLine 28/08/2006 19:33

Ca fait un bout de temps que je veux m'atteler a la tache de mettre en forme mon album photo..faut dire qu'il ressemble a rien pour l'instant..enfin pas grand chose. Mais je ne sais pas trop par quel bout prendre cette partie là du CSS : quelle ligne correspond a quelle action ect ect...
J'ai l'impression que mon CSS est mal bidouillé de ce coté là mais je n'ai pas trouvé de modele de base interessant pour après faire des tests dessus.
Sur tout les blogs d'aide, il a souvent pleins d'articles sur les modules, l'en-tête ect ect mais jamais sur l'album photo..dommage.
En tout cas, je grave tes indication sur le zoom dans un coin de ma mémoire, elles me seront fort utile plus tard.

Merci en tout cas, pour tes divers articles, ton aide, tes outils et tout le reste.

Francisek 28/08/2006 19:42

  Je me garde donc cette idée de coté. Prochainement, des exemples de mise en forme de l'album photos.Pour le détail, tu peux commencer par regarder sur le blog CSS de Titia qui détaille cette partie : Classes liées aux albums

sugi 11/08/2006 10:40

Coucou Francis
Bien dormi?^^
Alors je viens de mettre le bon script et ça marche! chouette :-)
Merci!^^
Biz et bonne journée
sugi la fourmiz

Francisek 11/08/2006 18:45

 C'est quand même mieux avec les bonnes indications !!

sugi 11/08/2006 00:24

Merci Francis et bonne nuit!
Note moi aussi je devrai aller dormir lol
Je corrigerais demain (ah zut on est demain..) enfin tantot quoi..je risque de faire des bêtises^^

sugi la ofurmiz

sugi 10/08/2006 23:59

Mon blog principal
http://sugihyde.over-blog.com

biz et bonne nuit ^^

sugi lafourmiz

Francisek 11/08/2006 00:12

 Bon ben j'ai vite compris: je ne donnais pas la bonne url du script. La bonne est en ligne à présent.Bises et bonne nuit (j'en ai besoin, je crois)

sugi 10/08/2006 20:44

PS: non point du tous..je suis passé en mode source ;-)

Francisek 10/08/2006 22:41

 Sur quel blog ?