Lightbox widget: a great way to display your images (galery / popin)

[lexoyo]

Light boxes are a nice way to display your images. For example on this demo site

For this widget I chose the Lightbox 2 project because it is very light weight and free / open source

Install for your site

1. Download a zip of the latest release from the Github Releases page (I used v2.11.3)
2. In Silex open the file browser (cloud > file explorer) and go to your site's folder, then create a folder lightbox and 3 folders in it: lightbox/css, lightbox/js, lightbox/images
3. Open up the zip file and upload the files dist/js/lightbox.min.js and dist/css/lightbox.min.css to your site's folder as lightbox/js/lightbox.min.js and lightbox/css/lightbox.min.css
4. Also upload all images from dist/images/ to `lightbox/images/
5. In Silex open the HTML head editor ("< />" menu) and paste this code:

   <link href="./lightbox/css/lightbox.min.css" rel="stylesheet" />
   <script defer src="./lightbox/js/lightbox.min.js"></script>

   

Show images

1. In Silex, open the file browser, go to the root folder of your sites and upload an image named image1.png
2. In your site, add an element
3. In the properties of this element, select "Link > edit" to create an "external" link with URL ./image1.png
4. In the properties of this element, in Element > HTML attributes, paste this code: data-lightbox="image-1" data-title="My caption" (you can change the text "My caption" and the image number in "image-1" when you add more images
5. preview your site (the "eye" icon) and click on the link, you should see the image1.png like this:

[BaguetteAgile]

Salut @lexoyo

Il y a des erreurs 404 pour les fichiers js et css lightbox. Pourtant j'ai bien suivi la structure des dossiers et sous dossiers.

Je comprend pas...

Failed to load resource: the server responded with a status of 404 ()

Voici un lien

https://cranky-chandrasekhar-dc53d3.netlify.app/

[lexoyo]

hello @BaguetteAgile visiblement ces fichiers manquent

GEThttps://cranky-chandrasekhar-dc53d3.netlify.app/lightbox/css/lightbox.min.css
[HTTP/2 404 Not Found 33ms]

GEThttps://cranky-chandrasekhar-dc53d3.netlify.app/lightbox/js/lightbox.min.js
[HTTP/2 404 Not Found 43ms]

GEThttps://cranky-chandrasekhar-dc53d3.netlify.app/lightbox/css/lightbox.min.css
[HTTP/2 404 Not Found 41ms]

GEThttps://cranky-chandrasekhar-dc53d3.netlify.app/lightbox/js/lightbox.min.js

il faut bien mettre ces fichiers là ou tu publies, c'est peut etre pas clair dans la doc du widget

[BaguetteAgile]

Voilà je viens donc de télécharger le dossier lightbox dans son intégralité dans mon dossier de publication comme ceci

maintenant plus d'erreur 404 mais toujours pas d'affichage lightbox ...

voici un lien:

https://elastic-ptolemy-eeb815.netlify.app/

[lexoyo]

Désolé pour le déla @BaguetteAgile et merci pour le test

J'ai l'impression que tu as mis le lien sur le texte lui meme, pas sur le bloc? Il faut utiliser le lien dans les propriétés, pas dans l'editeur de texte

Je vais mettre a jour la doc

[BaguetteAgile]

Oui, c'est cela @lexoyo , en faite vue que c'était un bloc texte j'ai mis le lien sur le texte est non le bloc ...

Donc maintenant c'est en ordre super !!

Petite astuce: pour avoir plusieurs images sans avoir plusieurs blocs textes visibles, il faut donc mettre un bloc principal et plusieurs autres blocs en supprimant le texte "New text bloc" et en mettant ces blocs en transparent.

Merci @lexoyo

[BaguetteAgile]

@lexoyo Astuce pour faire un album avec plusieurs images. Toutes les images du même album doivent absolument avoir le même nom dans le code suivant: Le data-lightbox=nom de l'album exemple:

data-lightbox="Nature" data-title="maison" data-lightbox="Nature" data-title="pont" data-lightbox="Nature" data-title="rivière" data-lightbox="Nature" data-title="arbre"

comme ceci les 4 images seront affiché en utilisant les flèches.