Closed Thread Icon

Topic awaiting preservation: Image zoom script help... Pages that link to <a href="https://ozoneasylum.com/backlink?for=26611" title="Pages that link to Topic awaiting preservation: Image zoom script help..." rel="nofollow" >Topic awaiting preservation: Image zoom script help...\

 
Author Thread
Ensellitis
Bipolar (III) Inmate

From: Kansas City, MO , USA
Insane since: Feb 2002

posted posted 09-09-2005 07:20

Hopefully this is a easy fix... I have this script that makes any image with the class tag of zoom the ability to be zoomed by clicks:

code:
function findDOM(objectId) {
	if (document.getElementById) {
		return (document.getElementById(objectId));}
	if (document.all) {
		return (document.all[objectId]);}
}

function zoom(type,imgx,iWidthIn,iHeightIn) {
	imgd = findDOM(imgx);

	if (type=="+" && imgd.width >= iWidthIn) {
		imgd.width = 2*imgd.width;
		imgd.height = 2*imgd.height;
	}
	if (type=="-" && imgd.width > iWidthIn) {
		imgd.width = imgd.width/2;
		imgd.height = imgd.height/2;
	}
} 

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

function initZoom() {

	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];
	}
	for (i=0; i < getZoom.length; i++) {

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

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

	}

}


function zoomImg(e) {

	if (e) {
		ctrlPress = e.ctrlKey;
		shiftPress = e.shiftKey;
		altPress = e.altKey;
	} else {
		ctrlPress = event.ctrlKey;
		shiftPress = event.shiftKey;
		altPress = event.altKey;
	}
	for (i=0;i<getZoom.length;i++) {
		if (this == getZoom[i])	imgToZoom = i;
	}
	if (altPress) {
		getZoom[imgToZoom].width = normalWidth[imgToZoom];
		getZoom[imgToZoom].height = normalHeight[imgToZoom];
	} else if (ctrlPress || shiftPress) {
		if (getZoom[imgToZoom].width > normalWidth[imgToZoom]) {
			getZoom[imgToZoom].width -= normalWidth[imgToZoom];
			getZoom[imgToZoom].height -= normalHeight[imgToZoom];
		}
	} else {
		getZoom[imgToZoom].width += normalWidth[imgToZoom];
		getZoom[imgToZoom].height += normalHeight[imgToZoom];
	}
}



Now, my problem is that once it gets to the edge of the container it's in, in starts to only grow horizontally. Is there a way to make it either go outside of those boundries and keep getting bigger, or maybe even float above everything?

Slime
Lunatic (VI) Mad Scientist

From: Massachusetts, USA
Insane since: Mar 2000

posted posted 09-22-2005 22:32

You could try giving it position:relative.

Could we see a (not) working example?


 

bitdamaged
Maniac (V) Mad Scientist

From: 100101010011 <-- right about here
Insane since: Mar 2000

posted posted 09-23-2005 01:21

Um this is a bit wierd.

First just to make this:
getZoom[getZoom.length] = allImgs[i];

this:
getZoom.push(allImgs[i]);

Also confused here:
normalWidth[i] = getZoom[i].width;
normalHeight[i] = getZoom[i].height;
getZoom[i].width = normalWidth[i];
getZoom[i].height = normalHeight[i];

That's just setting the same thing twice.

The zoom function is never getting called from as far as I can tell.

Honestly I'm a bit confused here.



.:[ Never resist a perfect moment ]:.

Ensellitis
Bipolar (III) Inmate

From: Kansas City, MO , USA
Insane since: Feb 2002

posted posted 09-23-2005 08:48

Here is the example: http://www.ensellitis.com/index.php?p=197

I'm going to try setting it to relative now

EDIT Didn't work



(Edited by Ensellitis on 09-23-2005 08:51)

Slime
Lunatic (VI) Mad Scientist

From: Massachusetts, USA
Insane since: Mar 2000

posted posted 09-23-2005 09:23

Right, I don't know why I thought position:relative would work. It shouldn't.

To make it float above everything, it should be possible to enclose the image in a containing DIV (this can be done automatically with the DOM), set the containing DIV to position:relative and the image to position:absolute. Then you have to modify the image's top and left properties to keep it centered when resizing. However, this will make it float over the text too, and I'm not sure that'd be a good thing. I don't think there's a way to make it hover over the edges of the containing element without also hovering over the text.


 

Skaarjj
Maniac (V) Mad Scientist

From: :morF
Insane since: May 2000

posted posted 09-23-2005 14:19

unless you put the text, as well, inside the containing DIV, possibly placing it inside its own DIV to keep it the same width constantly.


Justice 4 Pat Richard

« BackwardsOnwards »

Show Forum Drop Down Menu