Example of lightbox.

Click the text or press ESC to go back

standupweb mootools homebrews

tested on IE Tester (IE7, IE8), Opera 10.51, Firefox 3.6.2, Safari for Windows 4.0.4

SwCustomLightbox

download

INTRODUCTION

Lightweight Mootools implementation of a lightbox with a gradient that can be applied and configured. The difference with swGradientLightbox is that there is no slideshow predefined here and it makes it easy to reuse for any kind of div you want to display in the middle of your lightbox

FEEDBACK: Comment on post or sign up and go to the forum section: click here

EXAMPLE

view an example

STEP BY STEP

1- insert the div you want to be displayed right after the body element of your page:

<div id='lightboxContent'>Example of lightbox.<br/><br/>Click the text or press ESC to go back</div>

2- add the class 'id' to the link (or div) you want to trigger the lightbox

ex: <a href='#' id='example'>May the lightbox open!</a>

3- CSS: Copy, paste and adapt:

#gradient-bg { position:absolute; }

#grad-bottom-left { position:absolute; background:#111; background:-webkit-gradient( linear, left bottom, right top, color-stop(0.25, rgb(65, 65, 65)), color-stop(0.4, rgb(0, 0, 0)) ); background:-moz-linear-gradient( left bottom, rgb(65, 65, 65) 25%, rgb(0, 0, 0) 40% ); filter: alpha(opacity = 70); opacity: 0.70; }

#grad-bottom-right { position:absolute; background:#111; background:-webkit-gradient( linear, right bottom, left top, color-stop(0.25, rgb(65, 65, 65)), color-stop(0.4, rgb(0, 0, 0)) ); background:-moz-linear-gradient( right bottom, rgb(65, 65, 65) 25%, rgb(0, 0, 0) 40% ); filter: alpha(opacity = 70); opacity: 0.70; }

#grad-top-left { position:absolute; background:#111; background:-webkit-gradient( linear, left top, right bottom, color-stop(0.25, rgb(65, 65, 65)), color-stop(0.4, rgb(0, 0, 0)) ); background:-moz-linear-gradient( left top, rgb(65, 65, 65) 25%, rgb(0, 0, 0) 40% ); filter: alpha(opacity = 70); opacity: 0.70; }

#grad-top-right { position:absolute; background:#111; background:-webkit-gradient( linear, right top, left bottom, color-stop(0.25, rgb(65, 65, 65)), color-stop(0.4, rgb(0, 0, 0)) ); background:-moz-linear-gradient( right top, rgb(65, 65, 65) 25%, rgb(0, 0, 0) 40% ); filter: alpha(opacity = 70); opacity: 0.70; }

#lightboxContent { display:none; position:absolute; width:300px; height:200px; background: #000; color: #fff; font-size: 25px; font-weight: bold; text-shadow: 1px 1px #666, 2px 2px #555, 3px 3px #444; padding:35px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
NOTE: you can change all the styles of lightboxContent except: display:none and position:absolute.
TIP: If you don't want gradient in your lightbox, simply remove all CSS entries containing the word 'gradient'

4- copy and include the .js files (preferably right before </body>)

<script src="lib/mootools/mootools-1.2.4-core-jm.js" type="text/javascript"></script>
<script type="text/javascript" src="js/swCustomLightbox.js"></script>

5- include this after the lines included in step 4

<script language="JavaScript">
window.addEvent('domready',function() {
// lightbox init
var cl = new SwCustomLightbox({'content':'lightboxContent'});
// open the lightbox
$('example').addEvent('click', function(e){
e.stop();
cl.open()});
// close the lightbox
$('lightboxContent').addEvent('click', function(e){e.stop(); cl.close()});
});
</script>

6- (optional): options

replace the line 4 of the script in step 5 by:
var cl = new SwCustomLightbox({<OPTION>:<VALUE>, <OPTION>:<VALUE>...}});
where <OPTION> can be:
content: id of the content div
onStart: function callback triggered whenever the lightbox is being displayed