Populate Slimbox with a List of Photos

Now that you have Slimbox up and running, you don’t really want to manually create a bunch of links to it, do you? I mean you can, simply by adding the standard rel=”lightbox” tag to your photos. But what if you have a bunch of photos? Or more specifically, what if you have a bunch of photos?

At that point, you have a couple of options. You can list them individually, which is certainly an option, but it gets messy very quickly, or you can use MT-SmugMug to fill in the blanks for you. That makes it a whole lot nicer.

For the first option, you just need to feed several images to Slimbox in an onclick event, like so:

onclick="return Lightbox.open([['url', 'title'], ['url', 'title'], ['url', 'title'], ['url', 'title']], 0)"

You are simply creating an array of all the image links and titles that you want to show in the Slimbox. Simple, right? The only problem is that it can get a little lengthy. Other than that, it’s pretty simple. Just make sure you put single quotes (‘) around the url and title, and double quotes around the whole string, and you are set. But other than that, it’s pretty easy.

What if you want to make it even easier, using MT-SmugMug? In that case, you can create a photo gallery template very easily.

You simply use the type attribute with a value of gallery, and in the data attribute, provide the album ID. It would look something like this:

<mt:SmugMug type="gallery" data="123456">

Then inside of the mt:SmugMug loop, you will iterate over those items to create your list, just like you are creating a list of entries.

onclick="return Lightbox.open([<mt:SmugMugPhotos>['<$mt:SmugMugPhotoLink$>', '<$mt:SmugMugPhotoDescription$>'],</mt:SmugMugPhotos>], 0)"

With the variable replacement available in Movable Type, you may even be able to store an album ID on an entry and pass that value into the mt:SmugMug tag, giving you photo galleries on individual pages, with little interaction at all!

Since you are using Slimbox, you might want to try Slimbox 2 instead. Rather than Mootools, it uses jQuery. That alone may not impress you, but it means that you may be able to use a single JavaScript framework for all your JavaScript needs. Since jQuery also seems to be seeing a bit more development lately, it’s something to think about.

Need to get the latest version of MT-SmugMug? Check out GitHub, as that’s where I’ll keep the code updated.


Posted

in