Yesterday I mentioned that I had just introduced the WOW-slider to my Photo Dharma website. From a developer’s point of view there is one big drawback with it, which is that you must fix the size of the photo first (e.g. 800px x 600px). The problem with that is we don’t know the size of the browser window people will be using, so it may be too small, or too big.
To get round that problem I wrote a new and fairly simple function, which first looks at the viewport, and then resizes the photograph to find the best fit for the screen. This is the javascript code for it, which I have annotated in the hope that it may help someone else.
Note that the script will only work if all the photos are the same aspect ratio. The ratio presumed here is 4×3 (1.33:1). The code can be adjusted for other ratios easy enough.
unction getViewport() {
// set aspect ratios here
var lengthRatio = 2.12 // i.e 212 divided by 100
var widthRatio = .4717 // i.e 100 divided by 212
// leave this as it is
var viewPortHeight;
var viewPortWidth;
// first get viewport width and height
if (typeof window.innerWidth != 'undefined') {
viewPortHeight = window.innerHeight;
viewPortWidth = window.innerWidth;
// working with the aspect ratio (here 2.12:1) work out whether
// it is better to work with the width or height
if (viewPortHeight * lengthRatio < viewPortWidth) {
// if height if better, give a small margin at the bottom (here -30)
viewPortHeight = window.innerHeight - 30;
viewPortWidth = viewPortHeight * lengthRatio;
// updates some styles and center it, I don't know why but setting left and right to auto doesn't work
document.getElementById('wowslider-container').style.position = "absolute";
document.getElementById('wowslider-container').style.left = "7.5%";
document.getElementById('wowslider-container').style.right = "7.5%";
} else {
// if width is better
viewPortWidth = window.innerWidth;
viewPortHeight = viewPortWidth * widthRatio;
// updates some styles and center it
document.getElementById('wowslider-container').style.position = "absolute";
document.getElementById('wowslider-container').style.left = "0";
}
// update the sizes, position and visibility now
document.getElementById('wowslider-container').style.height = viewPortHeight + "px";
document.getElementById('wowslider-container').style.width = viewPortWidth + "px";
document.getElementById('wowslider-container').style.visibility = "visible";
}
}
It is then possible to run the function with a call from body onload:
<body onload="getViewport()">
Examples can be seen here (click on Play Moving Slideshow):
another implementation which is particularly effective is on wide angle landscapes like these:
where the ratio of the photographs is 212:100
I hope this will help someone else out there who is grappling with the same problem.