I am setting up a MooTools slideshow comprising the show itself, thumbnails and a lightbox (using SlimBox). So far I've got everything to work properly, apart from the image dimensions in the slideshow itself.

The site is going to show photographs, so naturally some images are landscape and some portrait. Unfortunately I only seem to be able to set one set of dimensions for the slideshow (currently they're fine for landscape images, but crop portrait images).

How can I include some code which changes the format of the show when it gets to a portrait image?

At present the JavaScript is:

window.addEvent('domready', function(){
var slideshowData = {
'1.jpg': { caption: 'Warren Street Steps.' },
'2.jpg': { caption: 'Warren Street Escalators.' },
'3.jpg': { caption: 'Westminster.' },
'4.jpg': { caption: 'Chalk Farm.' },
'5.jpg': { caption: 'Great Portland Street.' },

var slimboxData = [
['images/1.jpg', 'Warren Street Steps.' ],
['images/2.jpg', 'Warren Street Escalators.' ],
['images/3.jpg', 'Westminster.' ],
['images/4.jpg', 'Chalk Farm.' ],
['images/5.jpg', 'Great Portland Street.' ]

var myShow = new Slideshow('show', slideshowData, {controller: true, fast: 1, hu: 'images/', thumbnails: true});

$$('.slideshow-images a').addEvent('click', function(){

var n = (myShow.slide - 1 + myShow.data.images.length) % myShow.data.images.length;
Slimbox.open(slimboxData, n);

$$('#lbOverlay, #lbCloseLink').addEvent('click', function(){


$$('#lbPrevLink').addEvent('click', myShow.prev.bind(myShow));
$$('#lbNextLink').addEvent('click', myShow.next.bind(myShow));

Any help would be much appreciated,