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):

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 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

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.