Sometimes, when you upload files to WordPress, you get the title wrong. Or your image…
One of the trickiest things to pull off in web development is a fully responsive lightbox solution. There are a couple of plugins out there that can help you create galleries with built-in lightbox functionality, but if you’re looking for a standalone solution, WP Lightbox 2 is a great way to go.
What’s it Do?
WP Lightbox 2 adds lightbox functionality automatically to image files that are embedded in your WordPress posts and pages. It uses the Lightbox 2 jQuery plugin behind the scenes to do this for you, then interfaces with WordPress to bring the functionality to your site. The plugin can be switched on so that all posts that link to an image file will display a lightbox, or you can choose to selectively include lightbox functionality in your images through HTML markup. The plugin works for galleries and individual images, and includes a function for applying the lightbox to a single piece of content in template files. It also features responsive functionality, so that it will work on smaller screens.
How’s it Work?
After you install and activate the plugin, you will need to go and configure it. To do so, go to Settings -> WP Lightbox 2. At the top, you will see a few options to set. The first option is probably the most important, “Auto-lightbox image links”. If you check this box, then any image embedded in your post that links to itself will automatically be featured in a lightbox on the front-end. This is the easiest way to use the plugin, since everything works without any set-up.
The next option is whether or not to “Enable lightbox in comments”. I’d recommend leaving this off, but it is available to you. The next option is “Show download link”. When checked, a link to download your image file will be shown at the bottom of each lightbox, so that users can save your files. Similarly, the “Show image info on top” will display your caption at the top of the image lightbox if you check it. “
After you’ve set the plugin up, the lighbox should just start working if you chose to auto-lightbox your images. Whenever you add a new image to your page, use the “Add Media” button and the default WordPress media uploader, just like your normally would. Just ensure that the image’s “Link To” option is set to the URL of your image file. From there, WP Lightbox 2 will do it’s magic for you.
This also works for default WordPress galleries, which have become more impressive and easier to use in recent versions of WordPress. When you are setting up your Gallery, ensure that the “Link To” option is set to “Media File”. If you are using the gallery shortcode instead of the WYSIWYG, then the correct parameter is:
If you want a bit more control, there are a couple of other ways to use the plugin. If you uncheck the “Auto-lightbox” checkbox in Settings, you can always just add a rel attribute in your HTML markup. If you use “rel=”lightbox” on any image file in WordPress, then this will automatically appear in a lightbox. The full syntax looks like this:
<a href="images/image-1.jpg" rel="lightbox" title="my caption"><img src="src/of/image.jpg"></a>
You can use this in either the text section of your post editor or in theme files. Using “rel=lightbox[roadtrip]” in a series of images, one after another, will allow users to scroll through the images using left and right arrows in the lightboxes, like a gallery.
Alternatively, you can use some PHP to add lightbox functionality to an element. To use it, just filter your content through:
jqlb_apply_lightbox($your_content, "any ID");
Replacing $your_content with the full content you want to filter through. The plugin will automatically find the images within these and output a list of images with lightbox functionality enabled.
More details about how to use the plugin are included on the Settings page. The easiest way is to simply allow any linked files to automatically include a lightbox so that you have a fully responsive and easy to use lightbox plugin up and running.
Costs, Caveats, etc.