jQuery Litebox
jQuery Litebox is a JavaScript image viewer written on top of the jQuery library. It’s function is to show multiple image galleries in a hybrid modal (lightbox) window. It degrades gracefully and does not require extraneous HTML markup. jQuery Litebox looks like AJAX, but requires no server-side code.
New! Flickr support added by jQuery Flickr. Now you can add a rich AJAX experience to your website entirely with client-side code.
Updated: jQuery Flickr has been updated to be more flexible and no longer has native support for the Litebox plug-in. Instead, a callback parameter has been added which can be used to provide Litebox compatibility. See jQuery Flickr for an example.
Download
jquery.litebox-min.js
jquery.litebox.js
Features
- one file: no external stylesheets required
- easy to implement:
$(".myClass").litebox(); - New! auto-advance slide show
- fully customizeable, supports i18n internationalization
- mouse or keyboard navigation
- tested in Firefox 1.5-2.0 and Internet Explorer 6.0-7.0 Windows
- requires jQuery 1.1.1
Demo
Settings
SETTINGS DEFAULT VALUE TYPES ACCEPTABLE VALUES oc = overlay background-color 'white' [string] css color code oy = overlay opacity 0.7 [float] between 0 and 1 as % oz = overlay z-index 1000 [integer] greater than 0 sc = slide background-color 'black' [string] css color code sw = slide width 0.8 [float] between 0 and 1 as % sh = slide height 0.9 [float] between 0 and 1 as % ns = nav spacing 2 [integer] pixels nc = nav text color 'white' [string] css color code nz = nav font-size '10px' [string] css font-size nf = nav font-family 'sans-serif' [string] css font-family lu = loading image URL 'loading.gif' [string] URL lh = loading image height 128 [integer] pixels lw = loading image width 128 [integer] pixels ld = loading image delay 2000 [integer] miliseconds ad = auto-advance delay 5000 [integer] miliseconds a = autoplay false [boolean] start in auto mode count = display IMAGE # OF # true [boolean] display image count auto = AUTO text 'AUTO' [string] multilanguage support stop = STOP text 'STOP' [string] multilanguage support restart = RESTART text 'RESTART' [string] multilanguage support image = IMAGE # of # text 'IMAGE' [string] multilanguage support of = image # OF # text 'OF' [string] multilanguage support close = CLOSE text 'CLOSE' [string] multilanguage support prev = PREV text 'PREV' [string] multilanguage support next = NEXT text 'NEXT' [string] multilanguage support aa = alt AUTO text 'SPACEBAR' [string] displayed as tooltip ac = alt CLOSE text 'ESC' [string] displayed as tooltip ap = alt PREV text 'LEFT ARROW' [string] displayed as tooltip an = alt NEXT text 'RIGHT ARROW' [string] displayed as tooltip click = alt IMG text 'CLICK TO SEE FULL IMAGE IN NEW WINDOW' [string] [css color code] 'red', '#f00', '#ff0000', 'rgb(255,0,0)', rgb(100%,0%,0%)' [css font-size] 'x-small', 'larger', '0.8em', '1ex', '12px', '80%' [css family-name] 'Ariel', '"New Century Schoolbook"', 'monospace' [loading image URL] relative to the page calling the script, not the script file
Example
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>jQuery Litebox</title>
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.litebox.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$('#gallery').litebox();
});
</script>
</head>
<body>
<ul id="gallery">
<li><a href="image1.jpg"><img src="image1_t.jpg" alt="" /></a></li>
<li><a href="image2.jpg"><img src="image2_t.jpg" alt="" /></a></li>
<li><a href="image3.jpg"><img src="image3_t.jpg" alt="" /></a></li>
<li><a href="image4.jpg"><img src="image4_t.jpg" alt="" /></a></li>
</ul>
</body>
</html>
May 12th, 2008 at 10:44:27
[...] Project Atomic wrote an interesting post today on jQuery LiteboxHere’s a quick excerpt … jQuery Litebox is a JavaScript image viewer written on top of the jQuery library…. [...]
June 4th, 2008 at 09:52:50
For the life of me I cannot get litebox to work with your Flickr plugin. Could you possibly post an example?
June 6th, 2008 at 02:11:23
The jQuery Flickr plug-in was recently updated. As a result, the Litebox functionality has been decoupled from the plug-in. See jQuery Flickr for more information.
June 6th, 2008 at 09:43:42
Thanks for the quick reply! I appreciate it.
June 8th, 2008 at 09:03:38
Hey guys, is it possible to add images instead text links ? this is for CLOSE, NEXT, PREV and AUTO
Also, would like to add some image description for each of them, so, is it possible ?
Thnks! this is awesome!
June 10th, 2008 at 08:46:41
Guys, well, i’ve solved what i asked before…now have new ones…hehehe
for examples…this, jquery-litebox doesnt work on IE6,7 and Opera, so, do you know any fix ?
The problem: When clicking on any image, the image opens in new window.
July 20th, 2008 at 07:02:09
Hey Daniel!
Good script, pretty good
is it posible to work in IE6? and in opera works not
and have a question with count:
“count = display IMAGE # OF # true [boolean] display image count
”
its enable but he said not “2 of 5″ .. of you site
http://www.projectatomic.com/2008/05/jquery-litebox/
also not
ideas?
tommi
July 20th, 2008 at 07:30:31
solution for count: delete this “/” and replace this with a space.
example:
$(’#ss_c/span:eq(0)’).html(s.image+’ ’);
to:
$(’#ss_c span:eq(0)’).html(s.image+’ ’);
July 21st, 2008 at 05:27:26
@Thomas
Good catch, this plug-in was originally written for jQuery 1.1, and I haven’t been keeping it up to date. The XPath Descendant Selector (/) was removed with jQuery 1.2 and this site is using that version. Perhaps an update is in order.