[RESOLVED] Image scale onclick

This site is best viewed in a modern browser with JavaScript enabled.

Suresure

I never get any better - I’m sorry. I’ve hunted around and can’t find this covered on here. It used to be bad practice to resize an image with code but SVG files render beautifully at any scale and I’d like to try this out.

I’d like to have a series of images, each one doubling in scale when clicked then returning to its original size when clicked a second time.

Could I use transform: scale(2) somewhere in there to make it extra streamlined?

Thanks for your help!

Suresure

This thread almost has what I was after: http://www.webdeveloper.com/forum/showthread.php?p=663467 -

<script type="text/javascript">
function toggle(it) {
  if (it.width == 200)
    {it.width = 600;}
  else
    {it.width = 200;}
}
</script>

then

<img src="example.svg" onclick="toggle(this)"/>

but is there a tidy way to switch that 200 for original-size, and that 600 for double-size - I can't just smash in scale(2)... sorry for being so clumsy with this...

Padonak

i'm not sure that i understood your question good but try this anyway

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>123</title>
<style type="text/css">
body{text-align:center;font-family:Verdana,Arial;font-size:11px;background-color:#fff;color:#000;padding:0px;margin:15&#37; 0px 0px 0px;}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#imgs img').click(function(){
var wd=$(this).width();
if(!$(this).hasClass('maximized')){$(this).animate({'width':wd*2+'px','margin-top':'-'+wd/2+'px'},'normal',function(){$(this).addClass('maximized');});}
else{$(this).animate({'width':wd/2+'px','margin-top':'0px'},'normal',function(){$(this).removeClass('maximized');});}
});
});
</script>
</head>
<body>
<div id="imgs"><img src="http://www.bogotobogo.com/svg_source/svgclock.svg" alt="" width="200" /><div>
</body>
</html>

Suresure

Thanks for that! It's a good effect but maybe too complicated? I'm looking at something like this (using that same example SVG):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script type="text/javascript">
function toggle(it) {
  if (it.width == 200)
    {it.width = 600;}
  else
    {it.width = 200;}
}
</script>
</head>
<body>
<img src="http://www.bogotobogo.com/svg_source/svgclock.svg" onclick="toggle(this)"/>
</body>
</html>

but need to learn how to switch those specified sizes with a more abstract 'original' size and 'double original' size...

Nemesis02

What you may want to do if you want to double the size or half the size is as follows.

function toggle(it) {
	if (it.class.match(/enlarged/) === null) {
		it.class += " enlarged";
		it.width = it.width * 2;
		it.height = it.height * 2;
	} else {
		it.class = it.class.replace(/\senlarged/,"");
		it.width = it.width / 2;
		it.height = it.height / 2;
	}
}

Suresure

Thanks for that Nemesis - but pasting it over the original script means nothing's happening when I click the image - I know I'm missing something... but what?

Nemesis02

try just using toggle() instead of toggle(this) and then at the toggle function add an alert to see if it triggers. You can use Chrome's web developer tools to debug your code to see whether or not the code is triggered. Just navigate to your script under the script tab, put a break point on the first line of your function and click your image. If it works, it'll break and you can step through the code.

Suresure

Ah, thanks for your patience - I'm sorry, I'm way below this level of knowledge - I've no experience of debugging with Chrome, having a look for the first time now but it's 4 in the morning here and I'm a bit fuzzy. I'll look on tomorrow, unless there's an obvious problem or an alternative solution you could highlight for me? Thanks again... I'm sorry for being so needy...

Suresure

Thanks again for your patience - I'm getting:

Uncaught TypeError: Cannot call method 'match' of undefined (repeated 6 times)
Uncaught TypeError: Cannot read property 'class' of undefined (repeated 14 times)

right underneath:

