[With your Lightbox Mango Plugin] how do I setup lightbox to include multiple images in a lightbox slideshow?
Before I answer this, let's first talk about how to insert a single lightbox effect into your Mango blog, and then expand it into a slideshow.
Once you've got the plugin installed and activated, your New/Edit-Page and New/Edit-Post pages will allow for what TinyMCE (the WYSIWYG editor) refers to as "advanced linking." When you click the chain icon to create a new link, the dialog will be a little larger, and it will now have a few tabs inside it.
As seen above, the advanced tab is where you set the relationship to "Lightbox" -- which indicates that when the link is clicked, Lightbox should try to display the image being linked to. The body of the link can be thumbnail images, as I've done above, or text as I'll do right here.
You may have noticed that if you click the left thumbnail above, and hover your mouse over the right half of the image, a small "Next" icon is displayed on top of the image, near the top right of it. That is because I've created a Lightbox Slideshow, as Randy asks about. Similarly, while viewing the second image, a "Prev" icon will display on the left while your mouse is hovered over the left half of the image. Unfortunately, slideshows aren't supported by the TinyMCE advanced linking dialog, but fortunately you have two fairly simple work-arounds to chose from.
The goal is to be able to edit the underlying HTML, and TinyMCE does provide a facility to do this: the "HMTL" button on the toolbar, next to last. I prefer not to use this button though, because it's yet-another-popup, and well... I'm particular. The other option is a small modification to Mango: follow Brian's instructions to give yourself the ability to toggle TinyMCE on and off. The first few parts of his article are optional in this case, the only important part is stuff under the heading "Toggle TinyMCE."
Once you can edit the underlying HTML, creating a slideshow is simple; and you can have multiple different groups in a single post or page. When you create your links and select the relationship of "Lightbox", the HTML generated looks something like this:
To turn these 3 separate lightbox images into one slideshow, change the above code to this:
Of course, GroupName can be any alpha-numeric string, so symantically the best thing to do is use something descriptive of the slideshow. If it's photos of your trip to Spain, call it "spain" or something similar. To create multiple separate slideshows, just give each slideshow a distinct GroupName.
Again, the body of the anchor tags can be anything you like. For brevity I've used the text "bodyN" in my code, but you can replace that with an image tag to have thumbnails that you click for a larger version. Just be sure to physically resize and save smaller versions of your images as thumbnails, because using width and height attributes in the image tag does not affect the size of the file that the browser has to download, causing slower loading times. This is a big faux pas of online photo galleries.
I'll end with a tip/trick you can use to put a multi-image slideshow on a page without showing all of the thumbnails or using text to link to each image. Instead, start with one image/text link to the first image in the slideshow, and follow it with empty anchor tags to the rest of the images, like so:
I'm not sure how this would sit with usability people who worry about screen readers and other things like that. Maybe Mark will stop by and comment on that?