Innovablog, Le Web où l’Innovation ordinaire : design, ergonomie, interfaces riches, web 2.0, eCommerce,…

Chaque blog ou site Internet publie et diffuse de nombreux documents, pour la plupart des photos. Or l’affichage de ces photos se résume la plupart du temps en un simple lien vers le fichiers image. On peut réellement offrir mieux à ses visiteurs, tout en préservant une certaine accessibilité. Voici deux outils de galeries JavaScript gratuites qui devraient vous aider dans cette voie et rendront vos galeries photos soudain séduisantes aux yeux de vos visiteurs.

FancyZoom: une galerie JavaScript

FancyZoom est en effet une galerie JavaScript gratuite offrant un effet sympathique lors de l’ouverture du l’image et offre une belle alternative à Lightbox.js. Le déploiement est enfantin :

• Inclure dans chaque page web proposant le service les fichiers de script JavaScript.
• Pour activer le service, on l’active au chargement de la page, ce qui consiste à rajouter sur la balise body le marqueur suivant :
• Et c’est terminé ! Chaque appel dans une balise <a> à un fichier image (extensions jpg, gif, png, bmp, or tiff) déclenchera l’ouverture du fichier.

Le résultat : c’est un joli zoom sur le fichier, qui propose un lien de fermeture, mais également un sous-titre à l’image de façon automatique en en allant récupérer le contenu de l’attribut alt. Enfantin !

Highslide JS : une galerie JavaScript pour tous formats

Highslide JS est une autre galerie Javascript gratuite (dans le cadre d’une utilisation non-commerciale) qui reprend toutes les caractéristiques établies (voir ci-dessus). Son intérêt est qu’elle permet d’ouvrir différents supports, comme les animations Flash : contenu HTML, issu d’une requête AJAX, iFrame, Flash…

La mise en oeuvre est similaire :

• Inclure dans chaque page web des fichiers JavaScript,
• Inclure de la même manière la feuille de style dédiée,
• Le lien déclencheur doit se voir greffer les attributs suivants :

 class=“highslide” onclick=“return hs.expand(this)”

• L’outil viendra prélever le contenu du sous-titre dans l’attribut title de la balise img.

Highslide est fonctionnellement plus riche que les solutions standard et se révèle robuste à l’effort. A mettre en place !