I spent some time today updating Simple Lightbox to make, well, simpler.

The three main things I focused on were:

1. Adding a link to the settings page from the plugins page
2. Enabling/disabling lightbox functionality based on the type of page
3. Automatically activating lightbox functionality for image links on a page

Adding a link to the settings page from the plugin’s listing

While it’s just a link under the plugin’s name, adding a link to the plugin’s settings page greatly enhances usability because it keeps the user from having to search through the sidebar menu for the settings page.  Since Simple Lightbox’s settings have been added to the built-in Media (options-media.php) settings page, it’s even more important that a direct link to the plugin’s settings are included so that users can easily customize the plugin after they install and activate it.

I’ve seen other plugins add the settings link at the end of the list of links, but I think putting it in front of the other links is a better option because it is link most users will want to click for a plugin from the plugins page.

Enabling/disabling lightbox functionality based on the type of page

Next up was adding options to allow users to customize what types of pages the lightbox would be loaded on.  Depending on the type of site someone has, they may not have any image links certain pages (e.g. the home page or archive pages), so it would be a waste to load the lightbox on these pages.

I identified three groups of page types that users may or may not want to include Simple Lightbox on:

1. The home page
2. Archive pages – Any non-home page that lists posts (e.g. by category, tag, date, search results, etc.)
3. Single Pages/Posts

In my mind, the last group (single pages/posts) was the main use case for this plugin as a post’s full content is often only displayed on single pages, while excerpts are used for other page types (home page, archive pages, etc.).

Adding support for enabling/disabling the plugin on different page types was fairly straightforward and now users can choose when to load the client-side code.  I also cleaned up the code for building the admin settings UI so that only one function is needed to build the UI for all the setting fields instead of a separate function to build each field.  This extra step will make adding additional options to the settings menu incredibly quick and simple.  Simple for me, simple for you 🙂

Automatically activating lightbox functionality for image links on a page

The whole point of Simple Lightbox was for there to be an incredibly simple way to get a lightbox image viewer working on your site.  Version 1.0 greatly simplified the normal process by letting users customize the lightbox’s behavior from WordPress’ admin menu and keeping users from having to dip into Javascript.  However, though users were free from mucking about in Javascript, version 1.0 still required users to edit their template files and add rel="lightbox" to any image links that they wanted to be displayed in a lightbox image viewer.  I’m more than confident that most users could handle this, but the plugin just didn’t feel simple to me with this additional step.  In version 1.1, all links to images on the page are automatically activated to open in a lightbox image viewer.  This is done by adding one line of Javascript to the page:

$$('a[href$=".jpg"]:not([rel~="lightbox"])', 'a[href$=".jpeg"]:not([rel~="lightbox"])', 'a[href$=".gif"]:not([rel~="lightbox"])', 'a[href$=".png"]:not([rel~="lightbox"])').each(function(el){var rel=(el.rel.length > 0) ? el.rel + ' ' : ''; el.rel=rel + 'lightbox';});

This code is run once the page is loaded and adds the necessary rel="lightbox" attribute to all links on the page that point to image files (e.g. jpg/jpeg, gif, and png files).  I’ve also added an option to the settings page to let users disable this automation if they want the plugin to keep its dirty hands off their pretty links.

All in all, I think these additional features make Simple Lightbox truly simple.  Check out Simple Lightbox now and let me know if I need to add anything to make it even simpler 🙂