Post Reply 

JQuery Lightbox Effect

May 9, 2011, 15:35
Post: #1
JQuery Lightbox Effect
Check here to see the demo.

Click here: to watch the video tutorial.

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!

.zip  lightbox.zip (Size: 32.79 KB / Downloads: 85)

[Image: gimppimp_forum_sig_by_mikethedj4-d39msp7.png]
Visit this user's website Find all posts by this user
Quote this message in a reply
Post Reply 


Possibly Related Threads...
Thread: Author Replies: Views: Last Post
  How To Create a Metallic Text Effect In Gimp Maannuell 0 871 May 25, 2013 21:18
Last Post: Maannuell
  JQuery Hotkeys Tutorial mikethedj4 0 5,018 Jul 3, 2011 06:53
Last Post: mikethedj4
  JQuery Fade In/Out mikethedj4 0 2,289 May 9, 2011 15:33
Last Post: mikethedj4
  Image Magnification Effect mikethedj4 0 1,850 Apr 21, 2011 17:57
Last Post: mikethedj4
  Pure CSS Image Magnification Effect mikethedj4 0 3,009 Apr 19, 2011 22:16
Last Post: mikethedj4

Forum Jump:


GIMP ForumPortalArchiveContactTermsRSS