Aller au contenu
Support de Zwii
augras

Albums photos avec Lightbox lightGallery

Messages recommandés

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é par augras
  • Merci 1

Partager ce message


Lien à poster
Partager sur d’autres sites

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é par augras
  • J'aime 1
  • Merci 1

Partager ce message


Lien à poster
Partager sur d’autres sites
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

Partager ce message


Lien à poster
Partager sur d’autres sites

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.

Partager ce message


Lien à poster
Partager sur d’autres sites
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.

Partager ce message


Lien à poster
Partager sur d’autres sites

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é par augras

Partager ce message


Lien à poster
Partager sur d’autres sites
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é par augras

Partager ce message


Lien à poster
Partager sur d’autres sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Invité
Répondre à ce sujet…

×   Collé en tant que texte enrichi.   Coller en tant que texte brut à la place

  Seulement 75 émoticônes maximum sont autorisées.

×   Votre lien a été automatiquement intégré.   Afficher plutôt comme un lien

×   Votre contenu précédent a été rétabli.   Vider l’éditeur

×   Vous ne pouvez pas directement coller des images. Envoyez-les depuis votre ordinateur ou insérez-les depuis une URL.


  • Contenu similaire

    • Par Gilux
      Voir le fichier Galerie GPS
       
      Une autre galerie basée sur le module gallery de Zwiicms, cette Galerie GPS vous permet de présenter vos plus belles randonnées et de les partager sur votre site Internet, à l’aide de photos comportant les informations EXIF de géolocalisation enregistrées par votre APN ou votre téléphone portable.
       

       
      Sur le bas des pages internes se trouvent 2 boutons, le premier affiche une carte sur laquelle vos photos sont géo-localisées :
       

       
      Affichage de la carte OpenStreetMap, par défaut :
       

       
      Vous pouvez choisir d'autres cartes, comme la carte topographique :
       

       
      Ou la carte satellite :
       

       
      Toutes les cartes sont affichables en plein écran :
       

       
      Il est possible de modifier la couleur de la trace sur la carte de géolocalisation par dossier en y plaçant un fichier nommé track-color.txt qui contient le nom de la couleur en code décimal (rgb | rgba), ou en couleur nommée (red | blue | yellow...), voir les noms des couleurs pour le web :
      https://htmlcolorcodes.com/fr/noms-de-couleur/
      https://fr.wikipedia.org/wiki/Couleur_du_Web
      Un exemple du fichier track-color.txt est fourni avec l'archive, ainsi qu'un fichier informatif sur son utilisation :
       
       
       

       
      Les miniatures sont cliquables, les images s’ouvrent dans la lightbox affichant la carte :
       

       

       
      Si vous avez relevé la trace de votre parcours*, et enregistré celle-ci dans un fichier .gpx, placez ce fichier dans le même dossier que celui des photos de votre randonnée, la trace s’affichera alors sur la carte de géo localisation, et un second bouton deviendra disponible, vous permettant d’afficher une autre carte avec laquelle vous pourrez étudier votre trace GPX, de plus, un lien vous permettra de la proposer en téléchargement
       

       
      Il y a aussi plusieurs cartes disponibles, et vous pouvez les afficher en plein écran :
       

       

       

       
      Installation de la Galerie GPS sur votre site ZwiiCMS :
      Décompressez l’archive galerie-gps.zip, elle contient un dossier module contenant un sous-dossier GalerieGPS, puis envoyez par FTP le dossier module à la racine de votre site sous ZwiiCMS
       
      Je vous souhaite de faire plein de belles randonnées 😉
       
      *Il existe de nombreuses applications GPS de randonnée téléchargeables pour votre téléphone portable
      Contributeur Gilux Soumis 02/05/2020 Catégorie Galeries  
    • Par Gilux
      Une autre galerie basée sur le module gallery de Zwiicms, cette Galerie GPS vous permet de présenter vos plus belles randonnées et de les partager sur votre site Internet, à l’aide de photos comportant les informations EXIF de géolocalisation enregistrées par votre APN ou votre téléphone portable.
       

       
      Sur le bas des pages internes se trouvent 2 boutons, le premier affiche une carte sur laquelle vos photos sont géo-localisées :
       

       
      Affichage de la carte OpenStreetMap, par défaut :
       

       
      Vous pouvez choisir d'autres cartes, comme la carte topographique :
       

       
      Ou la carte satellite :
       

       
      Toutes les cartes sont affichables en plein écran :
       

       
      Il est possible de modifier la couleur de la trace sur la carte de géolocalisation par dossier en y plaçant un fichier nommé track-color.txt qui contient le nom de la couleur en code décimal (rgb | rgba), ou en couleur nommée (red | blue | yellow...), voir les noms des couleurs pour le web :
      https://htmlcolorcodes.com/fr/noms-de-couleur/
      https://fr.wikipedia.org/wiki/Couleur_du_Web
      Un exemple du fichier track-color.txt est fourni avec l'archive, ainsi qu'un fichier informatif sur son utilisation :
       
       
       

       
      Les miniatures sont cliquables, les images s’ouvrent dans la lightbox affichant la carte :
       

       

       
      Si vous avez relevé la trace de votre parcours*, et enregistré celle-ci dans un fichier .gpx, placez ce fichier dans le même dossier que celui des photos de votre randonnée, la trace s’affichera alors sur la carte de géo localisation, et un second bouton deviendra disponible, vous permettant d’afficher une autre carte avec laquelle vous pourrez étudier votre trace GPX, de plus, un lien vous permettra de la proposer en téléchargement
       

       
      Il y a aussi plusieurs cartes disponibles, et vous pouvez les afficher en plein écran :
       

       

       

       
      Installation de la Galerie GPS sur votre site ZwiiCMS :
      Décompressez l’archive galerie-gps.zip, elle contient un dossier module contenant un sous-dossier GalerieGPS, puis envoyez par FTP le dossier module à la racine de votre site sous ZwiiCMS
       
      Je vous souhaite de faire plein de belles randonnées 😉
       
      *Il existe de nombreuses applications GPS de randonnée téléchargeables pour votre téléphone portable
    • Par Fred
      Ce tutoriel illustre les possibilités offertes par Lity le gestionnaire de Ligtbox installé par défaut dans ZwiiCMS.
       
      Tuto lightbox.pdf
       

×
×
  • Créer...