ThickBox

The purpose of this cookbook item is to integrate the AJAX image effect known as thickbox into a PmWiki page.

This will serve to display image galleries easily and provide an integrated image view without leaving the page.

To understand this effect you must see Thickbox in action. Be aware that similar AJAX functionality is known as lightbox.

Installation

Download the required files from the Thickbox site

Then download the recipe Attach:thickbox.php Δ

Now, in your active skin's .tmpl file, add the reference to the thickbox.css, jquery-latest.js, and thickbox.js

  <head>
    ...
    <style type="text/css">
      @import url($SkinDirUrl/thickbox.css);
    </style>

    <script type="text/javascript" src="$SkinDirUrl/jquery-latest.js"></script>
    <script type="text/javascript" src="$SkinDirUrl/thickbox.js"></script>
    ...
  </head>

Put thickbox.php into the cookbook/ directory.

Add the following to local/config.php

include_once("cookbook/thickbox.php");

Usage

The recipe adds the following new Markup:

(:ThickboxAttach <fullsize> <thumbnail> <rel> <caption>:)

Where:

<fullsize> is the path to the full image
<thumbnail> is the path to the thumbnail image
<rel> is the relationship set for the image
<caption> is the caption to display

Add a thickbox single image with

(:ThickboxAttach mypic.jpg mythumb.jpg none This is the caption that shows:)

Add a set of thickbox images (with Prev / Next links) with:

(:ThickboxAttach mypic1.jpg mythumb1.jpg vacation This is picture 1:)
(:ThickboxAttach mypic2.jpg mythumb2.jpg vacation This is picture 2:)

If you do not have a thumbnail available, one will be scaled to 150px width from the image. The following syntax illustrates how to do this:

(:ThickboxAttach mypic1.jpg "" vacation This is picture 1:)

History

30 Oct 2007 initial docs and recipe posted to pmwiki site

Comments

Thanks for the recipe - really useful! I was having trouble when I tried either attaching pictures that had been upload to a different page, or when I included a page with Thickbox markup in another page. I got round the problem by adding this line extra line to the start of the thickbox.php file:

Markup('ThickboxAttachPage', '>include', "/\$:ThickboxAttachPage +(.*?) +(.*?) +(.*?) +(.*?) +(.*?):\$/e", "ThickboxAttach('$1', '$2', '$3', '$4', '$5')");

This defines some extra markup with this syntax (new bits highlighted in green):

(:ThickboxAttachPage Group.Pagename mypic1.jpg mythumb1.jpg vacation This is picture 1:)

This allows you to both attach photos which have been uploaded to other pages, and it means Thickbox still works when you include one page in another.

---

I followed the instructions, and I've designated thumbnail files, but it's still pulling from the originals to use as thumbnails. Is there a reason it would do that? -smick

ThickBox

Installation

Usage

History

Comments

See also