Why Lightbox is Better than Thumbnail!
Lightbox is an easy way to incorporate many different images into a small element on your webpage. Some benefits to having lightbox instead of a thumbnail page include smoother loading and operation on the page. Users can organize and tag their pictures with captions without creating a page that slower connections can’t load quickly. Also in relation to the lightbox page’s operation users can expect viewers to enjoy the added ease-of-use of lightbox to browse full-sized images quickly.
Below is the protocol for integration of lightbox into the code for your page. This is found at http://www.huddletogether.com/projects/lightbox2/#how
How to Use
Part 1 - Setup
- Include the Lightbox CSS file (or append your active stylesheet with the Lightbox styles).
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
- Check the CSS and make sure the referenced
next.giffiles are in the right location. Also, make sure the
close.giffiles as referenced near the top of the
lightbox.jsfile are in the right location.
Part 2 - Activate
- Add a
rel="lightbox"attribute to any link tag to activate the lightbox. For example:
<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>
Optional: Use the
titleattribute if you want to show a caption.
- If you have a set of related images that you would like to group, follow step one but additionally include a group name between square brackets in the rel attribute. For example:
<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>
No limits to the number of image sets per page or how many images are allowed in each set. Go nuts
This post is informative because it is the most basic information relating to use of lightbox in a page. Apart from the technical value of the post its highlighted here how unobtrusive lightbox is in the code. Also you can see that all of the images can be loaded from one or many directories if properly tagged with the
rel="lightbox" attribute . This presents a clear organizational advantage over thumbnail and embedding methods.
It bears mentioning that for every image you include that hasn't already been loaded to your page will require you to enter in a new line of code. All the files included in lightbox must be accessable (in the same directory as the .html file.) Also the comment about bracketed [album] tags means that if you write into the code a bracketed title for a group. If properly written into the code the images will appear as a group with the title [Roadtrip!]