Add a jQuery Lightbox to your Website or Blog

A Lightbox is a jQuery thing that you can easily add to any website or webpage. It is used to display images as a jQuery popup on the same screen, while dimming the background and enlarging the image to its maximum size and giving the image a solid border to highlight it. Adding a jQuery Lightbox to your website is very easy! You can even add it to your WordPress blog or other blogs, and enhance your website to allow a better user interface!

Before I start with this tutorial, I assume that you have a webpage on which you would like to work. For this tutorial, I would be using a simple webpage that contains one heading, and several images. I will show you various ways to enable Lightbox on these images. Well, let’s get started with the tutorial so that we can finish quickly! 😉 You might want to use Notepad++ so that you enjoy this process. Notepad++ adds colour to your coding part, and makes it interesting and fun!

• Using Notepad++ for enhanced Programming Experience

Pre-Requisites for jQuery Lightbox on your Website

Before we begin with the actual implementation of the lightbox, I need you to keep the following things ready.

1. Download and extract the Lightbox and the jQuery library from here.
2. On your webpage, the structure of the images should be something similar to the image shown below. By something similar I mean that the image should have a link to the image itself.
   

Installing jQuery Lightbox on your Website

Now, assuming that you have the requirements ready, let us begin with the installation of the Lightbox on your website.

1. From the extracted files, copy the “img folder” and the “js folder” and paste it where your webpage is.
2. Now, from the css folder, copy the “lightbox.css” file and paste it where you pasted the above two folders. Your website root should look something like this.
   
3. Now, open the source for your webpage in your favorite editor. I am using Notepad++ for this.
4. We now have to load the JavaScript files for our lightbox to work. Loading process can take place either before the closing of the head tag or before the closing of the body tag. The difference it makes is just with the actual page loading time. Keeping it right before the closure of body tag, gives you better loading time. For this tutorial, I am putting it before the closing of the head tag. Add the following lines of code before the closing of the head tag on your webpage.

   <script src="js/jquery-1.10.2.min.js"></script>
   <script src="js/lightbox-2.6.min.js"></script>
   

5. Now, we load the styling for the lightbox, i.e. the lightbox.css file. This must be imported before the closing of the head tag. Add the following line of code to import it.

   <link href="lightbox.css" rel="stylesheet" />
   

6. Well, the loading part is complete and this is how your code should look till now.
   
7. Now, using the Lightbox can be in two types.
   • You can either create it for individual pictures and scrolling between images in lightbox is not possible.
   • You can make a gallery type of a page and allow the users to scroll through the images from the lightbox itself.
8. Whatever way you want to implement it, the basic way is same. Add the following attribute to all your a-tags for the images. “data-lightbox=”name””. If you want the images to be displayed in the 1st way, define a unique name for each of the link tags, but if you want it to be displayed like a gallery, keep the name same for each and every link. This is what a sample line of code would look like.

   <a href="images/1.jpg" data-lightbox="image"><img src="images/1.jpg" width="200px" height="200px"/></a>
   

9. Well, that’s it. You are done! You have successfully added lightbox to your webpage. This is your complete code for the page.
   

Tip:

If you want to display an image title in the lightbox when the user clicks it, add a title attribute to the link tag of the image. This is how a sample link tag would look then.

<a title="Beautiful Scene" href="images/1.jpg" data-lightbox="image"><img src="images/1.jpg" width="200px" height="200px"/></a>

I hope this tutorial helps you overcome a task. If you face any problem or have any doubt, feel free to use the comments section below or the contact page to contact me for help. Stay subscribed to Slash Coding’s updates via RSS Feeds, Facebook or Twitter. See you around! 😉