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:
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="https://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