Lightbox with PhotoSwipe with a single image
Uncategorized
Lightbox with PhotoSwipe with NextGEN Gallery
This gallery was created using the NextGEN Gallery plugin:
The next gallery is a Gutenberg gallery block:
This is a place in Augsburg, the river Lech in summer. 
This is a place in Augsburg called Hochablass. 
This is a place in Augsburg.
Timed Content client side “show”
Here an additional text will be visible after 10 seconds:
The shortcode used for this:[timed-content-client show="0:10"]Here we are![/timed-content-client]
Images with tabindex
In some cases images may not appear in the order in which they are in the HTML source, for example for custom galleries. In this case you can use the tabindex attribute in the image links to tell the browser which image comes first, which is second and so on. If this attribute is present, Lightbox with PhotoSwipe will also sort the images in the lightbox based on the numerical values of that attribute.
Image 3 (tabindex 10):
Image 1 (tabindex 1):
Image 2 (tabindex 2):
Lightbox with PhotoSwipe, captions with HTML
These images contain captions with HTML:
Timed Content showing part of the page after 15 seconds
On this page there is a DIV element which hides part of the page. After 15 seconds this DIV element will disappear to make the page visible.
This DIV will disappear after 15 seconds
The HTML code for this example (if you use Gutenberg, you need to switch to HTML editing):
[timed-content-client hide="0:15"]
<div style="position:absolute;left:0;top:0; z-index:1000;width:100%;height:50%;background:#000;color:#ff0;padding:2em;text-align:center;font-size:2em;box-sizing:border-box;">This DIV will disappear after 15 seconds</div>
[/timed-content-client]
Gutenberg gallery block with single caption for multiple images
The following gallery has a single common caption for multiple images. This will be used as caption for every image in the lightbox if there is no other caption for the image itself.
Timed Content Multiline
This section contains multiple lines of content – “Line 1” to “Line 5”. Line 2 and 3 are hidden due to the Timed Content rule which says “show only until end of 2019”. But the others are visible since they have the rule “show starting at end of 2019”:
Line 1
Line 4
Line 5
The shortcodes used for the example above:
[timed-content-server show="2019-12-31 00:00 Europe/Berlin"]Line 1
[/timed-content-server][timed-content-server hide="2019-12-31 00:00 Europe/Berlin"]Line 2
[/timed-content-server][timed-content-server hide="2019-12-31 00:00 Europe/Berlin"]Line 3
[/timed-content-server][timed-content-server show="2019-12-31 00:00 Europe/Berlin"]Line 4
[/timed-content-server][timed-content-server show="2019-12-31 00:00 Europe/Berlin"]Line 5
[/timed-content-server]
Lightbox with PhotoSwipe and Elementor
This post demonstrates the compatibility with Elementor.
Please note: Elementor provides its own lightbox which has to be disabled when you want to use Lightbox with PhotoSwipe.
This is a “Text Editor” widget with a gallery:
Β
Two column widget with text on the left and an image on the right.