Integrate ThickBox into {ImageGallery} tag (and other mods)

[kermit]

This modification replaces function.ImageGallery.php found in ./plugins. It requires that you place the requisite ThickBox scripts and CSS in your template or in the page metadata where the new ThickBox parameter is to be used. See the ThickBox site for those files and instructions.

Something like:

Code: Select all

<__script__ type="text/javascript" src="uploads/thickbox/jquery-latest.js"></__script>
<__script__ type="text/javascript" src="uploads/thickbox/thickbox.js"></__script>
<link rel="stylesheet" href="uploads/thickbox/thickbox.css" type="text/css" media="screen" />

When you put styles into a page's metadata, I suggest putting {stylesheet} BEFORE {metadata} in your template to ensure the added styles are not overridden by the template styles.

How to use:

Works just like the {ImageGallery} tag does now; but there's a new parameter, ThickBox, to enable ThickBox links on either 'thumbs' (the thumbnail pages) or the 'bigpic' (the generated single-pic page).. and do not specify a 'type' (i.e. click vs popup). Simply add ThickBox='thumbs' or ThickBox='bigpic' to the {ImageGallery} tag. If ThickBox is omitted, the tag will function as if it were unmodified.

Make a backup of your original function.ImageGallery.php and put somewhere outside the ./plugins directory; rename the .txt file attached to this post to a .php file and upload to ./plugins

This is released as WFM and YMMV ("works for me" and "your mileage may vary"). Base was the ImageGallery plugin as found in the CMSMS 1.2 core.

[kermit]

after a few more hacks, I finally got {ImageGallery} output the way I want it.. added are:

ScrollNextPrev to optionally insert in-page anchors on links from thumbnails and prev/next links (use to scroll next page right to the image).. eg. appends #content (or whatever you specify for the ID) to those links

NumberInRow to optionally wrap a defined number of thumbnails in a for additional styling. The default layout and styles would create 'holes' in the thumbnail pages if captions or images weren't all the same height. this allows you to clear the 'row' above and start 'fresh' for each row; or apply additional styling. This also allows you to remove absolute thumbnail height from the CSS and avoid squished or squashed-looking thumbnails and still keep some order to the thumbnail layout..

BigPicWidth to optionally insert bigPic's width and height in the img tag instead of relying on CSS alone to constrain larger images to a set size (height is auto calculated, keeping proper aspect ratio). Had problems where IE wouldn't always keep the correct aspect ratio using CSS alone to constrain larger images to fit the space of a bigPic (defined width and auto height in CSS)... this fixed that.


a sample tag:
{ImageGallery picFolder="uploads/images/photos/TheBand/Spring07Tour/" ThickBox='bigpic' ScrollNextPrev='content' BigPicWidth='410' NumberInRow='3'}



plugin with all four mods is attached...

[alvin]

Kermet,  Are you still monitoring this theard?

AM