Create a custom Gallery using WidgetKit Lite

December 24, 2013|

This video in this series provides an overview of how to create a custom gallery using a plugin called “WidgetKit“. WidgetKit 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 instead of the WordPress Gallery. To see this custom gallery in action, you can check out the demo website here for Encounters: 

Custom Gallery

Code That we Need

We will have some work to do here to get ourselves ready to build our special custom gallery. What I will do here is post a couple snippets of code that we will be using, although editing to our own needs, primarily the paths to our images.

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=”group:mygroup1; 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="group:mygroup1;titlePosition:inside">
<img alt="Lightbox Image" src="http://path-to-thumbnail.jpg" /></a>

The other part of this gallery setup is that we need to use some inline columns. In the case of our demo site, I created a 4 column gallery, so we will need a 4 column inline setup like this:

<div class="row-fluid">
<div class="span3">
<p>Add your own content here.</p>
</div>
<div class="span3">
<p>Add your own content here.</p>
</div>
<div class="span3">
<p>Add your own content here.</p>
</div>
<div class="span3">
<p>Add your own content here.</p>
</div>
</div>

Covered in this video:

  • Introduction and installing the WidgetKit plugin.
  • Prepare your photos, both full size and a thumbnail for each
  • Setting up your gallery page.
  • Create your gallery of thumbnails
  • Add special effects to your thumbnails
  • Viewing your new gallery

Video Part 1

Video Part 2

Video Part 3

Categories: Setup Tutorials for Encounters

Leave a Reply