if (it.class.match(/enlarged/) === null) {

Can that be fixed? Here's the code as it exists:

http://www.suresure.co.uk/Temp/BM1.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        <title></title>
        <style type="text/css">
            img{
cursor: pointer;
            }
        </style>
<script type="text/javascript">
function toggle(it) {
	if (it.class.match(/enlarged/) === null) {
		it.class += " enlarged";
		it.width = it.width * 2;
		it.height = it.height * 2;
	} else {
		it.class = it.class.replace(/\senlarged/,"");
		it.width = it.width / 2;
		it.height = it.height / 2;
	}
}
</script>
    </head>
    <body>
            <img src="biscuitman.svg" onclick="toggle(this)"/>
            <img src="biscuitman.svg" onclick="toggle()"/>
    </body>
</html>

Nemesis02

Im sorry that's my fault, change all the references of it to this and see what happens

Suresure

Like this?:

http://www.suresure.co.uk/Temp/BM2.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        <title></title>
        <style type="text/css">
            img:hover{
cursor: pointer;
            }
        </style>
<script type="text/javascript">
function toggle(this) {
	if (this.class.match(/enlarged/) === null) {
		this.class += " enlarged";
		this.width = this.width * 2;
		this.height = this.height * 2;
	} else {
		this.class = this.class.replace(/\senlarged/,"");
		this.width = this.width / 2;
		this.height = this.height / 2;
	}
}
</script>
    </head>
    <body>
            <img src="biscuitman.svg" onclick="toggle(this)"/>
            <img src="biscuitman.svg" onclick="toggle()"/>
    </body>
</html>

Hmm - it's not happy - something about:

function toggle(this) {

Sorry Nemesis, I wish I could read this properly - really grateful for your help.

Nemesis02

Well I'll need an exact error from the debugger to help here, try to remove this as a parameter to toggle cause you maybe overwriting the object. When a function is triggered by event like on click, you have access to the this variable anywhere in the called function.the other thing you could try is adding return true to the end of the function.

Suresure

Thanks for the speed -

return true;

doesn't seem to change anything... I'm in so far over my head. Chrome just has undefined (repeated 0 times) under that function toggle (this) line - Dreamweaver (sorry) suggests it contains a syntax error.

http://www.suresure.co.uk/Temp/Screen%20shot%202012-06-16%20at%2015.31.43.png

Removing 'this' maybe helps something along:

<script type="text/javascript">
function toggle() {
	if (this.class.match(/enlarged/) === null) {
		this.class += " enlarged";
		this.width = this.width * 2;
		this.height = this.height * 2;
	} else {
		this.class = this.class.replace(/\senlarged/,"");
		this.width = this.width / 2;
		this.height = this.height / 2;
	}
	return true;
}
</script>
    </head>
    <body>
            <img src="biscuitman.svg" onclick="toggle(this)"/>
            <img src="biscuitman.svg" onclick="toggle()"/>
    </body>

only now Chrome has Uncaught TypeError: Cannot call method 'match' of undefined right underneath

if (this.class.match(/enlarged/) === null) {

Nemesis02

Easy enough to fix lol, add this.class !== undefined to the beginning of the if statement as the first condition, if that one fails it shouldn't go on to the next one. It should look like

if (this.class !== undefined && this.class.match(/enlarged/) === null) {

Suresure

No! Ha! This must be getting close though, right?

http://www.suresure.co.uk/Temp/BM3.html

I now have this:

Uncaught TypeError: Cannot call method 'replace' of undefined (repeated 2 times)

underneath this:

this.class = this.class.replace(/\senlarged/,"");

Thanks for sticking with this...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        <title></title>
        <style type="text/css">
            img:hover{
cursor: pointer;
            }
        </style>
<script type="text/javascript">
function toggle() {
	if (this.class !== undefined && this.class.match(/enlarged/) === null) {
		this.class += " enlarged";
		this.width = this.width * 2;
		this.height = this.height * 2;
	} else {
		this.class = this.class.replace(/\senlarged/,"");
		this.width = this.width / 2;
		this.height = this.height / 2;
	}
	return true;
}
</script>
    </head>
    <body>
            <img src="biscuitman.svg" onclick="toggle(this)"/>
            <img src="biscuitman.svg" onclick="toggle()"/>
    </body>
</html>

Nemesis02

Ok, had to switch over to my laptop, can't debug stuff from my phone lol.

This should work for you.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- saved from url=(0039)http://www.suresure.co.uk/Temp/BM3.html -->
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <title></title>
    <style type="text/css">
        img:hover{
cursor: pointer;
            }
        </style>
<script type="text/javascript">
function toggle(el) {
	if (el.class === undefined) {
		el.class = "";
	}
	if (el.class !== undefined && el.class.match(/enlarged/) === null) {
		el.class += " enlarged";
		el.width = el.width * 2;
		el.height = el.height * 2;
	} else {
		el.class = el.class.replace(/\senlarged/,"");
		el.width = el.width / 2;
		el.height = el.height / 2;
	}
	return true;
}
</script>
    <style type="text/css"></style></head>
    <body>
            <img src="./BM3_files/biscuitman.svg" onclick="toggle(this)">
            <img src="./BM3_files/biscuitman.svg" onclick="toggle(this)">

</body><link rel="stylesheet" type="text/css" href="data:text/css,"></html>

Suresure

IT WORKS! Ha! Genius - thanks so much! I've dropped the el.height = el.height lines - it distorts some of the spacing, but that's a really lovely, clean bit of code. Thanks a lot - can't believe you were answering from your phone - cheers !

Nemesis02

You can actually use this,

function toggle(el) {
	if (el.class === undefined) {
		el.class = "";
	}
	if (el.class.match(/enlarged/) === null) {
		el.class += " enlarged";
		el.width = el.width * 2;
		el.height = el.height * 2;
	} else {
		el.class = el.class.replace(/\senlarged/,"");
		el.width = el.width / 2;
		el.height = el.height / 2;
	}
	return true;
}

Having that el.class !== undefined is redundant since you check it in the line before.

Suresure

Thanks - that's extra nice! I'll show you when I get the content in place. Thanks again!