Fancy Javascript/CSS Lightbox effects
I recently tried the Thickbox library.
An example of with and without is:
The library provides the following:
It is very simple to use and can be used to provide smart looking gallerys. E.g. to provide a lightbox for a single image use the following code:
1. Add the following to the head section of the html page
2. Add the following to any anchors that contain images.
One problem I found was that any anchors/images that where dynamically created would not show in a lightbox, but would instead show on a seperate page.
This was because the thickbox.js makes a call to TB_init
This adds all inits to images that are currently loaded on the page. Any dynamic images will be created after this, and will not have the appropriate initiation.
I fixed this by calling $(document).ready(TB_init); after any dynamically created images.
An example of with and without is:
The library provides the following:
ThickBox was built using the super lightweight jQuery library. Compressed, the jQuery library is 15k, uncompressed it's 39k.
The ThickBox JavaScript code and CSS file only add an additional 12k on top of the jQuery code. Together, the compressed jQuery code and ThickBox only total 27k.
ThickBox will resize images that are bigger than the browser window.
ThickBox offers versatility (images, iframed content, inline content, and AJAX content).
ThickBox will hide form elements in Windows IE 6.
ThickBox will remain centered in the window even when the user scrolls the page or changes the size of the browser window. Clicking an image, the overlay, or close link will remove ThickBox.
It is very simple to use and can be used to provide smart looking gallerys. E.g. to provide a lightbox for a single image use the following code:
1. Add the following to the head section of the html page
<script src="path-to-file/jquery.js" type="text/javascript"> </script>
<script src="path-to-file/thickbox.js" type="text/javascript"> </script>
<script language="javascript" src="javascript/Cookies.js"> </script>
2. Add the following to any anchors that contain images.
< a class="thickbox" title="add a caption to title attribute / or leave blank" href="images/single.jpg"><img alt="Single Image" src="images/single_t.jpg" /></a>
One problem I found was that any anchors/images that where dynamically created would not show in a lightbox, but would instead show on a seperate page.
This was because the thickbox.js makes a call to TB_init
$(document).ready(TB_init);
This adds all inits to images that are currently loaded on the page. Any dynamic images will be created after this, and will not have the appropriate initiation.
I fixed this by calling $(document).ready(TB_init); after any dynamically created images.
