Create a List Gallery with Spotlight and Lightbox

In addition to the WordPress gallery that you can easily use, there are two problems that you may or may not notice, but when creating a gallery with the default shortcode method, you don’t get a nice overlay when you mouseover a thumbnail and you also do not get a nice lightbox. Although there is one awesome plugin called “Cleaner Gallery” that takes over the WP gallery and lets you apply a lightbox from a varied list, you still lose the ability of a mouseover as some people love.

Note: You can use the Spotlight and Lightbox feature for single images as well.

The list type gallery which this tutorial for Preference is about, gives you is something that looks like this…starting with the Spotlight feature of Widgetkit:

As for the lightbox, well this is what it looks like with one style of many possibilities:

This tutorial will cover the basics of creating a list type gallery, although you have to be careful when doing this because the WordPress editor does some strange things, but if you do this carefully, you can get a very nice gallery. To create a gallery with the Spotlight and Lightbox feature, you will need to install the Widgetkit plugin from Yootheme.com, which also includes the nice slider that the demo site uses.

Get Widgetkit Lite

Install the Widgetkit plugin if you have not already, but I also recommend you refer to the Widgetkit website page for documenation on how to use the different features of it and how to achieve different effects and styles for Widgetkit Lite.

Part 1 – Prepare Your Photos

I keep saying this in other tutorials, but when working with images and thumbnails, do your own by cropping and resizing and optimizing (recommended) before uploading to your Media Library. So if you have 8 photos and 8 thumbnails ready, upload them now.

Part 2 – The Gallery Container

This is the first part of creating a list gallery which establishes a responsive container with the <ul> and <li> for grouping our thumbnails. The class “thumbnails” helps to maintain a responsive website. We will start to replace the <li></li> with our thumbnails.

<ul class="thumbnails">
   <li></li>
</ul>

Part 3 – The Thumbnail and Link

This gives us one thumbnail that has a span width of 3 columns (remember this theme uses a 12-column grid layout) and links to the full version of our photo.

<li class="span3">
   <a class="gj-gallery" title="This gives us our lightbox caption" href="path-to-full-image">
      <img class="imageborder" alt="thumbnail description" src="path-to-thumbnail" />
   </a>
</li>

This gives us one thumbnail only, so we will need to duplicate this process for the number of thumbnails you want to have in your gallery. For example, if we want a 4 column gallery (hence the span3 class) and 2 rows, we will copy this 8 times and each time we paste it, just change the thumbnail and full image paths to the next photo you are adding; repeat the process for each one.

Part 4 – Adding the Spotlight Overlay

This is an easy part because you just have to add a little “data-spotlight” snippet of code like this to our link:

Part 5 – Adding the Lightbox

This is another easy part which also adds one more little “data-lightbox” snippet to our link:

What this does is load the lightbox when the thumbnail is clicked on, but it also adds a group of functions which connects all thumbnails as a gallery and also puts the caption title inside the image like the screenshot of the lightbox further up the page. The connection to make a gallery is done with this part:

group:mygroup1;

Where “mygroup1” is the name of the gallery. Of course you can name it anything you want, but this has to be used on the other thumbnail links as well.

StyledThemes