LightboxPlugin < TWiki

---+!! Lightbox Plugin
<!--
   Contributions to this TWiki plugin are appreciated. Please update the plugin page at
   http://twiki.org/cgi-bin/view/Plugins/LightboxPlugin or provide feedback at
   http://twiki.org/cgi-bin/view/Plugins/LightboxPluginDev.
   If you are a TWiki contributor please update the plugin in the SVN repository.
-->
<sticky><div style="float:right; background-color:#EBEEF0; margin:0 0 20px 20px; padding: 0 10px 0 10px;">
%TOC{title="Page contents"}%
</div></sticky>
%SHORTDESCRIPTION%

---++ Introduction

[[http://www.huddletogether.com/projects/lightbox/][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 TWiki Variable to display the thumbnail image

---+++ Syntax

To add lightbox functionality to a TWiki topic, use 

<verbatim>
   %LIGHTBOX{ _options_ }%
</verbatim>
or 
<verbatim>
   %BEGINLIGHTBOX{ _options_ }%
   _text_
   %ENDLIGHTBOX%
</verbatim>

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 title tag and under large image |

Note, TWiki-wide defaults can be set using
   * <nop>Set LIGHTBOXPLUGIN_BORDER = 1px dashed #22638C
   * <nop>Set LIGHTBOXPLUGIN_FLOAT = 

   * %I% If your text is to short, the thumbnail will overlap use height to fix this.
<verbatim>
   <div style="border:1px dashed #22638c;padding:4px;height:200px; ">
</verbatim>

---+++ Example

| *You type* | *You get* | *Simulated thumbnail* |
| =%<nop>LIGHTBOX{%BR% image="Dsc05040.jpg"%BR% thumbnail="Dsc05040-thumb.jpg"%BR% caption="Rocket is ready for launch"%BR%}%= | %LIGHTBOX{ image="Dsc05040.jpg"  thumbnail="Dsc05040-thumb.jpg" caption="Rocket is ready for launch"}% | <img src="%ATTACHURLPATH%/Dsc05040-simulated.jpg" alt="" title="Rocket is ready for launch" width="159" height="182" /> |

---++ 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 %BR% 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/Dsc05040.jpg== | image example |
     | ==pub/TWiki/LightboxPlugin/Dsc05040-thumb.jpg== | image example |
     | ==pub/TWiki/LightboxPlugin/Dsc05040-simulated.jpg== | image example |
   * Enable the plugin in =configure= or =LocalSite.cfg=
   * Test above example if the installation was successful

---++ 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: | &copy; 2006, TWiki:Main.HenriAanstoot <br /> &copy; 2006-2010 TWiki:TWiki/TWikiContributor |
|  License: | GPL ([[http://www.gnu.org/copyleft/gpl.html][GNU General Public License]]) |
|  Plugin Version: | 2010-11-09 - 19812 (2010-11-09) |
|  Change History: | <!-- versions below in reverse order -->&nbsp; |
|  2010-11-09: | TWikibug:Item6530: Doc improvements, adding proper image example -- TWiki:Main.PeterThoeny |
|   5 Apr 2007: | Added blank.gif to the package |
|  23 Mar 2007: | Added plugin code with TWiki Variables |
|  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/%TOPIC% |
|  Feedback: | http://TWiki.org/cgi-bin/view/Plugins/%TOPIC%Dev |
|  Appraisal: | http://TWiki.org/cgi-bin/view/Plugins/%TOPIC%Appraisal |

__Related Topic:__ TWiki:Plugins.ImageGalleryPlugin

Attachments

Topic attachments
I	Attachment	History	Action	Size	Date	Who	Comment
jpg	Dsc05040-simulated.jpg	r1	manage	16.9 K	2010-11-10 - 07:20	TWikiAdminUser	Saved by install script
jpg	Dsc05040-thumb.jpg	r1	manage	8.7 K	2010-11-10 - 07:20	TWikiAdminUser	Saved by install script
jpg	Dsc05040.jpg	r1	manage	77.4 K	2010-11-10 - 07:20	TWikiAdminUser	Saved by install script
gif	blank.gif	r1	manage	0.1 K	2010-11-10 - 07:20	TWikiAdminUser	Saved by install script
gif	close.gif	r1	manage	0.1 K	2010-11-10 - 07:20	TWikiAdminUser	Saved by install script
css	lightbox.css	r1	manage	0.6 K	2010-11-10 - 07:20	TWikiAdminUser	Saved by install script
js	lightbox.js	r1	manage	12.3 K	2010-11-10 - 07:20	TWikiAdminUser	Saved by install script
gif	loading.gif	r1	manage	2.3 K	2010-11-10 - 07:20	TWikiAdminUser	Saved by install script
png	overlay.png	r1	manage	0.3 K	2010-11-10 - 07:20	TWikiAdminUser	Saved by install script

This topic: TWiki > LightboxPlugin
Topic revision: r2 - 2020-06-25 - TWikiAdminUser

Copyright © 1999-2025 by the contributing authors. All material on this collaboration platform is the property of the contributing authors.
Ideas, requests, problems regarding TWiki? Send feedback
Note: Please contribute updates to this topic on TWiki.org at TWiki:TWiki.LightboxPlugin.