Lightboxes
Download the JS, CSS, and image files needed here.
You can use images as links... and even display then as lightboxes (popups on the screen).
Pink Flowers
You can also cycle through images, like a slideshow.
You need to add a couple of pieces of code to make this work on your page. The information below needs to be entered into the header of the HTML document. The scripts allow access to the JS files, and the CSS helps style it.
|
<script type="text/javascript" src="js/prototype.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css"
media="screen" /> |
When you get ready to implement the lightbox... its very simple. Just a small bit of code inside the link. It can be an image or a text based link.
|
<a href="images/image-1.jpg" rel="lightbox">Pink
Flowers</a></li> |
For a single lightbox on a page, that's it! But what if you want to cycle through images, like a slideshow? Its very similar... just one extra piece.
|
<a href="images/image-1.jpg" rel="lightbox[group]">Pink
Flowers</a></li> |
By adding the [group], it creates what is known as an array... and groups all similar items into that array. Keep in mind the lightbox is going to group ALL the items in the array together, so if you don't want a whole bunch of items (like text and pics) in the arry together, make separate groups! However, make sure that you batch all lightbox images to be the same size, otherwise, you will get too many variations in sizes.