<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
| I | Attachment | Action | Size | Date | Who | Comment |
|---|---|---|---|---|---|---|
| |
builder.js | manage | 4.7 K | 2008-10-24 - 13:50 | EdWenger | |
| |
bullet.gif | manage | 0.1 K | 2008-10-24 - 13:51 | EdWenger | |
| |
close.gif | manage | 0.2 K | 2008-10-24 - 13:51 | EdWenger | |
| |
closelabel.gif | manage | 1.0 K | 2008-10-24 - 13:51 | EdWenger | |
| |
download-icon.gif | manage | 1.1 K | 2008-10-24 - 13:52 | EdWenger | |
| |
effects.js | manage | 38.1 K | 2008-10-24 - 13:50 | EdWenger | |
| |
lightbox.css | manage | 1.6 K | 2008-10-24 - 13:55 | EdWenger | |
| |
lightbox.js | manage | 18.1 K | 2008-10-24 - 14:00 | EdWenger | |
| |
loading.gif | manage | 2.7 K | 2008-10-24 - 13:52 | EdWenger | |
| |
nextlabel.gif | manage | 1.2 K | 2008-10-24 - 13:52 | EdWenger | |
| |
prevlabel.gif | manage | 1.2 K | 2008-10-24 - 13:52 | EdWenger | |
| |
prototype.js | manage | 123.2 K | 2008-10-24 - 13:50 | EdWenger | |
| |
scriptaculous.js | manage | 2.6 K | 2008-10-24 - 13:49 | EdWenger |