Site personnel de Xavier BUROT alias Xébiaut.

http://xebiaut.free.fr/
Le site de Xeb
Accueil du site > Monsieur Xavier > Mes oeuvres > Mes bidouilles informatiques > SPIP > Mini galerie de photos en plugin
Les auteurs Xébiaut
Date de création 21 décembre 2006
Date de dernière mise à jour 19 février 2008
Nombre de commentaires commentaire
Pour publier un lien de cette article sur Facebook

Mes bidouilles informatiques

Mini galerie de photos en plugin

Réalisation d’un plugin pour afficher une galerie de photos


Toujours à la recherche de nouveautés pour mon site, j’ai atterri sur le site Les plugins SPIP qui proposait une ébauche de mini galerie photos en plugin [1].

Ayant déjà réalisé un script de gallerie photo pour mes propres besoins [2], je fus fort intéressé par cette possibilité d’intégration sous forme de plugin, car celle-ci avait l’avantage, non négligeable, de ne pas imposer de modification du fichier article.html source.


Fonctionnalité du plugin

Ce plugin gallery intègre les fonctions javascript Lightbox JS v2.02 développé par Lokesh Dhakar. Cette fonction permet l’affichage, en surimpression de la page en cours (sur fond noir transparent), d’une photo contenu dans un article [3]. Bien que le programme Lightbox soit gratuit, vous pouvez, si vous le souhaitez, faire un don à l’auteur pour l’aider à parfaire son produit.

Ce plugin ajoute deux modèles de gestion des photos, et trois pour la pagination de la galerie :

Affichage d’une image avec l’option Lightbox :

Code :

<imgXX|lightbox|largeur=YY|hauteur=ZZ>.

Utilisation :

- XX correspond au numéro de l’image à afficher.
- YY correspond à la largeur de la photo. Par défaut, c’est SPIP qui calculera la largeur applicable.
- ZZ correspond à la hauteur de la photo. Par défaut, c’est SPIP qui calculera la hauteur applicable.

A noter :

- L’intégralité des paramètres reconnus par le modèle <img> original comme ceux d’alignement (left, right, center) sont utilisable par ce modèle.
- Si vous intégrer plusieurs photos avec l’option Lightbox dans un même article [4], vous verrez apparaître près du titre de la photo, lors de l’affichage de la photo au format original, le texte image x of y (x = position de la photo affichée ; y = nombre totale de photo de l’article). Vous pouvez passer d’une photo à l’autre en utilisant les touches N (Next => pour la photo suivante) et P (Previous => pour la photo précédente) sans pour autant revenir à l’article.

Affichage d’une galerie de photos

Code :

<imgXX|gallery|nbre_vignette=YY|senstri=Z>.

Utilisation :

- XX correspond au numéro d’une des photos contenues dans la gallerie. Celui-ci n’est qu’indicatif car l’image affichée par défaut est celle résultant du tri en fonction du num titre et de la date.
- YY correspond au nombre de vignettes affichées en bas pouvant aller de 1 à 10. En cas d’absence de ce dernier paramètre, le nombre de vignettes par defaut est 10.
- Z correspond au sens du tri. 0 = par ordre croissant ; 1 = par ordre décroissant. Par défaut, le s’effectue par ordre croissant.

A noter :

- Cette galerie intègre aussi l’option Lightbox lorsque l’on clique sur la photo sélectionnée.
- Pour que ce modèle fonctionne correctement, il faut que vous configuriez la Méthode de fabrication des vignettes [5] en mode GD2, et que vous sélectionner dans Génération de miniatures des images, l’option Générer automatiquement les miniatures des images.
- Afin que vos photos ne s’affichent pas à la fois dans la galerie dans le portfolio de l’article, vous devez Impérativement les insérer en tant qu’Image et non en tant que Document.

Adaptation du modèle #PAGINATION pour la galerie

Celle-ci est basée sur le modèle #PAGINATION introduite dans SPIP 1.9. Afin que celle-ci s’adapte au coté graphique de l’album photo, il m’a fallu créer trois nouveaux modèles :

Affichage du compteur

Code d’appel

- [(#PAGINATION{gallery_compteur}{total=#GRAND_TOTAL})]

Code source

Affichage de la flèche gauche pour la fonction "précédente"

Code d’appel

- [(#PAGINATION{gallery_precedent})]

Code source

Affichage de la flèche droite pour la fonction "suivante"

Code d’appel

- [(#PAGINATION{gallery_suivant})]

Code source
Zip - 40 ko
Gallery pour SPIP 1.9.X
Version 1.3 encore en phase de test

Notes

[1] Cf. l’article Mini galerie avec les modéles.

[2] Cf. l’article Galerie photos en SPIP.

[3] Cf. l’article Mes cartes de vœux / Bonne année 2006.

[4] Cf. l’article Zoum le martien.

[5] Cf. "Configuration/Fonctions avancées" dans la partie privée de votre site.


Dernière mise à jour du site : 4 août 2013 | Suivre la vie du site RSS 2.0 | Plan du site | SPIP | squelette | Habillage : Rouge sang | © 2006-2017 – Xébiaut