Ask a Grokker: Creating a Lightbox Slideshow in Mango
Randy asks:
[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?
Posted in Mango | My projects | 4 Responses
From an accessibility standpoint none of the modal box system really measure up but they are getting better :) However a modal window is still far better than a pop up any day in my opinion.
Now, to add to your post. TinyMCE's advanced link tab does have a default option for setting the relationship of the page to the target as "lightbox". Adding the group option can be done without much fuss at all. Here's what I did.
In your mango install directory open the "link.htm" file located in the location: /admin/assets/editors/tinymce_3/jscripts/plugins/advlink/link.htm
Around line 200 is a select box with an ID of "rel" Add a new option to the select menu like <option value="lightbox[group]">Lightbox Group</option>
Now you have an option for a single lightbox or a group at your disposal. As an extra bonus. Shadowbox will also recognize the lightbox rel and use it too so no additional programming is required if you want to switch back and forth.
I did notice another IE7 issue though.. when doing multiple images you can click on the right side of the image to move to the next image, but no "Next" or any text displays.. if the user doesn't know to click there they won't know how to see the rest of the images.. The close option still doesn't work either but it appears that if you click above the image it will close!
I'm looking into the Close issue.