Ambitious Vision

Un bout de code

Ce script nécessite MooTools 1.2.x

Comme vous pouvez le voir si vous allez sur mon site, ce dernier dispose d’une galerie d’images. Cette dernière permet d’ouvrir une image au premier plan, dans un cadre ayant des dimensions pré-définies mais gardant cependant l’échelle de l’image ouverte.

Et bien en fait, c’est moi qui ai fait cette galerie, tout seul avec mes petits doigts ! Je l’ai utilisée pour mes Activités Professionnelles, demandées dans le cadre de l’examen du BTS Informatique de Gestion.

Le code en lui même n’est pas exploitable comme ça, mais il peut vous permettre d’avoir une bonne base pour créer votre propre galerie un peu plus évoluée (avec une navigation dans les différentes images par exemple ?)

On va donc commencer par le HTML attendu par le script JavaScript qui suit :

Le fichier contenant les balises HTML (clic droit + Enregistrer sous…)

Ce qu’il faut savoir :

• L’attribut « name » sera considéré comme la description de l’image
• La classe n’est pas obligatoire
• L’ID non plus
• Pour éviter des temps de chargements trop longs, il est conseillé d’indiquer un thumbnail plutôt que l’image en elle même…

Le JavaScript maintenant :

Le fichier contenant le script JavaScript (même technique !)

Comme vous pouvez le voir, la fonction open(source, nom) attends deux paramètres.

• Le premier est le chemin de l’image que vous souhaitez ouvrir
• Le deuxième est le nom (et donc la description) de l’image que vous souhaitez ouvrir

Une fois le clic effectué, tout s’ouvre comme prévu ;)

Il ne faut pas oublier d’ajouter une fonction à l’évènement « onClick » sur chaque images, sinon la fonction open(…) ne se lancera jamais. Cette manipulation est inclus dans le fichier JavaScript.

Ce script ajoute une fonction sur l’évènement onClick de chaque élément ayant la classe « galerie ». Cette fonction appelle la fonction open(…) en passant les paramètres qu’il faut !

Ne reste plus que le CSS, que voici :

Le CSS pour la galerie (toujours la même technique…)

Voilà, vous avez tous les fichiers en mains, ils sont normalement assez bien commentés. Mais je laisse quand même une liste de ToDo, parce-qu’il faut bien que vous sachiez ce qui n’est pas optimisé :

• L’emplacement des images et le pré-formatage des noms des thumbnails ne sont pas gérés via des variables, il faut explorer le code pour pouvoir modifier ces paramètres…
• Il n’y a pas de système de navigation (on ne peut voir qu’une seule image, la fermer, et en ouvrir une autre après)
• L’image ne s’affiche que lorsque le chargement est terminé, avant cet évènement, on a un écran noir…

Vous pouvez me laisser vos avis, et dites moi si vous l’utilisez, que je saches si ça sert à quelqu’un ;) Ne me dites pas trop « tu aurais dû mettre ça », je sais très bien que ce n’est pas fini.