Embracing Technology

Intro

Lightbox is a javascript plugin for your webpages with images and open the images in a “lightbox” as if under the spotlight.

The script author is Lokesh Dhakar and you can easily download, install and use it in less than 5 minutes. Visit Lokesh Dhakar’s website and Lightbox version 2 project site.

 

The implementation is so easy and useful that it is truly one of those technology people worth giving credit and salute to.

It is provided absolutely free and licensed under the Creative Commons Attribution 2.5 License.

Why use Lightbox?

Clean, nice, easy.

If you have a lot of images with thumbnails with actual larger images and you want a nice way to present them, Lightbox is for you.

If clicking thumbnails and opening images in a new window is not something you like, Lightbox is for you.

If clicking on an image and opening the actual larger image on the same page is not something you like, Lightbox is for you.

If you are looking for a nice photo or image viewer for your website, Lightbox is for you.

 

 

How to use Lightbox in your website

Download Lightbox

Latest version for download as of now is 2.03.3. Download the required files at http://www.lokeshdhakar.com/projects/lightbox2/releases/lightbox2.03.3.zip.

Run a sample

Extract the content of the zip files and open the sample index.html page

View : Simple Working Sample 

 

Customizing for your use

1. Changing CSS

Change the CSS to suit your own liking. Next and previous images and hover can be customized.

2. Changing Images

The images are located under the “image” folder. Change the images for your own usage.

 

3. Adding Captions

Captions can be added to the image to show on the Lightbox.

Example:

<a href="images/image-1.jpg" mce_href="images/image-1.jpg"
  

 rel="lightbox" title="my caption">image #1</a>

 

 

Customizing LightBox for other features

Other than just plain images, html objects can be put into the Lightbox as a separate form or page. You can refer to the customized version at Lightbox Gone Wild! – By Chris Campbell

Another customization by Sean at Building aB: Customizing Lightbox

How to use lightbox in your wordpress blog

A fairly simple and straightforward guide to implement Lightbox JS for your wordpress blog is available here: http://zeo.unic.net.my/notes/lightbox2-for-wordpress/

Some Sites Using Lightbox

http://www.hypertunemag.com/hyperbabes/feb2007/julie.php

http://www.ngfamilyphotos.com/

http://simplephotoblog.blogspot.com/2007/07/lightbox-js-20.html