Simple Lightbox: Instant Slideshows & Flexible Captions

By Sol in Lab

I spent a little time today adding some new functionality to make Simple Lightbox even simpler to use.

Instant Slideshows

Creating a slideshow of images on a page or a post is dead simple now– you literally don’t have to do anything!  When the page is loaded, all image links that were not manually setup to be viewed in a lightbox (individually or as part of a group) will automatically be added to a new slideshow group.  When any of these images links are clicked, the lightbox viewer will be launched containing controls (previous/next image, etc.) to navigate through the images on the page without having to close the lightbox viewer.  I’ve also added an option in the admin settings so users can turn of this functionality if they so desire.

Slideshow controls

Flexible Captions

By default, the lightbox viewer uses the link’s title attribute as the caption for an image. While this worked without issue for the most part, there were 2 main problems:

  1. No fallback – If the link has no title attribute, then no caption is displayed
  2. Not WordPress compatible – When you insert an image into a post using WordPress’ post editor, the title and alternate text you set are added to the image, not the link, so captions would not be displayed for images inserted using WordPress’ post editor.

To make captions more compatible and resolve the above-mentioned issues, I’ve enabled the lightbox to retrieve a caption from multiple locations.  If a caption is not found in one location, the lightbox moves through the other locations until a caption is found.  These are the locations sorted by precedence:

  1. Link title text
  2. Linked Image title text
  3. Linked Image alt text
  4. Link URL

As you can see, as a final fallback, the image’s URL is used so that even if no other suitable caption is found, the visitor will still be provided with some information about the image.

Next up, admin settings for user interface customization (e.g. next/prev text, etc.).