Hello everyone!! today i will show you how you can make your own image lightbox  with Jquery (without any plugins) to display pictures. Lightbox are a very great tool to display images in a website on the same page, which allows users to see the image in a larger size and also to display some imformation about the Image so clicked.

So for this we require Jquery script. It is very simple to make a lightbox with jquery. So when a user clicks an image, we get the image source of the image so clicked and change the source of the image that is present in the lightbox. A div element that covers the whole page with a particular background  in which another div elements are present to show the information about the file.

So lets start with basic. Well these all are my images that are already there in the page.


<div id="images">
<div class="img" style="background:url(images/img-0.jpg);background-size:cover;" img-title="Title Of Image 0" img-src="images/img-0.jpg" img-desc="This is the description of image 0"></div>
<div class="img" style="background:url(images/img-1.jpg);background-size:cover;" img-title="Title Of Image 1" img-src="images/img-1.jpg" img-desc="This is the description of image 1"></div>
<div class="img" style="background:url(images/img-2.jpg);background-size:cover;" img-title="Title Of Image 2" img-src="images/img-2.jpg" img-desc="This is the description of image 2"></div>
<div class="img" style="background:url(images/img-3.jpg);background-size:cover;" img-title="Title Of Image 3" img-src="images/img-3.jpg" img-desc="This is the description of image 3"></div>
<div class="img" style="background:url(images/img-4.jpg);background-size:cover;" img-title="Title Of Image 4" img-src="images/img-4.jpg" img-desc="This is the description of image 4"></div>
<div class="img" style="background:url(images/img-5.jpg);background-size:cover;" img-title="Title Of Image 5" img-src="images/img-5.jpg" img-desc="This is the description of image 5"></div>

</div>

So in this I have a element #images which contains the all images. It contains div element with class “.img” and different attributes containing different information about it’s source, title, and description. So now here is my lightbox on the same page.


<div id="wrapper">
<div id="lightbox">
<div id="img-section"></div>
<div id="img-info"><table id="image-details">
<tr>
<td id="img-head">This is Head!</td>
</tr>
<tr>
<td id="img-description">This is image description</td>
</tr>
</table></div>
</div>
</div>

Here #wrapper is the element that covers the whole page, we will add a black transparent image in it.

So here is my stylings.


* {box-sizing: border-box;}
#wrapper {
position: absolute;
left: 0;
top: 0;
width:100%;
height: 100%;
display: none;
background: url(blacktransparent.png);
}
.img {
box-sizing: border-box;
width: 32.9%;
float: left;
height: 250px;
margin: 0.2%;
}
#lightbox
{
position: absolute;
left: 10%;
top: 10%;
width: 80%;
height: 80%;
background: black;
}
#img-section{
box-sizing: border-box;
width: 70%;
float: left;
height: 100%;
}
#img-info{
float: left;
width: 30%;
height: 100%;
background: #f5f5f5;
}
#image-details{
width: 100%;
}
#img-head {
color: #222222;
font-size: 24px;
padding: 20px;
border-bottom: 1px solid #e3dfd7;
}
#img-description {
color: #727272;
font-size: 20px;
padding: 10px 20px;
}

So here i set #wrapper to display none as we will show it only when the users click an image. So here is the script.


$(document).ready(function(){
$(".img").click(function(){
var src = $(this).attr('img-src');
var title = $(this).attr('img-title');
var desc = $(this).attr('img-desc');
$("#img-section").css({
'background':'url('+src+')','background-position':'center','background-repeat':'no-repeat','background-size':'contain'
});
$("#img-head").html(title);
$("#img-desc").html(desc);
$("#wrapper").fadeIn('fast');

});
$(window).on('keyup',function(e){
if(e.which == 27){
$("#wrapper").hide();
}
});
});

Here in this i attach an event handle ‘click’ to ‘.img’. So with

$(this).attr('attribute name');

i can access the attributes of any element so as i did here to get the src,title,and desc of the image so clicked. After the image is clicked, i set the variables and change the values in the lightbox.

We also want to hide this lighbox. so what i did is when the user presses ‘ESC’ key i.e ’27’ ,  we hide the lighbox(#wrapper).

So now you are ready with your own Image Lighbox!.

Download a Sample Project here.

Advertisements