Lightbox
back | css | thickbox | lightbox
This is a simple gallery using Lightbox, see how it compares with the Thickbox version. These two demos use the same images
The HTML
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Flipflops.org - Lightbox vs Thickbox</title>
<style>
body {
font-size: 62.5%; /* Resets 1em to 10px */
font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
/* background: #000000 url(/dev/daisy.gif) ; */
background: #ffffff url(/wp-content/themes/default/images/butterfly.gif);
background-position: left top;
color: #333;
}
#container {
margin: 42px auto 20px auto;
padding: 10px;
filter: alpha(Opacity=90);
opacity:.90;
background: #ffffff;
width: 600px;
}
.gallery {list-style-type: none;}
.gallery li {list-style-type: none; float: left; margin: 10px;}
.cboth {clear: both;}
a img {border: 0px;}
</style>
<script type="text/javascript" src="/example/scripts/lightbox/js/prototype.js"></script>
<script type="text/javascript" src="/example/scripts/lightbox/js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="/example/scripts/lightbox/js/lightbox.js"></script>
<link rel="stylesheet" href="/example/scripts/lightbox/css/lightbox.css" type="text/css" media="screen" />
</head>
<body>
<div id="container">
<h1>Lightbox</h1>
<p><a href="/" onclick="history.go(-1)">back</a> | <a href="#css">css</a> | <a href="/example/thickbox.html">thickbox</a> | <a href="/example/lightbox.html">lightbox</a> </p>
<p>This is a simple gallery using Lightbox, see how it compares with the Thickbox version. These two demos use the same images</p>
<ul class="gallery">
<li><a href="/example/pictures/image1.jpg" rel="lightbox[test]"><img src="/example/pictures/thumb_image1.jpg" width="75" height="75" title="Test Image 1" /></a></li>
<li><a href="/example/pictures/image2.jpg" rel="lightbox[test]"><img src="/example/pictures/thumb_image2.jpg" width="75" height="75" title="Test Image 2" /></a></li>
<li><a href="/example/pictures/image3.jpg" rel="lightbox[test]"><img src="/example/pictures/thumb_image3.jpg" width="75" height="75" title="Test Image 3" /></a></li>
<li><a href="/example/pictures/image4.jpg" rel="lightbox[test]"><img src="/example/pictures/thumb_image4.jpg" width="75" height="75" title="Test Image 4" /></a></li>
</ul>
<code class="cboth">hello</code>
</div>
</body>
</html>
