1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

JQuery Lightbox Effect

Discussion in 'Gimp Tips & Tutorials' started by mikethedj4, May 5, 2011.

  1. mikethedj4

    mikethedj4 Member

    Joined:
    Nov 13, 2010
    Messages:
    594
    Likes Received:
    1
    Trophy Points:
    16
    Gender:
    Male
    Occupation:
    Web UI/UX Designer, Enginner, and Personal Trainer
    Location:
    Rockford, IL
    Home Page:
    Check here to see the demo.

    [youtube]b7EuO-wSxVQ[/youtube]

    Hey guys today I'm going to show you guys how to create a lightbox effect in JQuery.

    The code below is our CSS for this lightbox effect we're going to create. It's pretty simple, the lightbox class is aligned directly in the center a nice gradient from top to bottom for the background, has a drop shadow, rounded corners, and the text is aligned 15px inside via the padding.

    The lightboxbg class fills our whole website with a background color of white with an opacity set to 30% making it opaque.

    Notice: All the divs has a display:none; property, cause we're going to call the divs to fade in, and fade out, and the thing is, it can't fade in if it's visible.

    Code:
    body {
        background:#2a2a2a;}
        
    div.lightbox {
    	position:absolute;
    	top:50%;
    	left:50%;
    	width:600px;
    	height:400px;
    	margin-top:-200px;
    	margin-left:-300px;
    	padding:15px;
    	background:linear-gradient(#e2e2e2, #b5b5b5);
    	background:-webkit-linear-gradient(#e2e2e2, #b5b5b5);
    	background:-moz-linear-gradient(100% 100% 90deg, #e2e2e2, #b5b5b5);
    	background:-o-linear-gradient(#e2e2e2, #b5b5b5);
    	box-shadow:4px 4px 8px #000;
    	-webkit-box-shadow:4px 4px 8px #000;
    	-moz-box-shadow:4px 4px 8px #000;
    	-o-box-shadow:4px 4px 8px #000;
    	-webkit-border-radius:25px;
    	-moz-border-radius:25px;
    	z-index:1001;
    	display:none;}
    	
    div.lightboxbg {
    	position:absolute;
    	top:0px;
    	left:0px;
    	width:100%;
    	height:100%;
    	background:#FFF;
    	opacity:0.3;
    	filter:alpha(opacity=30);
    	z-index:1000;
    	display:none;}
    Now the code below just embeds the divs, and for lightbox I already added some text just so you can test it out.

    I added a button with the class .lightboxopen so we'll be using that to open our lightbox, and when the lightbox's background is clicked the lightbox will fade out.

    Code:
    <html>
    <head>
    <title>JQuery Lightbox</title>
    <link rel="stylesheet" href="style.css" />
    <script type="text/javascript" src="js/jquery.js"></script>
    </head>
    <body>
    	<button class="lightboxopen">Open Lightbox</button>
    	<div class="lightboxbg"></div>
    	<div class="lightbox">
    		<p>Facilisis augue integer amet dignissim habitasse cum mattis nec! Sed magnis ridiculus scelerisque hac penatibus scelerisque quis mid pulvinar mattis sociis, pellentesque? Risus lundium purus risus sed dictumst, nisi dignissim magna proin eu dignissim porttitor habitasse. Mauris lorem pulvinar, non! Ridiculus dis, rhoncus habitasse augue mattis, magnis dictumst, et natoque parturient, integer phasellus enim! Lorem ultrices dapibus velit proin ultrices in tincidunt enim placerat et duis penatibus amet, eros augue? Tortor porta tristique penatibus tempor non augue adipiscing. Risus amet. Natoque rhoncus porta duis. Ultricies massa aenean sed! Mus mauris, in! Amet turpis tortor montes lacus cras augue in aliquet, magnis dis penatibus habitasse? Placerat, nascetur dis sed! Est dis, est mid in porta, ut rhoncus a vel nisi, magnis.</p>
    		
    		<p>Sed urna vut facilisis nec turpis magna. A nec, proin pellentesque? Aliquam ultricies urna! Scelerisque? Odio velit dolor, turpis? Auctor integer? Pulvinar a cum duis a mauris lacus? A purus scelerisque eros sociis parturient phasellus. In placerat. Tristique odio lectus ac pulvinar amet integer, et ultricies, montes. Augue dolor, et adipiscing? Quis vel montes ac, penatibus massa. Sed pulvinar. Adipiscing facilisis porta! Enim phasellus. Augue nunc ac! In a sociis lundium lacus urna, nisi etiam tristique amet mattis, amet et quis turpis phasellus, velit tristique pellentesque augue sit scelerisque ac mus! Ut tristique elementum dis montes vel aenean enim, mauris! Et, urna sed, parturient tincidunt magna nunc nunc, tortor, montes. Sociis, amet! Et tristique porta.</p>
    	</div>
    </body>
    </html>
    So lets begin with our JQuery!

    We need to state that when the .lightboxopen class (via the button) is clicked the .lightboxbg, and .lightbox divs will fade in, and we'll have them fade in at 1sec. making the milliseconds 1000.

    Code:
    $(document).ready(function() {
    		$('.lightboxopen').click(function() {
    			$('.lightboxbg, .lightbox').fadeIn(1000);
    		});
    	});
    Now the div has faded in, however we need to make it so it'll fade out, and we'll state that when the .lightboxbg class is clicked the .lightboxbg, and .lightbox classes will fadeout at 400ms.
    Code:
    	$(document).ready(function() {
    		$('.lightboxbg').click(function() {
    			$('.lightboxbg, .lightbox').fadeOut(400);
    		});
    	});
    You're now done!
     

    Attached Files:

Share This Page