References

Wikipedia

http://en.wikipedia.org/wiki/Lightbox_(JavaScript)

FancyZoom

http://orderedlist.com/demos/fancy-zoom-jquery/

ICE plugins

http://ice.usq.edu.au/svn/ice/trunk/apps/ice/plugins/

About Lightboxes

A Lightbox is a JavaScript application used to display large images or other objects using modal dialogs. Lightboxes have been included in ICE as a plugin service and they can be added to ICE content for viewing in html.

We looked at implementing the Wikipedia javascript version, but Fancy Zoom was in JQuery and was therefore easier to implement.

Lightbox example

Added link to show a lightbox

How do I add a lightbox?

Simply add ?lightbox to an ICE link. The file object the link points to will become the content of the lightbox.

For example:

http://localhost:8000/rep.name/media/file.html?lightbox

How does it work?

Preconditions

• Lightbox link added to the source document.

  <a href="http://localhost:8000/media/lightbox-content.html?lightbox"><img/></a>

• Skin directory contains fancyzoom images and scripts

• (Optional) default.css in skin directory contains lightbox modifications (below)

Result

The scripts and images are stored in a fancyzoom directory in the repository skin. These are accessed when viewing the link in html and convert it to a lightbox link complete with a magnifier image which is noted in the css.

Customizing your lightbox

1. Simple changes can be made to the size of the Lightbox

   Add dimensions to the end of the link eg:

   <a href="http://localhost:8000/media/lightbox-content.html?lightbox&width=400&height=500"><img/></a>

2. A title and tooltip can be added

   Add title to the end of the link eg:

   <a href="http://localhost:8000/media/lightbox-content.html?lightbox&title=A picture"><img/></a>

3. Lightboxes can be altered by making changes to the default.css, it can be customized using the lightbox-link css class. For example, the style below adds an icon to indicate the presence of a lightbox.

   /* Lightbox */

   span.lightbox-link {

       position: relative;

       right: 18px;

       bottom: 12px;

       background: url(magnifier.png) no-repeat bottom;

       padding: 8px;

       vertical-align: bottom;

   }