Live DemoDownload 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.

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.

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.

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.

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.

Live DemoDownload 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.

For more related resources: