Lightbox

Lightbox JS is a simple, unobtrusive script used to overlay images on the current page and display them in nice slideshows. This page demonstrates one of all possible ways to integrate this fine JavaScript into PmWiki using Thumblist².

Note that this is different from how it was done in the old version of Thumblist.

See also Mini, a possibly easier way to use Lightbox with PmWiki.

Click on a thumbnail then move your mouse cursor above the image...

(:thumblist px=48 count=8 rel=lightbox:)

These photos come from Public Domain collections at Wikimedia Commons.[1]

The following picture is 800px wide, it was downsized to 500px

(:thumb Bees_Collecting_Pollen_2004-08-14.jpg width=500 rel=lightbox:)

The following picture is 341px wide, it was not resized

(:thumb Mcron.jpg width=500 rel=lightbox:)

Upload the files

These instructions are for Lightbox version 2.10

• Download lb.zip, ready for upload.
• Create a directory inside your /pub directory, like /pub/lb/.
• Copy there all files from the archive (just the files, no directory, like here).

Inside a local configuration file

Place this code in your config.php (this code was changed 2023-01-19):

$ThumbList['fPreChecks'] = 'uThumbLightbox';
function uThumbLightbox(&$opt) {
  global $HTMLHeaderFmt, $ThumbList;
  $linkrel = IsEnabled($opt['rel'], $ThumbList['LinkRel']);
  if(preg_match("/lightbox/i", $linkrel))
  {
    $LightboxDirUrl = '$FarmPubDirUrl/lb'; # LIGHTBOX DIRECTORY
    $opt['rel'] = 'lightbox[?G]';
    $HTMLHeaderFmt['lightbox'] =<<<EOF
<link rel="stylesheet" href="$LightboxDirUrl/lightbox.min.css" type="text/css" media="screen"/>
<link rel="stylesheet" href="$LightboxDirUrl/mini-lightbox.css" type="text/css" media="screen"/>
<script type="text/javascript" src="$LightboxDirUrl/lightbox-plus-jquery.min.js"></script>
<script type="text/javascript" src="$LightboxDirUrl/mini-lightbox.js"></script>
EOF;
  }
}

In case your /pub/lb directory is elsewhere, please change the line $LightboxDirUrl = "/pub/lb"; to point to it. If, for example all your installation is in /pmwiki/ and your /pub/lb directory is inside, you'll have $LightboxDirUrl = "/pmwiki/pub/lb"; (Thanks Simon for catching this.)

Note that this is different from how it was done in the old version. First: the former $ThumbList['LinkAdd'] definition is not needed, it is ignored and can be safely removed. Second: the Lightbox scripts are only loaded if they are needed by the page (rel=lightbox), so this can be enabled for all the website without problems.

In the wiki page

In the wiki page, use the parameter rel=lightbox to enable Lightbox slideshows.

To enable Lightbox for all thumblist galleries by default, set in config.php:

 $ThumbList['LinkRel'] = 'lightbox';

then you need not to write rel=lightbox in the wiki pages.

Notes

• Lightbox integration doesn't work with template trails (usetemplate=1).

Unless noted otherwise, pictures in this page come from Public domain collections at Wikimedia Commons.