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.
Step3: Create a new website folder and paste css, images, js and photos folders from the extracted folder to website folder.
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.
<script type="text/javascript">
$(function () {
$('#gallery a').lightBox();
});
</script>
|
Step8: Your Lightbox is ready to use if you run your page you will see lightbox like this:
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.
<style type="text/css">
#gallery
{
background-color: #444;
padding: 10px;
width: 520px;
}
#gallery ul
{
list-style: none;
}
#gallery ul li
{
display: inline;
}
#gallery ul img
{
border: 5px solid #3e3e3e;
border-width: 5px 5px 20px;
}
#gallery ul a:hover img
{
border: 5px solid #fff;
border-width: 5px 5px 20px;
color: #fff;
}
#gallery ul a:hover
{
color: #fff;
}
</style>
|
Step10: Output:
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".