-
Lightbox JS (and Friends)
April 12th, 2007 Web414 Meeting
-
License
-
What is Lightbox JS?
- Lightbox JS is a simple, unobtrusive script used to overlay images on the current page.
- It’s a snap to setup and works on all modern browsers.
- It places images above your current page, not within. This frees you from the constraints of the layout, particularly column widths.
- It keeps users on the same page. Clicking to view an image and then having to click the back button to return to your site is bad for continuity.
-
Lightbox JS markup example
<script type="text/javascript" src="lightbox.js"></script>
-
Lightbox JS markup example
<script type="text/javascript" src="lightbox.js"></script>
<a href="images/image-1.jpg" rel="lightbox">image #1</a>
-
Lightbox JS markup example
<script type="text/javascript" src="lightbox.js"></script>
<a href="images/image-1.jpg" rel="lightbox">image #1</a>
-
Lightbox JS markup example
<script type="text/javascript" src="lightbox.js"></script>
<a href="images/image-1.jpg" rel="lightbox">image #1</a>
<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>
-
What it looks like
-
What it looks like
-
But wait! There's more... Lightbox JS v2.0
- Image Sets: group related images and navigate through them with ease
- Visual Effects: fancy pants transitions
- Backwards Compatibility: yes!
-
Lightbox JS v2.0 markup example
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>
<a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>
<a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a>
<a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>
-
What else is there?
- ThickBox
- A webpage UI dialog widget written in JavaScript on top of the jQuery library. Its function is to show a single image, multiple images, inline content, iframed content, or content served through AJAX in a hybrid modal.
- vPIP (videos Playing In Place)
- A method to dynamically embed a video after the viewer clicks on it's link. The link can be a text or image link. The result is that the web page loads quickly with only image and text links.
- Are there others?
- SlimBox
- GreyBox
- FlashBox
- And too many others to list here...
-
Thanks
-
Thanks to Lokesh Dhakar for developing Lightbox JS (as well as Lightbox JS v2.0), and everyone else who contributed and pushed the idea further.
-
Colophon