Adding an image overlay with a lightbox using Widgetkit

This video in this series provides an overview of how to create a nice overlay effect called Spotlight, as well a night lightbox to view a full sized image. Spotlight and the Lightbox is part of a plugin called “WidgetKit” which comes in two flavours, a Lite version (which is what we will use) and a full version which is a paid plugin. This widgetkit is of course optional, but because I am displaying it in the live demo, you may want to use this for any linked thumbnails you insert into a page or post. To see this in action, check out the custom gallery, and by mousing over any thumbnail and click on it. You can see it in action here: 

Spotlight & Lightbox

Code That we Need

To Add a Spotlight to a Thumbnail – We need this code to the <a href> like this: data-spotlight=”on”

To Add a Lightbox to our full sized Photo – We need this code added to the <a href> like this: data-lightbox=”titlePosition:inside”

So for an example, our linked thumbnail may look like this:

<a title="Your Title" href="http://link-to-full-image.jpg" data-spotlight="on" data-lightbox="titlePosition:inside">
<img alt=My Dog Cody" src="http://path-to-thumbnail.jpg" /></a>

Covered in these videos:

  • Introduction and installing the WidgetKit plugin.
  • Prepare your photos, both full size and a thumbnail for each
  • Setting up a single thumbnail image.
  • Add special effects to your thumbnails
  • Viewing your image