Réalisations - Yet Another Gallery for jQuery

Sommaire

Introduction
Démonstration
Téléchargement
Mise en place
Personnalisation de l'apparence (CSS)
Retour et développement

Afin de présenter sur ce site ma galerie de photos d'une manière interactive et agréable, j'ai développé une galerie d'images à l'aide de l'excellent framework javascript jQuery. Se basant sur le code (X)HTML d'une simple liste non ordonnée, elle la transforme en une véritable application supportant des commandes au clavier, à la souris... La version mise en place dans la catégorie Photographie est de plus liée par le biais de webservices à ma galerie flickr, et ne demande donc aucune maintenance.

Cette galerie a été testée avec les dernières versions des navigateurs actuels (Firefox 3.0.5, Opera 9.51, Safari 3.1.2, Internet Explorer 7 et Chrome 1.0), respecte les standards du W3C XHTML 1.1 et CSS 2.0 et reste accessible en mode dégradé aux navigateurs plus anciens ou aux dispositifs pour handicapés.

Je souhaite faire profiter la communauté de ce développement, qui est donc mis en ligne sous licence GNU GPL.

Démonstration

Transformez ceci (une simple liste non ordonnée d'images) :

<ul class="gallery">
    <li><a href="media/yag-demo/IMG_0782.jpg" ><img src="media/yag-demo/th-IMG_0782.jpg" alt="Picture 1" title="Picture 1" longdesc="media/yag-demo/desc1.txt" /></a></li>
    <li><a href="media/yag-demo/IMG_0760.jpg" ><img src="media/yag-demo/th-IMG_0760.jpg" alt="Picture 2" title="Picture 2" longdesc="media/yag-demo/desc2.txt" /></a></li>
    <li><a href="media/yag-demo/IMG_5599.jpg" ><img src="media/yag-demo/th-IMG_5599.jpg" alt="Picture 3" title="Picture 3" longdesc="media/yag-demo/desc1.txt" /></a></li>
    <li><a href="media/yag-demo/IMG_5672.jpg" ><img src="media/yag-demo/th-IMG_5672.jpg" alt="Picture 4" title="Picture 4" longdesc="media/yag-demo/desc2.txt" /></a></li>
    <li><a href="media/yag-demo/IMG_5698.jpg" ><img src="media/yag-demo/th-IMG_5698.jpg" alt="Picture 5" title="Picture 5" longdesc="media/yag-demo/desc1.txt" /></a></li>
    <li><a href="media/yag-demo/IMG_5703.jpg" ><img src="media/yag-demo/th-IMG_5703.jpg" alt="Picture 6" title="Picture 6" longdesc="media/yag-demo/desc2.txt" /></a></li>
    <li><a href="media/yag-demo/IMG_8656.jpg" ><img src="media/yag-demo/th-IMG_8656.jpg" alt="Picture 7" title="Picture 7" longdesc="media/yag-demo/desc1.txt" /></a></li>
    <li><a href="media/yag-demo/IMG_8661.jpg" ><img src="media/yag-demo/th-IMG_8661.jpg" alt="Picture 8" title="Picture 8" longdesc="media/yag-demo/desc2.txt" /></a></li>
</ul>

En ceci (une galerie d'images entièrement interactive) :

La galerie d'image peut être parcourue grâce à la roulette de la souris et aux boutons de défilement de part et d'autre. Si le focus est sur l'une des miniatures, les touches du clavier Gauche, Droite et Espace peuvent aussi être utilisées.

Lorsque la souris passe sur la zone de visualisation, le titre de l'image s'affiche (extrait depuis le paramètre title). En passant la souris sur le titre, celui-ci s'étend pour afficher une description étendue (rappatriée depuis l'URL fournie par le paramètre longdesc).

Si une image est trop grande pour la zone de visualisation, elle sera automatiquement mise à l'échelle. Dans ce cas, un clic sur l'image permet d'afficher celle-ci à sa taille réelle.

Téléchargement

Version 1.0 (20090131)

Plus de fichiers et anciennes version sur le projet Google Code consacré.

Mise en place

Rien de plus simple à mettre en place à partir du moment où la structure de départ est bien respectée (liste non ordonnée de miniatures liées vers les images correspondantes, voir le code proposé dans la démonstration). La bibliothèque jQuery doit bien entendu être incluse, tout comme YAG. La feuille de style CSS est elle-aussi indispensable. Il suffit enfin d'utiliser la fonction YAG sur un objet jQuery pour transformer les listes répondant à un sélecteur CSS donné.

Au final, il suffit donc d'ajouter les lignes suivantes dans l'en-tête head de la page :

<link rel="stylesheet" href="gallery.css" type="text/css" />
<script type="text/javascript" src="jquery-1.3.min.js"></script>
<script type="text/javascript" src="jquery.yag-1.0.min.js"></script>
<script type="text/javascript">
/*<![CDATA[*/
    $(document).ready(function() {
        $(".gallery").YAG();
    });
/*]]>*/
</script>

Les balises script peuvent indifféremment être placées vers la fin du document, pour une meilleur optimisation du chargement de la page.

Personnalisation de l'apparence (CSS)

Il est assez facile d'adapter l'apparence de la galerie aux besoins de chacun. De bonnes connaissances en CSS sont tout de même requises, pour bien différencier les styles visuels nécessaires au fonctionnement de la galerie et ceux uniquement portés sur l'esthétique.

Voici une représentation de l'arbre DOM avant la mise en place de YAG, ainsi que la fonction de chaque élément :

ul.gallery                        Liste non ordonnée
 ├li                              Element de la liste
 │ └a                             Lien vers l'image en pleine taille
 │   └img                         Miniature de l'image
 ├...                             ...

Voici le même arbre DOM après :

div.gallery                       Conteneur principal
 ├div.YAG-viewport                Zone de visualisation
 │ ├div.YAG-spinner               Témoin de chargement
 │ ├div.YAG-infobox               Boîte d'informations
 │ │ ├div.YAG-infobox-overlay     Fond translucide de la boîte d'information
 │ │ └div.YAG-infobox-content     Contenu de la boîte d'information
 │ │   ├div.YAG-title             Titre de l'image
 │ │   └div.YAG-content           Description de l'image
 │ └img                           Image
 └div.YAG-thumbs                  Galerie de miniatures
   ├div.YAG-spinner               Témoin de chargement
   ├div.YAG-button-backward       Bouton "retour"
   ├div.YAG-button-forward        Bouton "avance"
   └ul                            Liste non ordonnée
     ├li                          Element de la liste
     │ └a                         Lien vers l'image en pleine taille
     │   └img                     Miniature de l'image
     ├...                         ...

Notez bien que la liste non ordonnée du départ a transmis ses classes au conteneur principal. Il est ainsi possible de le référencer facilement pour appliquer des styles particuliers à la galerie. Dans cet exemple, c'est la classe gallery qui a été utilisée, mais n'importe quelle classe fera l'affaire moyennant la feuille de style adaptée.

En plus de cela, l'affichage d'une image en taille réelle peut aussi être personalisé. Voici son arbre DOM :

div.YAG-gallery-realsize          Conteneur principal
 ├div.YAG-overlay                 Fond translucide
 └div.YAG-frame                   Cadre entourant l'image
   ├img                           Image
   └div.YAG-title                 Titre de l'image

Retour et développement

Je serais très heureux de recevoir un retour si vous utilisez cette galerie. Bugs, suggestions, remerciements, questions...

Merci d'utiliser pour cela le projet Google Code consacré. Vous pouvez bien sûr aussi me contacter par e-mail, mes coordonnées sont disponibles sur la page "contact" de ce site.

Si vous êtes enthousiaste, osez effectuer un petit don par Paypal, ça fait toujour plaisir recevoir de quoi s'offrire une bière ou un café, qu'on appréciera en pensant au temps passé à développer, débugger et tester :)

Setaou.net