Tags:
create new tag
, view all tags, tagging instructions

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 a topic
  • Use one of the lightbox Foswiki tags to display the thumbnail image.

Syntax

To add lightbox functionality to a Foswiki topic, use

   %LIGHTBOX{ _options_ }%
or
   %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, Foswiki-wide defaults can be set using

  • Set LIGHTBOXPLUGIN_BORDER = 1px dashed #22638C
  • Set LIGHTBOXPLUGIN_FLOAT = left

  • IDEA! 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="img-test.jpg"  thumbnail="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 Foswiki is running.

  • Download the ZIP file from the Plugin Home (see below)
  • Unzip LightboxPlugin.zip in the root of your Foswiki installation
    Content:
File: Description:
data/System/LightboxPlugin.txt plugin description
lib/Foswiki/Plugins/LightboxPlugin.pm plugin perl code
pub/System/LightboxPlugin/lightbox.css stylesheet
pub/System/LightboxPlugin/lightbox.js javascript
pub/System/LightboxPlugin/blank.gif empty image
pub/System/LightboxPlugin/close.gif close image button
pub/System/LightboxPlugin/loading.gif image loading animation
pub/System/LightboxPlugin/overlay.png overlay image
pub/System/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.
      ScreenShot001.jpg

Plugin Info

  • Set SHORTDESCRIPTION = Foswiki hooks to the Lightbox Javascript package for better thumbnail image click-through
This Foswiki extension includes v1.0 of Lightbox.

Plugin Author: TWiki:Main.HenriAanstoot, Foswiki:Main.ScottHoge
Copyright: 2006, TWiki:Main.HenriAanstoot
License: GPL (GNU General Public License)
Plugin Version: 8 Oct 2009 (5249 (2009-10-09))
Change History:
8 Oct 2009: ported to Foswiki codebase
5 Apr 2007: Added blank.gif to the package
23 Mar 2007: Added Plugin code with TWiki Tags
22 Sep 2006: Initial version
Foswiki Dependency: $Foswiki::Plugins::VERSION 1.1 (Foswiki 1.0.x)
CPAN Dependencies: none
Other Dependencies: none
Perl Version: 5.005
Plugin Home: http://foswiki.org/Extensions/LightboxPlugin
Feedback: http://foswiki.org/Support/LightboxPlugin

Related Topic: Foswiki:Extensions.ImageGalleryPlugin

Contributors: TWiki:Main/HenriAanstoot, Foswiki:Main/ScottHoge

Topic attachments
I Attachment Action Size Date Who Comment
jpgjpg ScreenShot001.jpg manage 13.1 K 08 Oct 2009 - 21:01 AdminUser? Saved by install script
gifgif blank.gif manage 0.1 K 08 Oct 2009 - 21:01 AdminUser? Saved by install script
gifgif close.gif manage 0.1 K 08 Oct 2009 - 21:01 AdminUser? Saved by install script
elsecss lightbox.css manage 0.6 K 08 Oct 2009 - 21:01 AdminUser? Saved by install script
jsjs lightbox.js manage 12.3 K 08 Oct 2009 - 21:01 AdminUser? Saved by install script
gifgif loading.gif manage 2.3 K 08 Oct 2009 - 21:01 AdminUser? Saved by install script
pngpng overlay.png manage 0.3 K 08 Oct 2009 - 21:01 AdminUser? Saved by install script
Topic revision: r5 - 22 Aug 2012 - 16:14:09 - MaryBanach
 
This site is powered by FoswikiCopyright & by the contributing authors. All material on this site is the property of the contributing authors.
Ideas, requests, problems regarding CTSPedia? Send feedback