Implementation of the Lightbox script:

<script type="text/javascript" src="%ATTACHURL%/prototype.js"></script>
<script type="text/javascript" src="%ATTACHURL%/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="%ATTACHURL%/lightbox.js"></script>
<link rel="stylesheet" href="%ATTACHURL%/lightbox.css" type="text/css" media="screen" />

To add this functionality to a page, first include this page:

%INCLUDE{"Sandbox.LightBoxScript"}%

Then add rel="lightbox" inside any anchor element to use lightbox. Additionally, group images in albums by using rel="lightbox[name_of_album]".

Try clicking on the thumbnail images below to see the Lightbox script in action. Notice that you can click forward and back through the album by clicking on the right or left half of the current image smile

Topic attachments
I Attachment Action Size Date Who Comment
jsjs builder.js manage 4.7 K 2008-10-24 - 13:50 EdWenger  
gifgif bullet.gif manage 0.1 K 2008-10-24 - 13:51 EdWenger  
gifgif close.gif manage 0.2 K 2008-10-24 - 13:51 EdWenger  
gifgif closelabel.gif manage 1.0 K 2008-10-24 - 13:51 EdWenger  
gifgif download-icon.gif manage 1.1 K 2008-10-24 - 13:52 EdWenger  
jsjs effects.js manage 38.1 K 2008-10-24 - 13:50 EdWenger  
csscss lightbox.css manage 1.6 K 2008-10-24 - 13:55 EdWenger  
jsjs lightbox.js manage 18.1 K 2008-10-24 - 14:00 EdWenger  
gifgif loading.gif manage 2.7 K 2008-10-24 - 13:52 EdWenger  
gifgif nextlabel.gif manage 1.2 K 2008-10-24 - 13:52 EdWenger  
gifgif prevlabel.gif manage 1.2 K 2008-10-24 - 13:52 EdWenger  
jsjs prototype.js manage 123.2 K 2008-10-24 - 13:50 EdWenger  
jsjs scriptaculous.js manage 2.6 K 2008-10-24 - 13:49 EdWenger  
Topic revision: r4 - 2009-10-23 - 08:41:21 - EdWenger
 
This site is powered by the TWiki collaboration platformCopyright © by the contributing authors. All material on this collaboration platform is the property of the contributing authors.
Ideas, requests, problems regarding TWiki? Send feedback