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

<!-- Include lightbox.js in your header -->
<script type="text/javascript" src="lightbox.js"></script>

Lightbox JS markup example

<!-- Include lightbox.js in your header -->
<script type="text/javascript" src="lightbox.js"></script>

<!-- Add rel="lightbox" attribute to any link tag to activate the lightbox -->
<a href="images/image-1.jpg" rel="lightbox">image #1</a>

Lightbox JS markup example

<!-- Include lightbox.js in your header -->
<script type="text/javascript" src="lightbox.js"></script>

<!-- Add rel="lightbox" attribute to any link tag to activate the lightbox -->
<a href="images/image-1.jpg" rel="lightbox">image #1</a>

<!-- Optional: Use the title attribute to add a caption -->

Lightbox JS markup example

<!-- Include lightbox.js in your header -->
<script type="text/javascript" src="lightbox.js"></script>

<!-- Add rel="lightbox" attribute to any link tag to activate the lightbox -->
<a href="images/image-1.jpg" rel="lightbox">image #1</a>

<!-- Optional: Use the title attribute to add a caption -->
<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

<!-- Lightbox v2.0 uses Prototype.js and the Scriptaculous Effects Library.
      You will need to include these three Javascript files in your header. -->
<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>

<!-- Include the Lightbox CSS file -->
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

<!-- Add rel="lightbox" attribute to any link tag to activate the lightbox -->
<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>

<!-- Create a set by adding a group name between square brackets -->
<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

• Lightbox JS
• Lightbox JS v2.0
• S5: Simple Standards-Based Slide Show System
• Some rights reserved. CC by-2.5
• http://rasterweb.net/raster/presentations/lightboxjs-20070412/