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:
<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: Frank Perez | 
Add to favorites
16 Comments
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 – Part 1 | Tradecogroup,Google AdSense Optimized WordPress Theme Gallery
Saturday, August 6, 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…….
Build a jQuery Lightbox Effect – Best Tutorials | Templates, Scripts, CMS, Graphics, Fonts, Flash, E-Books, 3D, Tutorials, Wallpapers.
Saturday, September 10, 2011
[...] Tutorial Demo [...]
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!
우리카지노사이트
Sunday, October 31, 2021
https://www.ekffo150.com 우리카지노사이트
Join DevBlog.co is on Facebook!
Follow DevBlog.co on Digg!
Design Tutorials
- Create Retro Graphics in Photoshop October 12, 2010 Josh Coffman
- How to Design a Grunge Style Website September 25, 2010 Josh Coffman
Programming Tutorials
- POODLE Disable SSL V3 on Apache November 3, 2014 Frank Perez
- Logstash, Elasticsearch, and Kibana in an EC2/AWS Enviroment March 13, 2014 Gabriel Holder
- Parallels Plesk ProxyPass Enable November 18, 2013 Frank Perez
© Copyright 2010 DevBlog.co. All Rights Reserved. | Sitemap
Rodney
Wednesday, November 17, 2010
Thanks, Well explained and it works.