Lightbox

Lightbox is a simple script used to overlay images on the current page.
It gives the fancy visual effects and provides the functionality to create album of related images and allows navigation through them with ease.

Setup for lightbox -:

1. It uses “Prototype” javascript library and “Scriptaculous” javascript library(for visual effects).So you have to include this 2 libraries in your tempalte header.

(javascript library of lightbox)
(This will give all the effects in scriptaculous.)
(This will include all the javascripts required for all ajax effects in RoR)

2.It requires CSS of lightbox.

(CSS for lightbox)

3.Check CSS and javascript for “path of the defult images” i.e prev.gif, next.gif,loading.gif,close.gif.

Activate lightbox -:

1.To give the lightbox effect add “rel=lightbox” in the image tag.
like-:
href=”/images/image-1.jpg” rel=”lightbox” title=”my caption”>image #1

2.To have the group of related imges add rel=”lightbox[roadtrip]” in the image tag.

like-:
href=”/images/image-3.jpg” rel=”lightbox[roadtrip]”>image #3

Download Lightboxv2.03.3 -:

http://www.huddletogether.com/projects/lightbox2/
releases/lightbox2.03.3.zip

The most important point-:

On every page load Lightbox automatically initialised by ‘initIightbox()’ function written in ‘lightbox.js”.Lightbox need to initialise every time to see its effects.

Thus render partial of the page does not give the lighbox effect because it does not call ‘initIightbox()’ function written in ‘lightbox.js”.so this can be solved by calling onclick =”initIightbox();” for an image.

for example-:
href=”/images/image-3.jpg” rel=”lightbox[roadtrip]” onclick=”initLightbox();”>image #3

Enjoy !!

..Naveen Joshi