Log In | Register | December 15, 2018

Share
 

jQuery Programming - October 3, 2010

Creating a Custom jQuery LightBox Effect from Scratch

In this tutorial we will be going over an easy way of creating a lightweight LightBox effect that you can use any of your websites. This tutorial will use some effects to give your LightBox some style such as fading in and out. Lets start by setting up our document with some basic HTML markup.

Example:
Screen shot 2010 10 03 at 7.11.14 PM 300x194 Creating a Custom jQuery LightBox Effect from Scratch

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>
<a href="large_image.jpg" rel="lrg"><img src="small_image.jpg" /></a>
</body>
</html>

In the above code, all we did was include the jQuery api from the Google code base. Also in the body of our HTML we added an image with a link. The link we added the rel attribute with the value of lrg. Also we pointed the href attribute to our larger image witch we want to load within our LightBox when the image is clicked.

Now lets start by adding our document load script which will allow us to run our LightBox script.

$(function(){});

Now that we have our document setup and ready we need to create our function that will give us our LightBox. Let me show you the entire script that will make it work and then explain each portion.

$('a[rel=lrg]').click(function(e){
e.preventDefault();
var posTop = $(window).scrollTop() + 25;
var lrg_img = $(this).attr('href');
$('body').append('<div id="fjp_overlay"></div>')
.append('<div id="fjp_lightbox"><img src="' + lrg_img + '" /><br /><a href="#" id="fjp_light_close">Close X</a></div>');
$('#fjp_lightbox').css('top', posTop + 'px');
$('#fjp_overlay').fadeTo(500, 0.75, function(){
$('#fjp_lightbox').fadeTo(250, 1);
});
$('#fjp_overlay, #fjp_lightbox, #fjp_light_close').click(function(e){
e.preventDefault();
$('#fjp_lightbox').fadeTo(100, 0, function(){
$(this).remove();
$('#fjp_overlay').fadeTo(250, 0, function(){
$(this).remove();
});
});
});
});

First we start by creating our click event. We will start that by using our jQuery selector and selecting our “a” tags which have the attribute rel=lrg. Within the click event we add our preventDefault method which will stop the link from doing what it would normally do. Then we need to create 2 variables 1 to store the positioning from the top of the page that the lightbox will load and the other to get the value from our href attribute.

After setting the variables, we need to create our elements and add them to our body of the page. One element will be for the black overlay while the other element will contain the enlarged image.

$('body').append('<div id="fjp_overlay"></div>')
.append('<div id="fjp_lightbox"><img src="' + lrg_img + '" /><br /><a href="#" id="fjp_light_close">Close X</a></div>');

Now that we’ve added our two div elements we need to apply our positioning and our fade effects.

$('#fjp_lightbox').css('top', posTop + 'px');
$('#fjp_overlay').fadeTo(500, 0.75, function(){
$('#fjp_lightbox').fadeTo(250, 1);
});

The first line from the code above, we applied the top positioning for the lightbox. The  second line fades the overlay div we created in to 75% opacity at a speed of 500 milliseconds. Then we use the call back function to fade in the lightbox image in after the overlay is already set.

Now that we have this part set, lets add our CSS styles for each of those div’s.

<style type="text/css">
#fjp_overlay {
position: absolute;
top: 0;
left: 0;
background-color: #000;
width: 100%;
height: 100%;
z-index: 998;
display: none;
}
#fjp_lightbox {
position: absolute;
top: 0;
left: 0;
z-index: 999;
width: 100%;
text-align: center;
display: none;
}
#fjp_lightbox a {
color: #fff;
}
#fjp_lightbox img {
border: 10px solid #e6e6e6;
}
</style>

The only parts that are really important to make this work from the above CSS is the position: absolute; applied to each style. Lets look at our the next portion of our script. We need a way to close our LightBox. We do this by adding another click function using the live method.

$('#fjp_overlay, #fjp_lightbox, #fjp_light_close').live('click', function(e){
e.preventDefault();
$('#fjp_lightbox').fadeTo(100, 0, function(){
$(this).remove();
$('#fjp_overlay').fadeTo(250, 0, function(){
$(this).remove();
});
});
});

What we did above is put a comma delimited list of selectors that we want to add the close event for our lightbox to. We also want to prevent the defaults on any of the selectors just in case they are pointing to another page or # sound for instance our close link. After disabling the default action of the clicked object we want to fade out the lightbox image section. After fading out the lightbox div #fjp_lightbox we want to remove it from our DOM and also fade out the black overlay div #fjp_overlay as well as remove it. This will remove both objects from the DOM which will remove the LightBox popup.

That should be it, now test it and the lightbox effect should load up for you. I have attached the files I used for this tutorial below. Let me know if you have any questions or issues.

Download Custom jQuery LightBox Effect Files

Post By: | FavoriteLoadingAdd to favorites

15 Comments

Rodney
Wednesday, November 17, 2010

Thanks, Well explained and it works.

CSSReX
Friday, November 19, 2010

Amazing Tutorial, I like it :)

devblog
Friday, November 19, 2010

nice jquery approach and much more shorter than the original code…i keep the source !

Luke
Friday, November 19, 2010

Hey Frank,

Excellent work this is a really good beginners guide to making a custom lightbox, precisely what I was looking for. One small modification I made was to set position fixed on the overlay as otherwise it didn’t cover the whole of a page with scroll bars. Not tested that in IE or anything though.

Other than that excellent work thanks!

vikram
Wednesday, May 4, 2011

it is good but i want button click event on large image when i clicked that button means it will go to database and pull up data

how can i put button click event on large image plz give me solutions

Mario Awad
Saturday, May 28, 2011

Great tutorial. I’m building my own very simple lightbox and this was very helpful. @Luke thank you using “fixed” instead of “absolute” solves the scrolling problem. Cheers.

Build a jQuery Lightbox Effect – Best Tutorials
Thursday, July 28, 2011

[...] Tutorial Demo [...]

Build a jQuery Lightbox Effect – Best Tutorials | WPhub.biz
Tuesday, August 23, 2011

[...] Tutorial Demo [...]

Wattan
Wednesday, August 31, 2011

Thanx buddy really this is good tutorial for lightbox implementation…….

7 Best Lightbox and CSS LightBox Tutorials – Design Freebies
Wednesday, April 18, 2012

[...] 7. Creating a Custom jQuery LightBox Effect from Scratch [...]

Michael M
Thursday, August 23, 2012

simply amazing!

Jay
Saturday, September 1, 2012

How would I make this one? http://i.imgur.com/2lSVx.jpg Is it even a custom? I REALLY need this for my site which is 100% images. The current lightbox I have I can’t add my adsense ad’s so I don’t use it instead users have to go to the sub page when they click the image, I REALLY don’t like it that way. Can someone please help me. I would also like to do something like this that I have on my old blog > http://i.imgur.com/93ori.png if the lightbox image above isn’t possible. Thank you.

JS
Tuesday, October 2, 2018

This design is wicked! You most certainly know how to keep a reader entertained.
Between your wit and your videos, I was almost moved to start my own blog (well,
almost…HaHa!) Fantastic job. I really loved what you had to say, and more than that, how you presented it.
Too cool!

Leave a Comment



Need Help? Ask a Question

Ask anything you want from how to questions to debug. We're here to help.

You Must Be Logged In To Post A Question.

Log In or Register