Lightbox Beschreibung

9. Januar 2021 - Lesezeit: 5 Minuten

Lightbox and gallery based on the lightbox script by Lokesh Dhakar.

Add a lightbox with the following steps.

1. Upload an image and insert it.

2. Add a link to the image with the attributes "data-lightbox" and "data-title":

<a href="" data-lightbox="" data-title=""><img src="[path to the image]"</a>

3. Copy the link of the image and add it as value of the attribute "href", add a unique name for the image as value to the attribute "data-lightbox" and some text as value to the attribute "data-title", if you want to show a caption:

<a href="[path to the image]/image-1.jpg" data-lightbox="image-1"><img src="[path to the image]/image-1.jpg"></a>

Examples:

<a href="https://mydomain.com/bl-content/uploads/pages/6face7d58b0bcc241c7e881cecabb25d/image-1.jpg" data-lightbox="image-1" data-title="My caption"> <img src="https://mydomain.com/bl-content/uploads/pages/6face7d58b0bcc241c7e881cecabb25d/image-1.jpg"></a>

or

<a href="/bl-content/uploads/pages/6face7d58b0bcc241c7e881cecabb25d/image-1.jpg" data-lightbox="image-1" data-title="My caption"><img src="/bl-content/uploads/pages/6face7d58b0bcc241c7e881cecabb25d/image-1.jpg"></a>

Important: The link to the image must contain the path to the directory, where it is stored, either absolute (https://mydomain.com/bl-content/uploads/pages/[ID of the page]/) or relative (/bl-content/uploads/pages/[ID of the page]/).

Gallery

To show a group of images as gallery use the same value for the attribute "data-lightbox" for all images.

Examples:

<a href="https://mydomain.com/bl-content/uploads/pages/6face7d58b0bcc241c7e881cecabb25d/image-2.jpg" data-lightbox="gallery"><img src="https://mydomain.com/bl-content/uploads/pages/6face7d58b0bcc241c7e881cecabb25d/image-2.jpg"></a>

<a href="https://mydomain.com/bl-content/uploads/pages/6face7d58b0bcc241c7e881cecabb25d/image-3.jpg" data-lightbox="gallery"><img src="https://mydomain.com/bl-content/uploads/pages/6face7d58b0bcc241c7e881cecabb25d/image-3.jpg"></a>

<a href="https://mydomain.com/bl-content/uploads/pages/6face7d58b0bcc241c7e881cecabb25d/image-4.jpg" data-lightbox="gallery"><img src="https://mydomain.com/bl-content/uploads/pages/6face7d58b0bcc241c7e881cecabb25d/image-4.jpg"></a>

or

<a href="/bl-content/uploads/pages/6face7d58b0bcc241c7e881cecabb25d/image-2.jpg" data-lightbox="gallery"><img src="/bl-content/uploads/pages/6face7d58b0bcc241c7e881cecabb25d/image-2.jpg"></a>

<a href="/bl-content/uploads/pages/6face7d58b0bcc241c7e881cecabb25d/image-3.jpg" data-lightbox="gallery"><img src="/bl-content/uploads/pages/6face7d58b0bcc241c7e881cecabb25d/image-3.jpg"></a>

<a href="/bl-content/uploads/pages/6face7d58b0bcc241c7e881cecabb25d/image-4.jpg" data-lightbox="gallery"><img src="/bl-content/uploads/pages/6face7d58b0bcc241c7e881cecabb25d/image-4.jpg"></a>

Important: The link to the image must contain the path to the directory, where it is stored, either absolute (https://mydomain.com/bl-content/uploads/pages/[ID of the page]/) or relative (/bl-content/uploads/pages/[ID of the page]/).

Website

Website of the script with more information:

http://lokeshdhakar.com/projects/lightbox2/