Wednesday, August 21, 2013

Lightbox plugin

How to implement a basic lightbox plugin, follow the below steps.

1. Import the 3 files by clicking on the links and save them in a forlder and make a note of the path.

2. Save the below images
   overlay.png (download the image shown below)


3. Now implement all the above resources into your HTML source as shown below.

<!DOCTYPE html>
<script type="text/javascript" src="c:/js/lightbox/js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="c:/js/lightbox/js/lightbox.js"></script>
<link rel="stylesheet" type="text/css" href="c:/js/lightbox/css/lightbox.css" media="screen" />
<a href="c:/js/lightbox/img/demopage/image-1.jpg" rel="lightbox" alt="lightbox image" title="You can add text here"> Image 1 </a> <br>
<a href="c:/js/lightbox/img/demopage/image-2.jpg" rel="lightbox" alt="lightbox image" title="You can add text here"> Image 2 </a>

4. section highlighted in red should be replaced by the path you have saved the files and images.
5. Also note that section highlighted in yellow is mandatory you have to add it.
6. View the page on the browser and click on the image links.

If you come across with any error message or unable to implement you can leave a comment below and we will get back to you shortly.


  1. Resources like the one you mentioned here will be very useful to me! I will post a link to this page on my blog. I am sure my visitors will find that very useful.
    Microsoft dynamics training

    1. Thanks... Its nice to know that you find my post useful, sure will come back with more interesting post like this.

  2. Fantastic article ! You havemade some very astute statements and I appreciate the the effort you have put into your writing. Its clear that you know what you are writing about. I am excited to read more of your sites content.

    Latest jobs

  3. I can see that you are are genuinely passionate about this! great information.
    thank you...!
    Hadoop training

  4. Great article..
    Web Design And Development