Albums photos avec Lightbox lightGallery

[augras 290]

Bonjour,

 

Suite à la demande d'un copain et de @schoune à propos de la possibilité de créer des albums à afficher dans une lightbox mais sans avoir  toutes les vignettes affichées systématiquement dans la page j'ai cherché... et trouvé lightGallery.

https://sachinchoolur.github.io/lightGallery/demos/

Ce n'est pas réellement du développement puisqu'il s'agit plus d'expliquer comment utiliser lightGallery dans Zwii.

Pour les pressés vous pouvez voir ce que ça donne à l'adresse suivante :

https://augras.eu/zwii91dev59/lightgallery

Chaque album a des paramètres légèrement différents.

 

Pour ceux qui veulent bien tester la marche à suivre avec explication de texte qui je l'espère n'est pas trop compliquée.

 

Installer lightGallery

 

- décompresser le fichier lightgallery.zip sur votre ordinateur et copier intégralement son contenu via ftp à la racine de votre site : vous aurez ainsi dans le dossier site un dossier include comprenant lui-même un dossier lightgallery (site/include/lightgallery/) avec à sa racine les fichiers body.php, code.php, custom.css, head.php, le fichier readme.txt que vous êtes en train de lire, le script lightgallery_gencode_album.php permettant de créer le code d'un album avec toutes les images d'un dossier, et les fichiers LICENSE.md et README.md fournis avec lightGallery ;

- se connecter en tant qu'administrateur à votre site et :
    # aller dans Configurer le site dans la partie Options avancées :
        *copier le contenu du fichier head.php dans le champ Insérer un script dans "Head" ;
        *copier le contenu du fichier body.php dans le champ Insérer un script dans "Body" ;
        *Enregistrer.
    # aller dans Personnaliser le thème puis </>Éditeur CSS :
        *copier le contenu du fichier custom.css dans l'éditeur ;
        *Enregistrer.
L'installation est terminée.

 

Utiliser lightGallery

 

C'est relativement simple... une fois compris le principe.
Pour aller à l'essentiel et avoir un résultat immédiat (sous réserve que votre site ait été installé avec les exemples de ZwiiCMS et possède donc les images des galeries exemples dans l'arborescence par défaut) :
- créer une nouvelle page ;
- modifier la page ;
- dans la barre d'outils de l'éditeur TinyMCE cliquer sur <> Code source ;
- effacer ce qu'il y a s'il y a quelque chose et copier le contenu du fichier code.php dans l'éditeur ;
- valider en cliquand sur le bouton OK de l'éditeur ;
- Enregistrer la page.

Vous devez maintenant avoir une page comprenant 3 albums.

Il suffit d'adapter le code que vous venez de coller dans l'éditeur TinyMCE avec vos propres contenus et options.

 

Fonctionnement

 

Initialiser un album

Un album est contenu dans des balises div et se créé en commençant par indiquer dans la div son "id" :
<div id="lightgallery"></div>
On met ce que l'on veut comme "id" : l'important étant que dans Insérer un script dans "Body" l'album soit initialisé avec le même nom.
Dans le Body nous avons initialisé 3 albums en les nommant lightgallery, lightgallery2, lightgallery3 : on peut en mettre autant que l'on veut.

Pour initialiser seulement un album avec l'id lightgallery seul le code suivant est nécessaire dans Body :
<script type="text/javascript">
    $(document).ready(function() {
        $("#lightgallery").lightGallery();
    });
</script>

Avec un 2ème album lightgallery2 il suffit d'ajouter $("#lightgallery2").lightGallery(); au script ci-dessus pour obtenir :
<script type="text/javascript">
    $(document).ready(function() {
        $("#lightgallery").lightGallery();
        $("#lightgallery2").lightGallery();
    });
</script>
Et ainsi de suite pour autant d'albums que nécessaires.

Tels quels nos albums ont tous les options par défaut.

Le grand intérêt de lightGallery est que l'on peut utiliser ses nombreuses options pour obtenir ce que l'on veut, mais également avoir des options différentes par album.

Les options

Les options s'intègrent entre les parenthèses après .lightgallery et sont entre des crochets : il y a une option par ligne, chaque ligne se terminant par une virgule sauf la dernière.
On a ainsi pour le troisime album :
$("#lightgallery3").lightGallery({
        showThumbByDefault: false,
        share:false
    });
Pour cet album :
- "showThumbByDefault: false," : le panel des vignettes est fermé par défaut, contrairement aux deux autres albums ;
- "share:false" : l'icône de partage n'est pas affichée, comme dans le deuxième album mais pas dans le premier (à noter que s'agissant de la dernière option il n'y a pas la virgule finale).

 

La rotation des images ainsi que l'effet miroir sont activés par défaut, pour les désactiver dans un album indiquer dans les options de l'album concerné :

          rotate:false,
          rotateLeft:false,
          rotateRight:false,
          flipHorizontal:false,
          flipVertical:false,

 

Les possibilités d'options son innombrables, il faut consulter la page suivante pour s'en rendre compte :
http://sachinchoolur.github.io/lightGallery/docs/api.html

Ajouter des images dans un album

Notre album :
<div id="lightgallery"></div>

Pour ne pas avoir une image affichée qui prennent tout l'écran on va limiter la taille d'affichage avec  style="width: 25%;", ce qui donne :
<div id="lightgallery" style="width: 25%;"></div>
Le 25% est à adapter en fonction de ce que vous voulez obtenir.

Entre ces balises div il faut ajouter pour la première image de l'album, :
<a href="chemin de l'image 1" data-sub-html="légende de l'image 1, formatage html accepté"> <img src="chemin de l'image 1" />texte du lien cliquable sous la vignette de l'album, pas obligatoire</a>

