Yes, I know I’m a bit late with this, but I still had to give you the run down.
Originally created by Lokesh Dhakar
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.
Have you ever gone to a website and seen this nice lil' thing they do when you click on a thumbnail and it pops up a larger image in the same browser window? That’s LightBox. I’ve seen it before and I haven’t given it a lot of thought. I just naturally assumed that it would take too much time to implement, so I left it alone. Oh was I wrong.
In the HEAD section of your HTML code.
To use it, simple add rel=“lightbox” to any “a” tag linking to an image file:
<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>
Over this past weekend is when I had my first experience with the LightBox script. I tried using version 2 for a particular application and one problem I had was what happened when images were two large for the screen. Well, it loads the entire image like you tell it to and the user then needs to scroll throughout the page to view the image. Some may simply say, create you images to an acceptable size, but the application I was using didn’t offer than flexibility. The images I would be serving came from the user. And only God knows what users have in mind for your application. Enter LightBox Plus. This loads the image and fits it into the appropriate screen size and adds a resize feature to enable the full size of the image. When you resize is activated the user can then use the mouse wheel to zoom in and out.