How To Build a Grid-Style Image Gallery with jQuery Modal Popups




There are a number of free open source image gallery plugins you can build with jQuery. Each has their own unique features and reasons you may incorporate the design into your website. But I really like the simplicity of jQuery Lighter. The plugin focuses around smaller image thumbnails which provide a mini-lightbox once clicked.

I have built a small example demonstrating how easy it is to get this plugin up and working. I’ll be including some various images designed by Dribbble members which include both smaller versions and larger shots. Take a peek at my live demo to see what we are creating.

jquery lighter grid image gallery modal tutorial preview

Live DemoDownload Source Code

Getting Started

First we should download a copy of the jQuery Lighter plugin codes. This will include a small JS file along with some default CSS styles. The whole pack can be downloaded right from Github in a neat .zip file.

<!doctype html>
<html lang="en-US">
<head>
  <meta charset="utf-8">
  <meta http-equiv="Content-Type" content="text/html">
  <title>jQuery Lighter Image Gallery Demo</title>
  <meta name="author" content="Jake Rocheleau">
  <link rel="shortcut icon" href="http://spyrestudios.com/favicon.ico">
  <link rel="icon" href="http://spyrestudios.com/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.lighter.css">
  <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
  <script type="text/javascript" src="js/jquery.lighter.js"></script>
</head>

Notice I’ve also downloaded a local copy of jQuery to keep all the files together. This includes a copy of my own CSS file for redesigning the page layout.

The reason Lighter can be so simple to use is because of an easy setup process within the HTML code. Anyone who is baffled by scripting should not have a problem working with this library. Also you can certainly update the images to display in any HTML container as needed. The example codes from the main plugin website are bare-bones yet still work perfectly.

Inner Page Content

Let’s jump down into the page body and see how this HTML is structured. If you checked out the source code examples you will notice they merely require an include of the Lighter library, along with images contained by an anchor link. This link will be used to load the bigger image into a lightbox section of the page.

In my example I have put each image into a specific list item element. This provides a lot more flexibility within CSS and we can also position the thumbnails to degrade gracefully when JavaScript is disabled. But considering even mobile smartphone browsers are supporting JavaScript, it is just a legacy feature to handle a wider audience.

<ul class="imglist clearfix">
  <li><a href="images/01-fullview.png" data-lighter><img src="images/01-thumbnail.png"></a></li>
  <li><a href="images/02-fullview.png" data-lighter><img src="images/02-thumbnail.png"></a></li>
  <li><a href="images/03-fullview.png" data-lighter><img src="images/03-thumbnail.png"></a></li>
  <li><a href="images/04-fullview.png" data-lighter><img src="images/04-thumbnail.png"></a></li>
  <li><a href="images/05-fullview.png" data-lighter><img src="images/05-thumbnail.png"></a></li>
  <li><a href="images/06-fullview.png" data-lighter><img src="images/06-thumbnail.png"></a></li>
  <li><a href="images/07-fullview.png" data-lighter><img src="images/07-thumbnail.png"></a></li>
  <li><a href="images/08-fullview.png" data-lighter><img src="images/08-thumbnail.png"></a></li>
</ul>

I want to point out at this stage how we do not even need to write any custom jQuery. It’s truly a brilliant plugin made for the ease of developers who would rather keep scripting out of the equation. All we need is the custom library along with an HTML attribute data-lighter on the anchor link.

These links will be parsed whenever the user clicks and will display as a lightbox effect. Note that we do not even need to link onto a thumbnail image because the display is always going to follow the anchor link HREF value. If all you have so far is the HTML along with a copy of the files then you can probably get this working right away!

Custom CSS

Aside from the other information I also want to go over a bit of CSS within my demo. First inside the jquery.lighter.css file you will find a whole list of default setup styles. If you want to update any of these it would be better to customize them within your own stylesheet. But for smaller edits you may just comment out lines of code and change them to suit your particular website.

.lighter {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 4000;
  opacity: 1; }
  .lighter.fade {
    opacity: 0; }
    .lighter.fade .lighter-container {
      -webkit-transform: scale(0.5);
      -moz-transform: scale(0.5);
      -ms-transform: scale(0.5);
      -o-transform: scale(0.5);
      transform: scale(0.5); }
  .lighter img {
    width: 100%;
    height: 100%; }
  .lighter .lighter-overlay {
    background: rgba(0, 0, 0, 0.5);
    height: 100%;
    width: 100%; }
  .lighter .lighter-container {
    background: white;
    position: absolute;
    z-index: 4000;
    top: 50%;
    left: 50%;
    right: 50%;
    bottom: 50%;
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.5); }

Indentation makes it much easier to skim the file and locate exactly what you need. I would really like to think this jQuery Lighter library will be updated over time to include even more features. This is why it is commonplace to copy/paste CSS styles into another file which allows for external editing.

My own styles.css includes a number of custom page resets for dealing with the overall layout. I have included these in many projects so the typical properties are all here. At the top we have a Google webfont @import statement along with a custom background from Subtle Patterns.

The most important stuff can be found at the bottom of the file which specifies how to layout the image grid. I have each list item floated over to the left which sets a precedent for breaking extra images down onto a new line. It’s all designed to break even with an external clearfix class.

#w {
  display: block;
  width: 960px;
  margin: 0 auto;
  background: #fff;
  padding: 8px 15px;
  -webkit-border-radius: 4px;
  -webkit-box-shadow: 1px 2px 2px rgba(0,0,0,0.4);
  -moz-box-shadow: 1px 2px 2px rgba(0,0,0,0.4);
  box-shadow: 1px 2px 2px rgba(0,0,0,0.4);
}

ul.imglist { display: block; margin-bottom: 10px; }
ul.imglist li { display: block; float: left; margin-right: 11px; margin-bottom: 12px; }
ul.imglist li a img { display: block; }


ul.itmlist { list-style: disc; margin-bottom: 20px; }
ul.itmlist li { margin-left: 20px; font-size: 1.2em; font-weight: bold; margin-bottom: 6px; }

Again keep in mind that you may choose to organize these images differently. It is completely possible to link these onto text or even larger div sections of the page. The most important step is to add the data-lighter attribute onto any anchor links which should use this special lightbox. Super-easy configuration and it runs smooth in practically every modern web browser.

jquery lighter grid image gallery modal tutorial preview

Live DemoDownload Source Code

Closing

This plugin is not very well-known amongst developers because it is fairly new and still gaining an audience. I would recommend skimming the jQuery Lighter repository on Github which includes sample HTML along with the source files. There really isn’t much setup and it should not take long at all to get this working properly in your own website project(s).





About the author:

Jake is a creative designer, illustrator, and web developer. He frequently writes articles involving new-age design concepts and freelance management skills. You can find him in Google or follow his tweets @jakerocheleau

Comments:

Scroll back to the top