Prosti By Aubrey Miles

AJAX - My vacation photos with LightBox

As promised during the presentation of the "Smooth Slideshox " I'll have a second Javascript library for displaying photographs. Library LightBox is increasingly used on the Web. It has the great advantage of a photo enlarge nicely without having to worry about navigation. The library relies on the couple prototype.js / scriptaculous.


How to install LightBox
The installation and use of the library LightBox in a Lotus Domino is similar to other libraries already presented on this blog:

1. Download the package on http://www.huddletogether.com/projects/lightbox2/
2. Unzip the ZIP file on the hard disk
3. Add the prototype.js file, scriptaculous.js, and effect.js lightbox.js lightbox.css and shared resources in the Notes database files
4. Add close.gif , loading.gif, blank.gif resources in shared images. You can also add other images presented, but it will not be needed in the example described.

How to use the lightbox library
Since the structural element to display images LightBox (mask or page), enter it as "content as HTML"

  "\u0026lt;link rel = \\" stylesheet \\ " 
 type = \\ "text / css \\" href = \\ "lightbox.css \\" 
 media = \\ "screen \\" title = \\ "Normal \\" /> 
 \u0026lt;script src = \\ "script / prototype.js \\ "type = \\" text / javascript \\ "> 
 \u0026lt;/ script> \u0026lt;script 
 src=\\"script/scriptaculous.js\\" type=\\"text/javascript\\"> 
 \u0026lt;/ script> ; 
 \u0026lt;script src=\\"script/lightbox.js\\" type=\\"text/javascript\\"> 
 \u0026lt;/ script> "Add  

also on the event" OnLoad ":

  initLightbox ( ) or mask  

Your page is ready.

To report an image or photo to use lightbox must use the following syntax:

  \u0026lt;a href="path_de_l_image_agrandie" rel="lightbox"> 
 \u0026lt;img src = "path_de_l_imagette" /> 
 \u0026lt;/ a>  

A mini-photo gallery on Lotus Domino download
For the Occasion I created a mini photo gallery under Lotus Notes download. Do not expect a revolution. This application was that the sole purpose of presenting the integration LightBox in a Notes database. By cons, to please Julie, 3 photos are provided as an example ... in color.

Download photo gallery lightbox