There's a new BBCode tag in town - two tags, in fact - and the name of the game is slideshows.

[slideshow {group=groupid} {size=expression|resize=expression} {title=text} {alt=text}]
[slide=path {group=groupid} {size=expression|resize=expression} {title=text} {alt=text}]

The [slide] tag works very much like the [img] tag.  The difference is that instead of simply embedding an image in your page, it creates a thumbnail for the image and a link that will bring up the full-size image as part of a slideshow.  (You'll need to update your blog to 1.1 to get the full effect, but the thumbnail and link will work on older sites.)

The [slideshow] tag lets you set up the default values for a slideshow.  The group can be used if you want to have two separate slideshows in a post; simple give them different ID's.  The size or resize value can be used to automatically make all your thumbnails the same size, sparing you from specifying this each time.

Here's a sample:

[slideshow group=pictures resize=90x135]
[slide=http://ai.mee.nu/images/minor_structural_damage.jpg][slide=http://ai.mee.nu/images/eriko_sato.jpg][slide=http://ai.mee.nu/images/black_and_white.jpg][slide=http://ai.mee.nu/images/ruffles.jpg][slide=http://ai.mee.nu/images/blue-denim.jpg]



Note that the editor automatically adds a <br/> after a new line, so if you want a row of thumbnails, you'll need to squash the [slide] tags together like this: [slide=/images/slide1.jpg][slide=/images/slide2.jpg]...

You can navigate the slideshow with your mouse, or use the left and right arrow keys.  Clicking outside the image or pressing the Esc key will exit the slideshow.

Browser Support

Slideshows are supported on current versions of Firefox, Internet Explorer, Opera and Safari.

Hints and Tips

If you want to add images to the slideshow without slowing the respective thumbnails, you can enclose the [slide] tags in an [invisible] tag:

[invisible][slide=http://ai.mee.nu/images/oranges.jpg][/invisible]
Click on the fifth thumbnail, and you'll find there's a secret sixth image in the slideshow.

The slideshow settings don't persist beyond the current text section.  If you want to have a slideshow that spans the basic and extended sections of a post, you'll need to repeat the [slideshow] tag.

What's Next?

Minx 1.2 will extend the [slideshow], [slide], and [img] tags to support easy and automatic borders and padding, cropping, and a full range of dynamic image effects.

Posted by: Pixy Misa at 02:32 PM | No Comments | Add Comment
Post contains 324 words, total size 4 kb.