Use LightBox for beautiful Images on your web site.

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!

You’ll first see how to create a simple web site. You’ll then download the required files, and then you’ll add the Lightbox plugin to your website. If you have downloaded WebMatrix or have a site already, you can skip the first section!

Download and Install WebMatrix

WebMatrix can be downloaded for free at microsoft.com/Web/WebMatrix . If you already have installed WebMatrix you can skip the rest of this section.

On this site you’ll be able to download Microsoft Web Platform Installer. This free tool can be used to install numerous Microsoft applications. When you launch the installer, click the “add” button next to the Microsoft WebMatrix option.

Once WebMatrix is added, click the “install” button. You will be asked to accept the license agreement.

Once you agree to the terms, WebMatrix and any other dependencies needed will begin being installed. This may take up to a few minutes.

Once WebMatrix is finished installing you will receive a confirmation with the products that were installed.

WebMatrix will now be available in your Start menu.

Now that you've successfully installed WebMatrix, let's get started creating a new webpage with WebMatrix.

Create a website with WebMatrix

After WebMatrix is finished installing, open it. Click "Site from Template" on the WebMatrix welcome screen.

For this example we will use the Bakery template. This template is a full-featured HTML5 site that provides a basic ecommerce presence. This sounds like a perfect site to add our AddThis button to. Click the Bakery template and give your site a name.

Clicking ok will take you to your WebMatrix workspace. This contains information about your local host as well a provides resources on developing your site.

You’ll notice that WebMatrix allows you to move between different workspaces by selecting the buttons on the left hand side. At present the Site button is selected which gives you details on your web site, such as the URL of the site, and other tools that you can use such as monitoring your site requests. You can look into this workspaces as you work but for this article, we will be working with our Files workspace. To get to your Files workspace, click the "Files" tab on the lower left hand of WebMatrix.

Once in your Files workspace you can see all the files that are given to you with the Bakery template. Let's check out our site. Click the "Run" button on your menu ribbon.

Your Bakery site will be open in your default browser.

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. For now, let's get started by getting the required Lightbox files.

Get the Lightbox files and images.

Lightbox is a JavaScript Plugin that was originally developed by Lokesh Dhakar. His website http://www.huddletogether.com/projects/lightbox/ 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.

1. Visit http://www.huddletogether.com/projects/lightbox/ and download the required Lightbox files.

clip_image007

2. Place the Lightbox files in your root folder in the Files Workspace. This can be easily done by right clicking the files explorer and choosing "add existing file." All you will need to do is browse through and select the Lightbox files you downloaded in the step before.

clip_image008

3. The last thing we need to do is create thumbnail versions of our images. This is an important part of using the Lightbox program. The thumbnail size of your images will depend on how large you want the images to appear on your webpage. If you are using the bakery template, you do not need to do this. The bakery template already includes thumbnail size versions of the images!

Adding Lightbox to the bakery site

Now go back to WebMatrix. 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.

1. Within WebMatrix open the Files workspace, if it is not already open. This will allow you to view the files in your bakery application.

clip_image009

1. 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>, <body> and <footer>. WebMatrix ships with helpers that make site layout like this super easy. We’re going to add the Lightbox JavaScript and CSS file links to the header of the page, so somewhere below:

<head>

And above

</head>

Create a link to the Lightbox.css file and to the Lightbox.js file, like so:

<link href="@Href("~/Styles/lightbox.css")" rel="stylesheet" />

<script src="@Href("~/JS/lightbox.js")" type="text/javascript"></script>

Make sure that you are using the URL file paths that are relevant to the files locations in your bakery site. I decided to put my JavaScript file in a folder called "JS" and my CSS file in a folder called "Styles." so my URL paths reflect this.

2. Now, the only thing left is to add our images to our Home page. Open the Default.cshtml. This file loops through all of the products in the database, adding their image, name, description and price. This seems like the perfect place to add out Lightbox plugin.

Find the code on your Default.cshtml page:

<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>

3. 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 <img> tag that references the thumbnail image. Directly before the <img> tag, add:

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

And directly after the <img> tag, add:

</a>

So the code looks like:

<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>

4. 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 and the product’s description.

clip_image010

5. To add Lightbox to the order.cshtml page, we simply do the same thing! Open the Order.cshtml and add an <a> tag directly around the <img> tag so it looks like this:

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

6. Run Order.cshtml. Click on the product image.

clip_image011

7. Note: A common issue that causes 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:

// 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';

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");
    }

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

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!