When building your own WordPress theme, there are a number of items to consider. One such page element is a dynamic image gallery, either using a lightbox or some type of sliding panel. Both of these user interfaces mesh nicely into the content of an article. Since they can both work on typical websites it is nice to have the code ready for use in any other blog theme.
For this tutorial I want to focus on using the lightbox effect with a plugin called jQuery lightBox. This is very easy to setup and get customized on your own website. Granted there are a few awkward fixes within the CSS, but overall the plugin works perfectly. There are even some alternate parameters where you can specify properties like the animation speed or background opacity.
Live Demo – Download Source Code
Getting Started
The first step is to download a copy of the main source code from the plugin homepage. You can also find these files within my demo source code above. There is a custom CSS file which comes along to format the various lightbox elements. Otherwise the document heading is fairly clean of other extra dependencies.
<!doctype html><html lang="en-US"> <head> <meta charset="utf-8"> <meta http-equiv="Content-Type" content="text/html"> <title>Blog-Style Lightbox Gallery - Design Shack Demo</title> <meta name="author" content="Jake Rocheleau"> <link rel="shortcut icon" href="http://designshack.net/favicon.ico"> <link rel="icon" href="http://designshack.net/favicon.ico"> <link rel="stylesheet" type="text/css" media="all" href="css/styles.css"> <link rel="stylesheet" type="text/css" media="all" href="css/jquery.lightbox-0.5.css"> <script type="text/javascript" src="js/jquery-1.10.1.min.js"></script> <script type="text/javascript" src="js/jquery.lightbox-0.5.min.js"></script> </head>
For this example I downloaded a local copy of the most recent version of jQuery. This is the only requirement to get this lightBox plugin running smoothly. Another important point to note is the markup of HTML on the page. We need to format the image gallery using thumbnails which are linked to the higher-resolution image.
The syntax is pretty straightforward and I have copied over a sample below. This should go anywhere in your page body and you can theoretically use any elements for containing the thumbnails. I went with an unordered list because the schema does make sense in a list of random Dribbble shots.
<div id="thumbnails"> <ul class="clearfix"> <!-- source: http://dribbble.com/shots/1115721-Turntable --> <li><a href="images/photos/01-turntable-illustration-graphic.png" title="Turntable by Jens Kappelmann"><img src="images/photos/01-turntable-illustration-graphic-thumbnail.png" alt="turntable"></a></li> <!-- source: http://dribbble.com/shots/1115776-DIY-Robot-Kit --> <li><a href="images/photos/02-robot-diy-kit.png" title="DIY Robot by Jory Raphael"><img src="images/photos/02-robot-diy-kit-thumbnail.png" alt="DIY Robot Kit"></a></li> <!-- source: http://dribbble.com/shots/1115794-Todly --> <li><a href="images/photos/03-todly-green-monster.png" title="Todly by Scott Wetterschneider"><img src="images/photos/03-todly-green-monster-thumbnail.png" alt="Todly"></a></li>
The alt text attached onto each image will only display when the thumbnail hasn’t loaded yet. But the title element behaves as both a tooltip and as a caption for the image. This is a really neat feature if you like the idea of captioned lightbox galleries. And you can manually set the caption text to be different from the title using function parameters.
Customizing the CSS
Inside the file jquery.lightbox-0.5.css we can find a number of important selectors for the lightbox interface. You do not need to edit any of this CSS code for the plugin to work. But I think it is worth understanding what each of the IDs and classes will target on the page. This way you have the option of adding new CSS3 effects or resizing the icons as needed.
/** reset lightbox position **/ #lightbox-container-image-data-box {
-webkit-box-sizing:content-box;
-moz-box-sizing:content-box;
box-sizing:content-box;
}
/** page structure **/ #w {
display:block;
width:750px;
margin:0 auto;
padding-top:30px;
}
#content {
display:block;
width:100%;
background:#fff;
padding:25px 20px;
padding-bottom:35px;
-webkit-box-shadow:rgba(0,0,0,0.1) 0px 1px 2px 0px;
-moz-box-shadow:rgba(0,0,0,0.1) 0px 1px 2px 0px;
box-shadow:rgba(0,0,0,0.1) 0px 1px 2px 0px;
}
#thumbnails {
display:block;
margin-bottom:10px;
}
#thumbnails ul li {
float:left;
margin-right:26px;
margin-bottom: 12px;
}
My typical CSS code is included within the main document stylesheet. Notice at the very top I have setup another selector for the #lightbox-container-image-data-box element. This div actually holds the caption data for the image which performs a dropdown animation. I use border-box for all my page elements and this can screw up the caption where it will not display properly.
But a quick fix may be applied by simply targeting this container and resetting to content-box. Then it is much easier to force this lightbox element to behave as normal, but still keep the layout fitted using border-box margins and padding. Other than this quick-fix I did not run into any other problems with the plugin CSS.
How To Run lightBox()
The final segment we need to look into is calling this plugin with its JavaScript function. There is only one required selector which should target all of the elements using this lightbox technique. My example is attached onto all anchor links within the #thumbnails element. You could be even more specific and only target links with certain class names.
$ (function() { $ ('#thumbnails a').lightBox(); });
Notice that the function itself does not require any extra parameters. This is the absolute basic default behavior of the plugin. And since it is so easy to setup you could easily generate multiple separate galleries all running on the same page! If you have extra time look through the plugin extra settings to get an idea of what else is possible.
You may customize the button style, background opacity, the image caption text, and so much more. Below is an example snippet from the website which uses just a few of these parameters. Toy around and see what you can build.
$ (function() {
$ ('a[@rel*=lightbox]').lightBox({
overlayBgColor: '#FFF',
overlayOpacity: 0.6,
imageLoading: 'http://example.com/images/loading.gif',
imageBtnClose: 'http://example.com/images/close.gif',
imageBtnPrev: 'http://example.com/images/prev.gif',
imageBtnNext: 'http://example.com/images/next.gif',
containerResizeSpeed: 350,
txtImage: 'Imagem',
txtOf: 'de'
});
});
Live Demo – Download Source Code
Final Thoughts
I do hope this tutorial may be useful to some developers out there. I love to find image galleries in blog posts because it can be a fantastic source of inspiration. But it also requires a lot of hard work and effort. You need to have a plan right from the start on how you want to build a clean & balanced user interface. Feel free to download a copy of the source code and see if you can redesign this plugin to work into your own blog or website layout.