[RESOLVED] Image scale onclick

**Suresure** · 06-14-2012 07:29 AM

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** · 06-15-2012 02:47 PM

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

Code:

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

then

Code:

<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** · 06-15-2012 03:24 PM

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

Code:

<!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** · 06-15-2012 07:03 PM

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

Code:

<!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** · 06-15-2012 08:01 PM

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

Code:

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** · 06-15-2012 10:26 PM

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** · 06-15-2012 10:30 PM

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** · 06-15-2012 10:48 PM

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** · 06-16-2012 07:45 AM

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:

Code:

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

Code:

<!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** · 06-16-2012 08:41 AM

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

**Suresure** · 06-16-2012 08:53 AM

Like this?:

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

Code:

<!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:

Code:

function toggle(this) {

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

**Nemesis02** · 06-16-2012 08:59 AM

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** · 06-16-2012 09:37 AM

Thanks for the speed -

Code:

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:

Code:

<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

Code:

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

**Nemesis02** · 06-16-2012 09:44 AM

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** · 06-16-2012 09:56 AM

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:

Code:

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

Thanks for sticking with this...

Code:

<!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>

Thread: [RESOLVED] Image scale onclick

Thread Tools

Display

[RESOLVED] Image scale onclick

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions