/* * These values define the margin between your image and the navigation and or a left block. * Change to your suites. */ var marginLeft = 100; var marginTop = 275; /* * Don't touch * Here are the dimensions of the original image */ var imagewidth = 163; var imageheight = 121; var imageratio = imagewidth/imageheight; /* * Get the window width. NS and IE use different methods */ function windowWidth() { if (window.innerWidth) { return window.innerWidth; } else if (document.documentElement.clientWidth) { return document.documentElement.clientWidth; } else { return document.body.clientWidth; } } /* * Get the window height. NS and IE use different methods */ function windowHeight() { if (window.innerHeight) { return window.innerHeight; } else if (document.documentElement.clientHeight) { return document.documentElement.clientHeight; } else { return document.body.clientHeight; } } /* * We load this in the header, so the page is not fully rendered. * save the windowdimensions. */ function calculateNewSize(){ windowWidth = windowWidth(); windowHeight= windowHeight(); newwidth = imagewidth; newheight = imageheight; if ( imagewidth > (windowWidth - marginLeft)) { newwidth = windowWidth - marginLeft; newheight = parseInt(newwidth / imageratio); } if ( newheight > (windowHeight - marginTop)) { newheight = windowHeight - marginTop; newwidth = parseInt( newheight * imageratio); } setReducedSize(); } function setReducedSize() { document.getElementById('galleryImage').height = newheight; document.getElementById('galleryImage').width = newwidth; if (document.getElementById('frameRR')) { document.getElementById('frameRR').style.height = newheight + 'px'; document.getElementById('frameLL').style.height = newheight + 'px'; } if (document.getElementById('galleryImageFrame')) { document.getElementById('galleryImageFrame').style.height = newheight + 'px'; document.getElementById('galleryImageFrame').style.width = newwidth + 'px'; } } function sizeChange() { this.full = false; this.toggle = function toggle() { if (this.full == true) { setReducedSize(); this.full = false; } else { document.getElementById('galleryImage').height = imageheight; document.getElementById('galleryImage').width = imagewidth; if (document.getElementById('frameRR')) { document.getElementById('frameRR').style.height = imageheight + 'px'; document.getElementById('frameLL').style.height = imageheight + 'px'; } if (document.getElementById('galleryImageFrame')) { document.getElementById('galleryImageFrame').style.height = imageheight + 'px'; document.getElementById('galleryImageFrame').style.width = imagewidth + 'px'; } this.full = true; } } } sizeChange = new sizeChange();