The Turning Gate

Pimp My Slimbox

Advanced Slimbox options; a work in progress

TTG Slimbox Gallery for Adobe Lightroom gives users all the options they need to create customized web photo galleries from the LR Web module. But for those willing to go the extra mile, there are still a great many additional options hiding under Slimbox’s hood.

Let’s pop the hood and get our hands dirty.

Preface

First off, the information and techniques herein may be applied to any Slimbox gallery, and not just those made with the TTG Slimbox Gallery plugin. Throughout this article, however, I will be including additional tips and information specifically for users of Lightroom and the TTG Slimbox Gallery plugin.

Some techniques will require the editing of Slimbox’s Javascript or CSS; for users building galleries without the aid of TTG Slimbox Gallery or Adobe Lightroom, HTML editing will also be required. For HTML and Javascript editing on the Mac, I prefer skEdit. For CSS, I like MacRabbit’s CSSEdit. Of course, on Windows, Mac or Linux, any text-editor will do.

TTG Slimbox Gallery users will have the option of editing the files distributed with the TTG Slimbox Gallery zip archive – in which case, all subsequently produced galleries will be affected by your changes – or editing the files from a previously exported gallery, with changes affecting only the individual gallery.

Backing Up

If you’ve decided to edit the files within the TTG Slimbox Gallery, it may be a good idea to backup the original gallery first. Copy the TTGSlimboxGallery folder to a new location and rename the folder – maybe call it TTGSlimboxGallerlyMod. Now, copy it back into the Lightroom Web Galleries folder.

Before Lightroom will recognize the new gallery, you’ll need to assign it a unique identifier; Lightroom will not recognize two galleries with identical identifiers. Open TTGSlimboxGalleryMod and open the gallerymaker.xml file for editing.

On line 23, you will see this code:

<identifier>TTGSlimboxGallery</identifier>

Edit the part that says “TTGSlimboxGallery” to assign a unique identifier to your new gallery. You can give it an entirely new name, or simple append a number to what’s already there. The name doesn’t matter so long as no two galleries share the same identifier.

You should also assign the gallery a new name on line 11. It’s not required, but it will help you to find the gallery in Lightroom.

Save your work and close the file. If you have Lightroom running, close the application. When you launch Lightroom again, you should find your new gallery in the Galleries pane of the Web module.

And now we can get down to the interesting business of making changes to our gallery.

Enable/Disable Image Counter

When configured to display multiple images in a gallery, Slimbox displays an image counter in the captions, a la Image 1 of 10. With a quick edit to the slimbox.js file, getting rid of it is a simple procedure.

In TTG Slimbox Gallery, the slimbox.js file is located within the js folder. Open the file in a text editor, and near the top you will find these lines of code, which provide us with several options:

init: function(options){
		this.options = $extend({
			resizeDuration: 400,
			resizeTransition: false,	// default transition
			initialWidth: 250,
			initialHeight: 250,
			animateCaption: true,
			showCounter: true
		}, options || {});

Simply set the showCounter value to “false” and the image counter will disappear!

Transitions

Mootools also provides a number of optional transitions you can use to move between photographs. To change transitions, you’ll need to modify these lines:

resizeDuration: 400,
resizeTransition: false,	// default transition

resizeDuration defines the length of time over which to perform the transition, while resizeTransition specifies the type of transition to use. Try this:

resizeDuration: 400,
resizeTransition: Fx.Transitions.Elastic.easeInOut,	

Or:

resizeDuration: 600,
resizeTransition: Fx.Transitions.Bounce.easeOut,	

A full list of available transitions is available on the Mootools website. Some transitions may require a longer resizeDuration to look good.

The Leftovers

The other options in slimbox.js are pretty self-explanatory. initialWidth and initialHeight set the beginning dimensions of the lightbox when it first appears. animateCaption determines whether the caption will animate or simply appear, and accepts values of either “true” or “false”.

Reposition Next/Previous Labels

Repositioning the Next/Previous labels is fairly simple. Open slimbox.css and locate the selectors for #lbPrevLink:hover and #lbNextLink:hover. The code for each looks like this:

#lbPrevLink:hover {
	background: transparent url(images-slimbox/prevlabel.gif) no-repeat 0% 15%;

}


	
#lbNextLink:hover {
	background: transparent url(images-slimbox/nextlabel.gif) no-repeat 100% 15%;

}

The percentages position the labels accord to the size of the lightbox. The first percentage controls their horizontal positions, while the second controls their vertical positions. The best results are likely to be had by leaving the horizontal adjustments alone, and just changing the vertical. Adjust these numbers to your liking, or replace them with the words top, bottom or center for vertical alignment, and left, right or center for horizontal.

This code, for example, moves the Next/Previous labels to the bottom of the lightbox:

#lbPrevLink:hover {
	background: transparent url(images-slimbox/prevlabel.gif) no-repeat 0% 100%;

}


	
#lbNextLink {
	right: 0;

}

	
#lbNextLink:hover {
	background: transparent url(images-slimbox/nextlabel.gif) no-repeat 100% 100%;

}

Custom Labels

Creating your own Next, Previous, Close and Loading labels is easy. Just replace the files in the images-slimbox directory with GIFs of your own creation. Open the slimbox.css file and find the #lbCloseLink selector; change the width and height values to match your new closing button.

Change Overlay & Border Colors

The Slimbox overlay defaults to black (#000), but can be changed by editing the background-color property of the #lbOverlay selector in the slimbox.css file. Set the color to anything you like.

You can also edit the colors of the border, caption area and caption text by editing the colors found in the #lbImage, #lbBottomContainer and #lbBottom selectors.

Disable Right-Click Saving

Joel Vazquez sends in a modified slimbox.js file that disables right-click saving. Overwrite the existing file in your gallery to implement.

HTML in Captions

Slimbox supports HTML in captions. To do it from Lightroom, you need to edit the captions with the following things in mind:

1. < and > need to be repaced with &lt; and &gt;, respectively.

2. Single quotes should be used in place of double quotes.

3. You’ll need to use Sean McCormack’s formatting trick, wrapping the whole thing in <ag:formatted> tags.

So, if you want this:

<a href="http://www.mydomain.com">Link</a><br />This is text.

Then you should write this in the title attribute where captions go.

<ag:formatted>&lt;a href='http://www.mydomain.com'&gt;Link&lt;/a&gt;&lt;br /&gt;This is text.</ag:formatted>

You can use this technique to format your captions, or link your images to Paypal, other pages on your site, or anywhere else you might like.

Send this article to a friend »

« Next Article | ... ... | Previous Article »