* * * * *

Abonnez-vous !

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

  • A propos de l’auteur
  • Archives
  • Contacts
  • 11
    fév 08
    Catégorie : Design

    Outils : améliorez la présentation de vos galleries photos



    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

    Galerie photo FancyZoomFancyZoom 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

    Galerie photo HighSlideHighslide 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…

    Galerie photo HighSlide Exemple

    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 !

    Cet article vous a plu ? Ne perdez plus aucune info : abonnez-vous gratuitement !

    A vous de jouer ! Laissez un commentaire :

    XHTML: Vous pouvez utiliser ces tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>

    Innovablog motorisé par WordPress
    Theme Wordpress par Olivier Favre
    Site Map
    RSS Feed
    Contenu intégralement sous licence Creative Commons