Future Melbourne Wiki> TWiki> LightboxPlugin DiscussionEditPrint version

Lightbox Plugin

Lightbox is set of Javascript and CSS files that provides improved image viewing functionality. When a user clicks on the image, the full size image will display without advancing the browser to a new page.

Usage

Attach images and thumbnails to any topic.
Use one of the lightbox TWiki tags to display the thumbnail image.

Syntax

To add lightbox functionality to a TWiki topic, use

   %LIGHTBOX{ _options_ }%

   %BEGINLIGHTBOX{ _options_ }%
   _text_
   %ENDLIGHTBOX%

If successful, a dotted box with a clickable thumbnail should appear.

option	default	comments
image	''	The large display image
thumbnail	''	The click-able thumbnail image
float	'right'	thumbnail placement on topic page
border	see below	thumbnail border style
caption	''	caption to appear in thumbnail img alt tag and under large image

Note, TWiki-wide defaults can be set using

- Set LIGHTBOXPLUGIN_BORDER = 1px solid #696969 * Set LIGHTBOXPLUGIN_BORDER = 1px dashed #22638C
- Set LIGHTBOXPLUGIN_FLOAT =

If your text is to short, the thumbnail will overlap use height to fix this.

   <div style="border:1px dashed #22638c;padding:4px;height:200px; ">

Example

%LIGHTBOX{ image="%ATTACHURLPATH%/img-test.jpg"  thumbnail="%ATTACHURLPATH%/tmb-test.jpg" caption="This is a test"}%

Plugin Installation Instructions

Note: You do not need to install anything on the browser to use this plugin. The following instructions are for the administrator who installs the plugin on the server where TWiki is running.

Download the ZIP file from the Plugin Home (see below)

Unzip LightboxPlugin.zip in the root of your twiki installation
Content:

File:	Description:
`data/TWiki/LightboxPlugin.txt`	plugin description
`lib/TWiki/Plugins/LightboxPlugin.pm`	plugin perl code
`pub/TWiki/LightboxPlugin/lightbox.css`	stylesheet
`pub/TWiki/LightboxPlugin/lightbox.js`	javascript
`pub/TWiki/LightboxPlugin/blank.gif`	empty image
`pub/TWiki/LightboxPlugin/close.gif`	close image button
`pub/TWiki/LightboxPlugin/loading.gif`	image loading animation
`pub/TWiki/LightboxPlugin/overlay.png`	overlay image
`pub/TWiki/LightboxPlugin/ScreenShot001.jpg`	thumbnail example

Enable the plugin in configure or LocalSite.cfg
Test if the installation was successful:
- A dotted box with a clickable thumbnail should appear.

Plugin Info

Set SHORTDESCRIPTION = TWiki hooks to the Lightbox Javascript package for better thumbnail clickthrough

This TWiki extension includes v1.0 of Lightbox.

Plugin Author:	TWiki:Main.HenriAanstoot, TWiki:Main.ScottHoge
Copyright:	© 2006, TWiki:Main.HenriAanstoot
License:	GPL (GNU General Public License)
Plugin Version:	5 Apr 2007 (13273)
Change History:
5 Apr 2007:	Added blank.gif to the package
23 Mar 2007:	Added Plugin code with TWiki Tags
22 Sep 2006:	Initial version
TWiki Dependency:	$TWiki::Plugins::VERSION 1.1 (TWiki 4.0)
CPAN Dependencies:	none
Other Dependencies:	none
Perl Version:	5.005
Plugin Home:	http://TWiki.org/cgi-bin/view/Plugins/LightboxPlugin
Feedback:	http://TWiki.org/cgi-bin/view/Plugins/LightboxPluginDev
Appraisal:	http://TWiki.org/cgi-bin/view/Plugins/LightboxPluginAppraisal