Launching a slideshow from a single link using Simple Lightbox is a common request. While an official solution is in the works, here is a technique that’s simple enough for anyone to add single-link slideshows to a post right now.

Here is what we’ll be creating: Launch Slideshow

Single link/multiple images– simple. Just follow the steps below.

Enable Slideshows

The first thing we need to do is enable slideshows in Simple Lightbox (SLB). Go to SLB’s settings and enable Group Items in the Grouping section.

You can enable or disable the other options in this section as well, but Group Items must be enabled.

Add Links to the Post

SLB’s core functionality is enabling links to images in a WordPress post to be displayed in a lightbox. Therefore, we need to add image links to our post.

You can add image links to the post using whatever method you are most comfortable with such as WordPress’ Media Library or the post editor.

Hide Links

We now have image links added to our post, so the next step is to hide the extra links from being displayed.

While in the post editor, switch to the text editor to view your post in glorious HTML and find the links you just added.

For example:

<a href="image_1.png">Slide 1</a>
<a href="image_2.png">Slide 2</a>
<a href="image_3.png">Slide 3</a>
<a href="image_4.png">Slide 4</a>
<a href="image_5.png">Slide 5</a>

We want to hide all but the first link, so wrap the extra links in a <div> tag:

<a href="image_1.png" title="Slide 1">Slide 1</a>
<div>
    <a href="image_2.png" title="Slide 2">Slide 2</a>
    <a href="image_3.png" title="Slide 3">Slide 3</a>
    <a href="image_4.png" title="Slide 4">Slide 4</a>
    <a href="image_5.png" title="Slide 5">Slide 5</a>
</div>

Finally, we want to hide the <div> tag from view:

<a href="image_1.png" title="Slide 1">Slide 1</a>
<div style="display: none">
    <a href="image_2.png" title="Slide 2">Slide 2</a>
    <a href="image_3.png" title="Slide 3">Slide 3</a>
    <a href="image_4.png" title="Slide 4">Slide 4</a>
    <a href="image_5.png" title="Slide 5">Slide 5</a>
</div>

Set Up Slideshow Launch Link

We now have one visible link in the post, so we should update this link to let users know that clicking the link will launch the slideshow.

Edit the first image link from this:

<a href="image_1.png" title="Slide 1">Slide 1</a>

To this:

<a href="image_1.png" title="Slide 1">Launch Slideshow</a>

Now we have an appropriate link for launching our slideshow. Of course, you can set the link’s text to anything you want.

Launch the slideshow

Save and view the post. Clicking the single visible link in the post should now launch a slideshow that includes all of the images that you linked to in the post!

Didn’t I tell you it was simple?

Going Further: The Official Solution

Simple Lightbox’s upcoming official solution makes it even easier to launch slideshows from a single link and adds awesome features such as multiple slideshows in a post. Sign up for free updates to be notified when it is available!