swisshelico.ch
Benbulben plongeant dans la mer
La vallée de Glencar
Stonehedge

Album SimpleLightbox

RobotAlbum C'est grand ! Une image d'espace glagla

Liberté guidant le peupleAlbum2 C'est grand ! Une image d'espace glagla

ChâteauAlbum3 C'est grand ! Une image d'espace glagla

LégendeTitre album cliquable Légende Légende Légende Légende Légende Légende Légende Légende Légende Légende Légende Légende Légende Légende Légende Légende Légende Légende Légende Légende Légende

Dernier album crée automatiquement avec le script simplelightbox_gencode_album.php :

l'image de la vignette étant beaucoup trop grande sa taille a été modifiée en faisant clic droit sur l'image puis Image dans le menu, et au niveau des Dimension indiquer une largeur, ici 250, en cochant Conserver les dimensions, puis valider en cliquant sur Ok.

Explications

SimpleLightbox est intégré à ZwiiCMS et permet d'afficher des images dans une lightbox : par défaut chaque image doit être affichée dans la page.

On peut créer un album mais toutes les images seront affichées, au minimum en vignettes.

De plus on est restreint à un seul album.

Il s'agit ici d'expliquer comment créer un album en n'affichant qu'une seule vignette et de créer dans une même page autant d'albums que nécessaire.

Pour créer un album il faut ajouter une image dans la page : dans l'éditeur de TinyMCE cliquer droit à l'endroit où l'on veut insérer l'image puis dans le menu contextuel choisir Image et la fenêtre suivante s'affiche

ajouter_image.png.8595b443ec953888494935601d1f4175.png

Le seul champ obligatoire est le champ source dans lequel le chemin de l'image sera indiqué après l'avoir choisi en cliquant sur l'icône Parcourir à droite du champ : valider par Ok.

Pour associer cette image à SimpleLightbox : dans l'éditeur de TinyMCE cliquer gauche sur l'image pour la sélectionner, puis cliquer droit sur l'image sélectionnée et choisir Lien dans le menu contextuel pour que la fenêtre suivante s'affiche

ajouter_lien_simplelightbox.png.b39cd7d16d3ba083c68ae8e748cfe57b.png

Dans le champ "Afficher dans" sélectionner "Diaporama d'images (SimpleLightbox)" et valider par Ok.

Répéter ces deux opérations pour chaque image que vous voulez visionnez dans SimpleLightbox.

Pour voir le code généré par ces opérations, dans la barre d'outils de TinyMCE clique sur <> (code source).

Le code d'un album ainsi créé est similaire à celui-ci :

<a href="/site/file/source/robot.gif" rel="gallery" ><img src="/site/file/source/robot.gif" /></a>
<a href="/site/file/source/diaporama_accueil/espace.jpg" rel="gallery"><img src="/site/file/source/diaporama_accueil/espace.jpg" /></a>
<a href="/site/file/source/diaporama_accueil/espace2.jpg" rel="gallery"><img src="/site/file/source/diaporama_accueil/espace2.jpg" /></a>
<a href="/site/file/source/diaporama_accueil/polenord2.jpg" rel="gallery"><img src="/site/file/source/diaporama_accueil/polenord2.jpg" /></a>


On a ainsi le fonctionnement classique de SimpleLightbox : chaque image affichée reliée à SimpleLightbox par le paramètre rel="gallery", s'affichera au clic dans la lightbox et l'on pourra passer d'une image à l'autre avec les flèches de déplacements.

Pour n'afficher dans la page que la première image, dans la balise img des autres images il suffit d'ajouter style="display: none;" : avec ce paramètre l'image ne s'affiche pas mais est bien dans la lightbox.

Pour afficher une légende à une image il faut ajouter également dans sa balise img alt="Légende"

Le code ci-dessus devient :

Robot
C'est grand !
Une image d'espace
glagla


De base SimpleLightbox permet d'avoir un seul album identifié en tant que gallery (rel="gallery") : pour ajouter un autre albums nommé gallery2 et un autre gallery3 il faudra mettre le code ci-dessous dans le Body de ZwiiCMS.


Pour cela :
- se connecter en tant qu'administrateur à votre site et :
# aller dans Configurer le site dans la partie Options avancées :
*copier le code ci-dessous dans le champ Insérer un script dans "Body" :


*Enregistrer.

Pour créer des albums supplémentaires il faudra ajouter à ce script autant de fois que d'albums voulus les deux lignes suivantes en modifiant le x de galleryx par vos n° d'albums :
$("a[rel='galleryx']").addClass("galleryx","");
var a = new SimpleLightbox('.galleryx',{closeText:"×",captionsData:'alt'});

Afin de générer automatiquement le code nécessaire pour un album constitué des images rassemblées dans un dossier j'ai adapter encore une fois le script de @sylvainlelievre en téléchargement ci-dessous.

1-placer ce script dans le dossier contenant les images de l'album à produire
2-exécuter le script (saisir son url complète dans un navigateur), si au moins une image est trouvée dans le dossier un fichier de code sera créé
3-copier/coller le contenu de ce fichier simplelightbox_gencode_album.htm dans une page zwii (en mode édition du code source, symbole tinymce : <>)
4-remplacer "légende" par votre propre légende pour chaque image, et "Titre album" par votre propre titre ou bien supprimer le si vous ne voulez pas de titre : valider en cliquant sur Ok ;
*Enregistrer.