Aller au contenu
Support de Zwii

Rechercher dans la communauté

Affichage des résultats pour les étiquettes 'lightbox'.



Plus d’options de recherche

  • Rechercher par étiquettes

    Saisir les étiquettes en les séparant par une virgule.
  • Rechercher par auteur

Type du contenu


Forums

  • Support de Zwii
    • Informations et nouveautés
    • Ateliers de développement
    • Un bug découvert ?
    • Questions sur l'installation et l'utilisation
    • Trucs et astuces
    • Support des téléchargements
  • Communauté
    • Votre site

Catégories

  • Modules
    • Modules officiels
    • Galeries
  • Modifications et astuces
  • Les thèmes
    • Thèmes du site
    • Thèmes de l'adiministration
  • Tutoriels

Rechercher les résultats dans…

Rechercher les résultats qui contiennent…


Date de création

  • Début

    Fin


Dernière mise à jour

  • Début

    Fin


Filtrer par nombre de…

Inscription

  • Début

    Fin


Groupe


À propos de moi


Site internet

2 résultats trouvés

  1. 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). Les possibilités d'options son innombrables et 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 PS : pour la personne qui a télécharger le zip initial il y a une correction dans le custom.css dans ce nouveau fichier et l'ensemble des fichiers options a été ajouté. lightgallery.zip
  2. Version 1.0.0

    196 téléchargements

    Ce tutoriel illustre les possibilités offertes par Lity le gestionnaire de Ligtbox installé par défaut dans ZwiiCMS. Tuto lightbox.pdf
×
×
  • Créer...