AJAX - Photo library (2nd Part) : How to zoom on a photo

A new Javascript Library is used more and more on Web 2.0 sites : Lightbox. This AJAX library, based on prototype.js and scriptaculous, display effect to zoom from a thumbnail. For example, you can find this functionality on Zoomr.


How to install the javascript library

1. to download the javascript library on http://www.huddletogether.com/projects/lightbox2/
2. to uncompress the zip file
3. to add protoype.js, scriptaculous.js, effect.js, lightbox.js and lightbox.css files in shared resources library of your Lotus Notes Database
4. to add close.gif, loading.gif, blank.gif in shared pictures resources of your Lotus Notes database. You can added this other pictures too but it's not necessary in this example.

How to use LightBox Javascript library with Lotus Notes
The first step is to declare javascript files on your web page. This web page can be a form or Lotus Notes page. The HTML header content looks like :

"<link rel=\"stylesheet\"
type=\"text/css\" href=\"lightbox.css\"
media=\"screen\" title=\"Normal\" />
<script src="\" type="\">
</script>
<script src="\" type="\">
</script>
<script src="\" type="\">
</script>"

Be careful with the path of your javascript files.

Add an Onload event :

initLightbox();

Your form or page is ready to use lightbox. To add photo in your web page you have to add in the content of your web page :

<a href="path_of_the_big_picture" rel="lightbox">
<img src="path_of_the_thumbnail_picture" />
</a>

Download an example
You can dowload an Lotus Notes Database who show how to implement lightbox library with Domino. This application is very simple and in english.

download the database