Add a sleek photo gallery to your e-Commerce website using the Lightbox JavaScript

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 Lightbox, a JavaScript plugin. It displays clickable thumbnail versions of your images that pop up into a larger box.

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. It keeps users on your page!

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.

Create a new web site using a WebMatrix template

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. You can see the options in the WebMatrix welcome screen.

image

A great place to start is the Bakery template for this example. This template is a full-featured HTML5 site that provides a basic ecommerce presence.

Select ‘Templates’ on the WebMatrix welcome screen

Select the Bakery template, give the site the name ‘My Bakery’, and press OK

image

WebMatrix will create a bakery site for you. Press the ‘Run’ button on the menu ribbon to see it in action.

image

You can take a look around the bakery site to see everything that WebMatrix has given you. In other articles on this site you’ll explore how to customize the site and see how to, for example, turn it into a bookstore, and how to use Paypal and Facebook on it. But for now, we’ll focus on adding a photo gallery, so let’s take a look at how to do that.

Using the Bakery template allows us to have a fully functioning products website with database already created. We simply have to add/change elements of the pages to make the site ours.

Get the Lightbox files and images

Lightbox is a Javascript Plugin that was originally developed by Lokesh Dhakar. His website www.huddletogether.com is a great resource to download the required plugin files and how to easily add the Lightbox script to any gallery.

In this section, you will see how to incorporate the Lightbox plugin into your bakery site.

Visit www.huddletogether.com and download the required Lightbox files.

image

Place the Lightbox files in your Files Workspace.

We now need to create thumbnail versions of our images. This is an important part of using the Lightbox plugin. Create thumbnail versions of all the images you wish to place on your page and add them to your files workspace. The thumbnail size will depend on how large you want to images to appear on your webpage. If you are using the bakery template, and wish to use these images, you do not need to make thumbnails. The bakery template already includes thumbnail size versions of the images!

Adding Lightbox to the bakery site

Now go back to WebMatrix and the bakery site you created earlier. One of the really nice things about WebMatrix is how it allows you to create site layout pages, which contain information that will appear on every page.

Within WebMatrix open the Files workspace. This will allow you to view the files in your bakery application. You’ll see the button to do this on the lower left hand side of the screen.

image

Select the _SiteLayout.cshtml page and open it. This page is the layout page for the whole site. You’ll see <div> tags for the <header>, and <footer>. WebMatrix ships with helpers that make site layout like this super easy. We’re going to add the lightbox JavaScript and CSS files to the header of the page.

Somewhere below <head> and above </head> create a link to the Lightbox.css file and to the Lightbox.js file. Add:

<link href="@Href("~/css/lightbox.css")" rel="stylesheet" />
<script src="@Href("~/js/jquery-1.7.2.min.js")" type="text/javascript"></script>
<script src="@Href("~/js/lightbox.js")" type="text/javascript"></script>

Make sure to use the URL file paths that are relevant to the files locations in your bakery site.

Now, the only thing left is to add our images to our Home page. Open the Default.cshtml. Notice our file loops through all of the products in the database, adding their image, name, description and price. We can add our Lightbox plugin here.

The code on your page looks like this:

<ul id="products">
    @foreach(var p in products){
        <li class="product">
            <div class="productInfo">
                <h3>@p.Name</h3>
                <img class="product-image" src="@Href("~/Images/Products/Thumbnails/"+ p.ImageName)" alt="Image of @p.Name" />
                <p class="description">@p.Description</p>                    
            </div>
            <div class="action">
                <p class="price">$@string.Format("{0:f}", p.Price)</p>
                <a class="order-button" href="@Href("~/order", p.Id)" title="Order @p.Name">Order Now</a>
            </div>
        </li>
    }
</ul>

One of the most confusing parts of the Lightbox plugin is correctly adding the images and thumbnail images. An important thing to remember here is the larger image is referenced in the <a> tag surrounding an &alt;img> tag that references the thumbnail image. Directly before the <img> tag, add

<a href="@Href("~/Images/Products/" + p.ImageName)" rel="lightbox" title="@p.Description">

And directly after the <img> tag, add

</a>

So your code now looks like this:

<ul id="products">
    @foreach(var p in products){
        <li class="product">
            <div class="productInfo">
                <h3>@p.Name</h3>
                <a href="@HrefAttribute("~/Images/Products/" + p.ImageName)" rel="lightbox" title="@p.Description">
                   <img class="product-image" src="@Href("~/Images/Products/Thumbnails/"+ p.ImageName)" alt="Image of @p.Name" />
                </a>
                <p class="description">@p.Description</p>                    
            </div>
            <div class="action">
                <p class="price">$@string.Format("{0:f}", p.Price)</p>
                <a class="order-button" href="@Href("~/order", p.Id)" title="Order @p.Name">Order Now</a>
            </div>
        </li>
    }
</ul>

Run Default.cshtml. The page should not look any different, but when a thumbnail image is clicked, a pop-up appears with the large image.

image

To add Lightbox to the order page, we simply do the same thing! Open the Order.cshtml file. Locate this code:

<legend>Place Your Order</legend>
<img class="product-image order-image" src="@Href("~/Images/Products/Thumbnails/" + product.ImageName)" alt="Image of @product.Name"/>

Add an <a> tag directly around the <img> tag like we did on our Default.cshtml page. Your code should now look like this:

<legend>Place Your Order</legend>
<a href="@Href("~/Images/Products/" + product.ImageName)" rel="lightbox" title="@product.Description">
    <img class="product-image order-image" src="@Href("~/Images/Products/Thumbnails/" + product.ImageName)" alt="Image of @product.Name"/>
</a>

Run Order.cshtml. Click on the product image.

image

Note: A common issue that caused Lightbox to not work properly, is the close.gif, loading.gif and overlay.png files not being in the location that are being referenced in the Lightbox.js and Lightbox.css files.

Open the Lightbox.js file and change the file locations to match your website's file path. For example, if my images were placed in a folder called images, them I would change the file location to the following:

// If you would like to use a custom loading image or close button reference them in the next two lines.
var loadingImage = 'images/loading.gif';        
var closeButton = 'images/close.gif';

Now we need to configure our CSS file. Similiar to our JavaScript file, open the Lightbox.css file and change the file location:

#overlay{ background-image: url(overlay.png); }

* html #overlay{
    background-color: #333;
    back\ground-color: transparent;
    background-image: url(blank.gif);
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="overlay.png", sizingMethod="scale");
    }

You can customize the Lightbox plugin even further by changing the font or font size in the Lightbox.css file.

Adding Lightbox to our e-Commerce site was that easy! Take a look at the other Lightbox articles to see other ways to implement the Lightbox plugin on your website.

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!