I followed the instructions in the Wiki for putting the main image and thumbnails on the same page, using JavaScript to swap in the different images.
However, what was happening was, if the main images were different sizes, the script was resizing the currently displayed image to the size of the new image, then loading in the new image. This was causing a momentary distortion to appear, which my client took exception to (as did I).
So, I got my JavaScript buddy to knock up the following, which I’m posting here in case anyone is having the same issue.
<script type="text/javascript">
function showPic(url,title,descr,width,height) {
var img = document.getElementById('maxImage');
var titleHolder = document.getElementById('maxTitle');
var descrHolder = document.getElementById('maxDescr');
var newImg = new Image();
newImg.onLoad = doImage(img,url,width,height);
if (titleHolder != null) {
for (var i = 0; i < titleHolder.childNodes.length; i++) {
titleHolder.removeChild(titleHolder.childNodes[i]);
};
if (title != "") {
var node=document.createTextNode(title);
}
else {
var node=document.createTextNode("");
}
titleHolder.appendChild(node);
}
if (descrHolder != null) {
for (var i = 0; i < descrHolder.childNodes.length; i++) {
descrHolder.removeChild(descrHolder.childNodes[i]);
};
if (descr != "") {
var node=document.createTextNode(descr);
}
else {
var node=document.createTextNode("");
}
descrHolder.appendChild(node);
}
}
function doImage(img,url,width,height)
{
img.src=url;
}
</script>
Just replace the code in the mgJs chunk with the code above and all will be well!
Hope this helps someone,
Andrew
