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.
Download the required files from the Thickbox site
Now, in your active skin's .tmpl file, add the reference to the thickbox.css, jquery-latest.js, and thickbox.js
Put thickbox.php into the cookbook/ directory.
Add the following to local/config.php
The recipe adds the following new Markup:
(:ThickboxAttach <fullsize> <thumbnail> <rel> <caption>:)
- <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:)
- 30 Oct 2007 initial docs and recipe posted to pmwiki site
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:
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.
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
- The Cookbook.Mini recipe can create the thumbnails itself and display Lightbox ajax slideshows.