Image Zoom Script

[srowland98]

How would one get a hold of this script for their own use? Or if anyone knows a similar one that can be used for SMF then that works too.

[Dusty]

I think he wants one for his forums.
I'm sure they'd be willing to share. Originally the script came from someone on the old pixelation that introduced the idea and script to the forums and it got implemented shortly thereafter.

Seeing as the guy who made it released it freely, I don't think the staff here would be too reluctant to share(unless they recoded it themselves and don't want to).

[ptoing]

Yeh we can give it to you. AdamAtomic knows the specifics, I will point him this way.

[AdamAtomic]

Insert this at around line 150 of Themes/YourTheme/index.template.php:

Code: [Select]


var zoomClass = "zoom";
var normalWidth = new Array();
var normalHeight = new Array();
var getZoom = new Array();

function initZoom() {

// Find all IMG tags of the zoom class

var allImgs = new Array();
allImgs = document.body.getElementsByTagName("IMG");
for ( i = 0; i < allImgs.length; i++ ) {
if (allImgs[i].className.toLowerCase() == zoomClass.toLowerCase())
getZoom[getZoom.length] = allImgs[i];
} // next i


// Go through all images marked zoomable

for (i=0; i < getZoom.length; i++) {

// Save and initiate the original height

normalWidth[i] = getZoom[i].width;
normalHeight[i] = getZoom[i].height;

getZoom[i].width = normalWidth[i]; // DHTML is funny sometimes :(
getZoom[i].height = normalHeight[i];

// add the click event, stupid cross-browser bullshit

if (document.addEventListener) {
getZoom[i].addEventListener("click", zoomImg, false);
} else {
getZoom[i].onclick = zoomImg;
} // end if
}  // next i

} // end initZoom


function zoomImg(e) {

// Determine which keys are pressed (more cross-browser bullshit)

if (e) {
ctrlPress = e.ctrlKey;
shiftPress = e.shiftKey;
altPress = e.altKey;
} else {
ctrlPress = event.ctrlKey;
shiftPress = event.shiftKey;
altPress = event.altKey;
} // end if


// Get the index of the clicked image

for (i=0;i<getZoom.length;i++) {
if (this == getZoom[i]) imgToZoom = i;
} // next i

if (altPress) { // return image to original dimensions

getZoom[imgToZoom].width = normalWidth[imgToZoom];
getZoom[imgToZoom].height = normalHeight[imgToZoom];

} else if (ctrlPress || shiftPress) { // zoom out

if (getZoom[imgToZoom].width > normalWidth[imgToZoom]) {
getZoom[imgToZoom].width -= normalWidth[imgToZoom];
getZoom[imgToZoom].height -= normalHeight[imgToZoom];
} // end if

} else { // zoom in

getZoom[imgToZoom].width += normalWidth[imgToZoom];
getZoom[imgToZoom].height += normalHeight[imgToZoom];

} // end if


} // end zoomImg

window.onload = initZoom;

// --></script>


Then, in Source/Subs.php, make sure you change your img tag replacements to include class="zoom", otherwise it won't know to zoom em.  Good luck!

[srowland98]

Cool, Thanks a lot!