Recent Changes - Search:
Cookbook /

ThickBox

Summary: integrate the AJAX image effect known as thickbox into a PmWiki page
Version:
Prerequisites: required files from the Thickbox site
Status:
Maintainer:
Categories: Ajax, Images, Uploads, Gallery
Discussion: ThickBox-Talk

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 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.

---

There seems to be an issue with the most recent jQuery code. When I tried using this recipe, all I could get was the loading image and nothing else. A little searching and I found this fix.

Just an additional note to anyone that tries this. Unless you read the thickbox website carefully you may miss the fact that you need to edit the javascript and css files to identify where the loading and background images are on your website. The cookbook text does not mention this and it is easy to miss since most of the instructions on the thickbox page are not relevant to pmwiki.

---

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

See also