jeudi 16 septembre 2010

Concevoir : Fancy Zoom, un script de zoom très réussi !

Pour faciliter la lecture d'une page tout en la rendant plus agréable à lire, nous l'agrémentons d'images en miniature.
Il est alors souvent nécessaire de permettre à l'utilisateur de visualiser ces illustrations en plus grand (voire en taille réelle).

La solution basique est d'insérer un lien href sur l'image, pour ouvrir l'image dans une nouvelle fenêtre. Vous avouerez que, même si c'est efficace, ce n'est pas très sexy. Il faut, de plus, gérer une à une toutes les images de vos sites... fastidieux !

C'est là qu'intervient Fancy Zoom, un script développé par Cabel.name.
Il va vous permettre de créer sur tous les liens pointants vers des images présentes sur votre site, un effet de Zoom du plus bel effet, positionnant l'image sélectionnée au centre de la page en surimpression.

Sa mise en oeuvre est très simple :
  • Télécharger le fichier suivant : FancyZoom 1.1.zip
  • Déclarer les deux scripts suivants avant la balise de fin de header "/head" :
    • < script src="/js-global/FancyZoom.js" type="text/javascript">< /script>
    • < script src="/js-global/FancyZoomHTML.js" type="text/javascript">< /script>
  • Réaliser l'appel à la méthode d'initialisation du composant setupZoom() au chargement de votre page : onload="setupZoom()"
Voilà, vous pouvez tester !!
Pour les images que vous ne voulez pas zoomer, ajoutez dans votre balise href : rel=”nozoom”

Ce script est offert gracieusement par son auteur, uniquement pour les sites à but non commercial. Rapprochez vous de lui si votre utilisation n'est pas dans ce cadre !

Il existe aussi une version JQuery : http://www.dfc-e.com/metiers/multimedia/opensource/jquery-fancyzoom/

Aucun commentaire:

Enregistrer un commentaire