Jquery Lightbox integration step by step tutorial

In this step by step tutorial we will see how to integrate Jquery Lightbox into our website.For this tutorial I will use Jquery Lightbox created by "Leandro Vieira Pinho". This plugin is inspired and based on Lightbox created by "Lokesh Dhakar". Jquery Lightbox is very beautiful and powerful plug-in to create image galleries with image overlay effects.

 

Step1: Download Jquery Lightbox. To download go to http://avioli.github.io/jquery-lightbox/.

 

Step2: Extract the files from the ZIP/TAR folder. Now you will see these files in the folder.

jquery-lightbox-step-by-step-tutorial

Step3: Create a new website folder and paste css, images, js and photos folders from the extracted folder to website folder.

jquery-lightbox-step-by-step-tutorial

Step4: Create a new Index.html page in folder.

 

Step5: Now add reference to JQUERY and CSS files. Add these lines of code between <head></head> tags. 

Note: All these files are already there in css and js folders.

 

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

 

Step6: Add Image code and Lightbox code to your html page. Add these lines of code between <body></body> tags.

 

 <div id="gallery">
        <ul>
            <li><a href="photos/image1.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery').lightBox();">
                <img src="photos/thumb_image1.jpg" width="72" height="72" alt="" />
            </a></li>
            <li><a href="photos/image2.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery a').lightBox();">
                <img src="photos/thumb_image2.jpg" width="72" height="72" alt="" />
            </a></li>
            <li><a href="photos/image3.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery a').lightBox();">
                <img src="photos/thumb_image3.jpg" width="72" height="72" alt="" />
            </a></li>
            <li><a href="photos/image4.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery a').lightBox();">
                <img src="photos/thumb_image4.jpg" width="72" height="72" alt="" />
            </a></li>
            <li><a href="photos/image5.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery a').lightBox();">
                <img src="photos/thumb_image5.jpg" width="72" height="72" alt="" />
            </a></li>
        </ul>
    </div>

 

Step7: Last not least Initiate Jquery lightbox. Add these lines just above </body> tag.

 



 

Step8: Your Lightbox is ready to use if you run your page you will see lightbox like this:

jquery-lightbox-step-by-step-tutorial

You can clearly figure that it is not similar to the example shown on original Jquery Lightbox website to fix this issue we have to some CSS.


Step9:
Add these lines between <head></head> tags of your Index.html page.

 


 


 

 

Step10: Output:

jquery-lightbox-step-by-step-tutorial

Congratulations you have successfully implemented Jquery Lightbox in your website.

 

Disclaimer: I would like to thanks both "Lokesh Dhakar" and "Leandro Vieira Pinho"  for creating Lightbox. To use Jquery plugin created by "Leandro Vieira Pinho" is my personnel choice and I am not forcing you to use the same. You are free to choose any lightbox created by " Lokesh Dhakar" or by "Leandro Vieira Pinho".

 
We are nothing without our users ! You can help us offer even more high quality content. Please share our page !
Best quality Asp .Net Ajax Control Toolkit tutorials.
What if I want to show the output as shown in step 10 but calling images dynamically from the database. And make it slide right to left? Can you please give me an example. If you can give me the same example by using adrotator control. Thank You.I hope to get your reply sooner.
14-Jan-2014 From  Ashish Kumar
Hi Ashish thanks for your comment... For dynamic images ... you upload you r images in your website and their links to database(try google) then you can bind images using repeater control... I donot have any working solution right now but ... I'll provide you soon. THanks
15-Jan-2014 From  Anuj
thanks a lot. this code help me a lot.
1-Aug-2014 From  bidyut
What happens if it doesn't show the popup but instead opens the image in a new window?
10-Aug-2014 From  Hidayah
Hi Hidayah this means there is something wrong in your code.
13-Aug-2014 From  Anuj

Give your valuable comments.

Name
Email
Comment
5 + 2 =
 
About Us | Terms of Use | Privacy Policy | Disclaimer | Contact Us Copyright © 2012-2019 CodingFusion
75 Important SQL Server queries you should know