Adding a sleek gallery to your website using the Lightbox jQuery plugin

When it comes to displaying your images in a gallery, you have multiple options to show off your images. One common and widely used way to display images is jQuery Lightbox plugin. It displays clickable thumbnail versions of your images that pop up into a larger box where the user can click through all the larger versions of the pictures, or click on each image individually.

Having the Lightbox gallery on your page means that the page does not have to be reloaded every time the user wants to view a larger version of your photos. Thus, it keeps users on your page!

Create a new web site using a WebMatrix template

For this tutorial, we will be using a free tool from Microsoft called WebMatrix. WebMatrix allows you to create, customize and publish websites. It’s amazingly easy to use, and can be downloaded here. If you need help with downloading and installing WebMatrix, you can see step by step instructions in the Getting Started with WebMatrix article.

WebMatrix gives you a number of different ways that you can create a new web site. You can use an existing open source application such as WordPress, Joomla, DotNetNuke or Umbraco, or you can create a site yourself by either coding everything or by using a small, simple template. A great place to start is the Empty Site template for this example. This is a full-featured HTML5 site.

Open WebMatrix. On the Welcome Screen, choose "Site from Template."

Select the ‘Empty Site’, give the site a name and click OK.

Select the Files workspace. You’ll see the button to do this on the lower left hand side of the screen

Create a new folder called “images” by right clicking on your site folder. Place your images here.

Create a new file by clicking on the new tab in the menu ribbon.

Select a .cshtml file and give it a name.

A simple, empty HTML5 valid document is created.

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8" />
      <title></title>
   </head>
   <body>
   </body>
</html>

 

Get the Lightbox jQuery Plugin Files

Visit

Place these files in the root folder your site.

Adding Lightbox to our site

Now go back to WebMatrix and the empty site you created earlier.

Make sure our lightbox-example.cshtml file is open. We need to add references to the jquery.js, jquery.lightbox.js and jquery.lightbox.css files. Somewhere in the <head> tag add:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.lightbox.js"></script>
<link rel="stylesheet" href="jquery.lightbox.css" media="screen" />

Now we need to add our images to our page. Somewhere in the <body> add

<h1 id="example">Welcome to my Gallery!</h2>
<h3>Click on the image thumbnails to view larger versions</h3>
<div id="gallery">
    <ul>
        <li>
            <a href="images/image1.jpg" title="blue flower">
                <img src="images/thumb_image1.jpg" width="72" height="72" alt="" />
            </a>
        </li>
        <li>
            <a href="images/image2.jpg" title="red leaves">
                <img src="images/thumb_image2.jpg" width="72" height="72" alt="" />
            </a>
        </li>
        <li>
            <a href="images/image3.jpg" title="water droplets on leaves">
                <img src="images/thumb_image3.jpg" width="72" height="72" alt="" />
            </a>
        </li>
    </ul>
</div>

The <a> tag references the larger image. The title attribute of the <a> tag is the caption that will show up in the photo lightbox. The <img> tag inside the <a> tag references the thumbnail size of the same image. You can specify the height and width attributes to whatever size you desire.

The last thing we need to do is add a jQuery function that makes the Lightbox script work. In the <head> tag add, after the references to the CSS and JavaScript files, add the following

<script type="text/javascript">
   $(function() {
      $('#gallery a').lightBox();
   });
</script> 

Optional: You can add <style> tags to the <head> so our example looks like index.html (a file that we downloaded in the .zip file). To do this, add the following after our <script> tag in the <head> tag:

<style type="text/css">
   #gallery {
      background-color: #444;
      padding: 10px;
      width: 520px;
   }

   #gallery ul { list-style: none; }
   #gallery ul li { display: inline; }

   #gallery ul img {
      border: 5px solid #3e3e3e;
      border-width: 5px 5px 20px;
   }

   #gallery ul a:hover img {
      border: 5px solid #fff;
      border-width: 5px 5px 20px;
      color: #fff;
   }

   #gallery ul a:hover { color: #fff; }
</style>

This adds the style to the gallery that makes our example look just like the index.html file that we downloaded in the .zip file. The example will work without this style applied to it.

Run the file. Make sure the lightbox-example.cshtml file is selected in the file directory on the left.

Note: if you applied the optional style to the gallery, moving our mouse over any of the thumbnail images should cause the box around the image to turn white.

By clicking on an image, a popup box displays the original size of the photo with the caption that we added with the “title” attribute of the <a> tag.

The user can then click the close button, or by moving the mouse to the right and left of the image, can view the next or previous photos from the gallery.

The hardest part of adding the jQuery Lightbox plugin to your website is making sure the <a> and <img> tags are referencing the correct images. As you can see, we only added 3 lines of JavaScript to our header!

Not working? If your lightbox-.gif images are not located in the “images” folder, it will cause the Lightbox plug in to not work correctly. To fix this, open jquery.lightbox.js and correct the location paths (near the top of the file) to match where your .gif images are located. Like so:

// Configuration related to images
imageLoading: 'images/lightbox-ico-loading.gif',
imageBtnPrev: 'images/lightbox-btn-prev.gif', 
imageBtnNext: 'images/lightbox-btn-next.gif', 
imageBtnClose: 'images/lightbox-btn-close.gif', 
imageBlank: 'images/lightbox-blank.gif', 

Don't want to use the jQuery plugin? There is also a Lightbox JavaScript plugin. You can see it implemented in Adding a photo gallery to your website using Lightbox.

Additional Resources

Download WebMatrix http://www.microsoft.com/web/webmatrix/

Learn how to Download and Install WebMatrix http://www.microsoft.com/web/post/web-development-101-part-1-getting-started-with-webmatrix

Learn more http://www.microsoft.com/web/post/Web-Development-101-using-WebMatrix

Learn jQuery http://jquery.com/

Create a website with a WebMatrix site template http://www.microsoft.com/web/post/create-a-website-from-a-webmatrix-site-template

Publish your website http://www.microsoft.com/web/post/how-to-publish-a-web-application-using-webmatrix

Learn to download, edit and republish your website http://www.microsoft.com/web/post/download-edit-and-republish-your-website-with-webmatrix

You can discuss this article using the adjacent Facebook talkback.

For technical questions please visit our discussion forums, where we have a vibrant community of developers like you, as well as Microsoft engineers who are ready to answer your questions!