2 ondblclick handlers to zoom-in/zoom-out images [Archive]

View Full Version : 2 ondblclick handlers to zoom-in/zoom-out images

benreynolds4

05-23-2008, 07:00 PM

hello everyone -

i am having difficulty with this one.
I want to enlarge/reduce (zoom-in/zoom-out) an image, but i don't want the classic ondblclick=enlarge and onclick=reduce i would like two instances of ondblclick=enlarge so ::::

ondblclick=enlarge
ondblclick=reduce
!!

is it even possible and what is the function script for it.
below is my code now.

-------------------------------------------------------
<SCRIPT LANGUAGE="JavaScript">
function enlargeImage1(){image1.height="600"} function dropImage1()
</script>

<img src="03_pictures/image.jpg" height="200" name="image1" onDblClick="enlargeImage1()" onClick="dropImage1()">
-------------------------------------------------------

the reason i want this is because i am trying to make my images dragable with the onclick, englarging/reducing with the dblclick and captions with the mouseover - crazy!!!

hope you can help!

ben
palacepalace.com (http://www.palacepalace.com)

binaryWeapon

05-24-2008, 04:30 AM

So double-click toggles whether it's zoomed in or zoomed out? Just call a variable every time you resize it. Then:

function enlargeImage1()
{
if(zoom=="in")
{
// exec zoom-out code
zoom="out";
}
else
{
// exec zoom-in code
zoom="in";
}
}

Zoom would be the variable which would tell the zoom "state" of the image.

benreynolds4

05-24-2008, 03:43 PM

BinaryWeapon...

yeah... double click both zooms in and out..... i've never seen it before....

how can i implement this if this is what i have...
--------------------------------------------------------
<html>
<head>


<SCRIPT LANGUAGE="JavaScript">
function enlargeImage1(){image1.height="600"} function dropImage1(){image1.height="200"}
</script>

<body>

<div id="fhphoto" class="fhphoto">
<img src="/photo.jpg" height="200" name="image1" onDblClick="enlargeImage1()" onClick="dropImage1()">
</div>

</body>
</html>
--------------------------------------------------------

should it look something like this.

--------------------------------------------------------

<html>
<head>


<SCRIPT LANGUAGE="JavaScript">
function enlargeImage1(){image1.height="600"} function dropImage1(){image1.height="200"}
</script>

<SCRIPT LANGUAGE="JavaScript">

function enlargeImage1()
{
if(zoom=="in")
{
// exec zoom-out code
zoom="out";
}
else
{
// exec zoom-in code
zoom="in";
}
}
</script>

<body>

<div id="fhphoto" class="fhphoto">
<img src="/photo.jpg" height="200" name="image1" onDblClick="enlargeImage1()" onDblClick="dropImage1()">
</div>

</body>
</html>

--------------------------------------------------------

hope you can help me out.

Ben

binaryWeapon

05-24-2008, 04:06 PM

<html>
<head>


<SCRIPT LANGUAGE="JavaScript">
if(image1.style.height="200")
{
var zoom="out";
}
else
{
var zoom="in";
}

function toggleImage1()
{
if(zoom=="in")
{
image1.height="200";
zoom="out";
}
else
{
image1.height="600";
zoom="in";
}
}
</script>

<body>

<div id="fhphoto" class="fhphoto">
<img src="/photo.jpg" height="200" name="image1" onDblClick="toggleImage1()">
</div>

</body>
</html>

benreynolds4

05-24-2008, 04:15 PM

thanks binaryWeapon....
one more thing...

i just made this for multiple images.....

-------------------
<html>
<head>


<SCRIPT LANGUAGE="JavaScript">
if(image1.style.height="200"){var zoom="out";}
else{var zoom="in";}
function toggleImage1(){if(zoom=="in"){image1.height="200";zoom="out";}
else{image1.height="600";zoom="in";}}

if(image2.style.height="200"){var zoom="out";}
else{var zoom="in";}
function toggleImage2(){if(zoom=="in"){image2.height="200";zoom="out";}
else{image2.height="600";zoom="in";}}
</script>

<body>

<div>
<img src="/photo.jpg" height="200" name="image1" onDblClick="toggleImage1()">
</div>

<div>
<img src="/photo.jpg" height="200" name="image2" onDblClick="toggleImage2()">
</div>

</body>
</html>
----------------------

is this the most efficient way?

ben
palace dot com

thanks

binaryWeapon

05-24-2008, 05:04 PM

Sorry it took me so long to reply, I was making this script:

<html>
<head>


<SCRIPT LANGUAGE="JavaScript">
var zoom="";
var zoom=new Array();

function initImg(imageObj){if(!zoom[imageObj.name] || zoom[imageObj.name]==undefined){zoom[imageObj.name]="out";}toggleImage(imageObj);}

function toggleImage(imageObj){if(zoom[imageObj.name]=="in"){imageObj.height="200";zoom[imageObj.name]="out";}
else{imageObj.height="600";zoom[imageObj.name]="in";}}
</script>

<body>

<div>
<img src="/photo.jpg" height="200" name="image1"onDblClick="initImg(this);">
</div>

<div>
<img src="/photo.jpg" height="200" name="image2" onDblClick="initImg(this);">
</div>

</body>
</html>

It only uses two javascript functions but can be used for an unlimited amount of images. You only have to put onDblClick="initImg(this);" on the images that you want to have the zoom in/out function. Make sure it has a unique name too, though.

Hope this helps.

benreynolds4

05-24-2008, 05:16 PM

awesome - you are the king!!!

thanks heaps binaryWeapon....
i have "thankyou'd" you messages!
kudos

ben