Puis pour chaque autre image :
<a href="chemin de l'image 2" data-sub-html="légende de l'image 2, formatage html accepté"> <img src="chemin de l'image 2" style="display: none;" /></a>
et ainsi de suite pour chaque image.

Dans la balise img est ajouté style="display: none;" : sans cela la vignette de chaque image s'affiche sur la page et est cliquable.
Et on ne met pas de "texte du lien cliquable sous la vignette de l'album, pas obligatoire" puisqu'il n'y a pas de vignette.

On obtient ainsi :
<div id="lightgallery" style="width: 25%;">
<a href="chemin de l'image 1" data-sub-html="légende de l'image 1, formatage html accepté">
<img src="chemin de l'image 1" />
texte du lien cliquable sous la vignette de l'album, pas obligatoire
</a>
<a href="chemin de l'image 2" data-sub-html="légende de l'image 2, formatage html accepté">
<img src="chemin de l'image 2" style="display: none;" />
</a>
</div>

Utiliser le script lightgallery_gencode_album.php

 

Ce script automatise la création d'un fichier avec le code d'un album lighgallery composé de toutes les images présentes dans un dossier :
- placer ce script dans le dossier contenant les images de l'album à produire ;
- 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éé ;
- copier/coller le contenu de ce fichier lightgallery_gencode_album.htm dans une page zwii (en mode édition du code source, symbole tinymce : <>) ;
- l'id de l'album ainsi créé est "newalbum" et il faudra le changer et initialiser cet album dans le script de lightgallery placé dans le body, comme indiqué ci-dessus dans le paragraphe Initialiser un album ;
- 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.
    
L'ordre de visionnage des images est alphabétique

 

Merci pour vos retours.

Philippe

 

 

 

 

 

lightgallery.zip

Modifié 21 décembre 2020 par augras

[augras 290]

Bonjour,

Afin de faciliter la tâche fastidieuse d'ajout des images lorsqu'il y en a plus de quelques unes je me suis permis d'adapter le code que @sylvainlelievre avait fait pour automatiser la génération du code pour swiper puis unitegallery : c'est très efficace. Merci encore à @sylvainlelievre : je me suis contenter de quelques copiés/collés pour adapter aux spécificités de lightGallery.
Utiliser le script lightgallery_gencode_album.php : il suffit de le placer dans un dossier contenant les images de l'album et d'exécuter le script dans son navigateur pour bénéficier du résultat (tout est expliqué au début du fichier).
La page d'exemple indiqué dans mon message ci-dessus comprend maintenant un album de plus généré en copiant simplement le code généré par ce script : j'ai juste changé le nom de l'id de l'album et initialisé cet album dans Body, comme indiqué dans le script.

 

Le script a été ajouté à l'archive lightgallery.zip ci-dessus.

Philippe

 

Modifié 3 mars 2020 par augras

[Gilux 177]

Le 02/03/2020 à 18:30, augras a dit :

j'ai cherché... et trouvé lightGallery

Très sympa cette galerie, légère, rapide, avec plein de fonctions, ça ferait un chouette module pour ZwiiCMS, dans l'attente, ton astuce permet à chacun de l'essayer

[augras 290]

Merci @gilux pour ton retour,

Effectivement c'est un petit couteau suisse : il manque seulement, je pense, la possibilité de pivoter l'image à gauche ou à droite... tout en écrivant je me dis que c'est peut-être inutile si lightGallery oriente directement l'image correctement ; je vais vérifier.

Elle utilise jquery qui est déjà présent dans zwii.

Pour ce qui est de la passer en module c'est au-dessus de mes capacités.

Il y a une question que je me pose et à laquelle je n'ai trouvé une solution qu'après plusieurs heures : si custum.css n'est pas modifié les flèches de déplacement sont centrées sur l'image sur une bande horizontale sombre qui coupe toute l'image. Ce n'est évidemment pas le fonctionnement normal. Je pense qu'il y a quelque chose dans zwii qui interfère mais je n'ai pas trouvé et cette modification est donc indispensable.

[augras 290]

Il y a 6 heures, augras a dit :

il manque seulement, je pense, la possibilité de pivoter l'image à gauche ou à droite... tout en écrivant je me dis que c'est peut-être inutile si lightGallery oriente directement l'image correctement ; je vais vérifier.

Non, il ne le fait pas tout seul : il manque une lame au couteau suisse, une petite lame.

[Fred 1 576]

Un module avec un template serait bien cool serait cool

[augras 290]

Je suis bien d'accord. Mais moi j'ai donné ce que je pouvais !

J'ai regardé comment était fait le module slider de @sylvainlelievre : apparemment il y a une base commune à tous les modules et dans le cas du slider le développement repose sur 4 fichiers qui sont config.php, edit.php, slider.php et index.php... quand je regarde les contenus je suis largué !

Il y a une différence entre bricoler 4 lignes de codes et faire ça : il faut trouver un volontaire qui sait développer.

Là je suis "à fond" mais congés terminés dimanche et les prochains sont pas pour tout de suite.

Modifié 6 mars 2020 par augras

[augras 290]

Le 05/03/2020 à 10:12, augras a dit :

il manque seulement, je pense, la possibilité de pivoter l'image à gauche ou à droite.

Et bien LightGallery se bonifie en vieillissant car il est maintenant possible de pivoter à gauche, à droite autant de fois que l'on veut, et même l'effet miroir horizontal et vertical a été ajouté : je ne trouve plus rien à lui "repprocher".

Pour les curieux le lien dans le premier message intègre les changements.

Je vais mettre à jour le zip pour que chacun puisse profiter de ces améliorations "simplement".

Le fichier en téléchargement a été mis à jour.

Modifié 21 décembre 2020 par augras