A problem with changing the onclick value.

[Milenec]

Hi,

so I was making this photo-gallery, and was using some javascript to make it look a little better, as in not having to refresh the entire page when you click on a thumbnail. I've gotten quite far with it, especially since most of it comes from google searches (I really don't know much about Javascript), but there is one thing that still isn't working, and that's the changing of the onclick value. Now I've read that this is known as a sticky situation, but I can't find a solution myself, and was hoping someone here could help me on.

This is the javascript-code:
[CODE=javascript]
<script language="javas cript" type="text/javascript">
function igGrow(id,imgst r,igw,igh,imgst r2,igw2,igh2)
{
var omg = document.getEle mentById(id);

omg.style.width = igw;
omg.style.heigh t = igh;
omg.style.backg roundImage = imgstr;
omg.onclick = Function('igShr ink("' + id + ',' + imgstr + ',' + igw + ',' + igh + ',' + imgstr2 + ',' + igw2 + ',' + igh2 + '")');

}
function igShrink(id,img str,igw,igh,img str2,igw2,igh2)
{
var omg = document.getEle mentById(id);

omg.style.width = igw2;
omg.style.heigh t = igh2;
omg.style.backg roundImage = imgstr2;
omg.onclick = Function('igGro w("' + id + ',' + imgstr + ',' + igw + ',' + igh + ',' + imgstr2 + ',' + igw2 + ',' + igh2 + '")');

}
</script>
[/CODE]
And this is how it looks like in the HTML:
[HTML]<a href="#x" onclick="igGrow ('imgid1','url( ./myrtle/1.jpg)','500px' ,'333px','url(./myrtle/tmb/1.jpg)','106px' ,'70px')" style="position :relative;displ ay:block;width: 106px;height:70 px;background-image:url(./myrtle/tmb/1.jpg)" id="imgid1" class="img"></a>[/HTML]

What it does now, is that when you click on a thumbnail, it enlarges into the image. What it's supposed to do also, but that part isn't working, is that when you click on the now larger image, it should make it smaller again.

You can still see an example online with my old code. But there you have to single click to open, and double click to close, and it uses all inline-javascript, making the filesize simply huge.

I would really appreciate all the help I could get.

Niels

[Markus]

I would, in your igGrow() method, grab the original height and width values and assign them to a couple of suitably named variables (origY, origX, or something). Then, in the .onclick in your igGrow, pass the original height and width values as parameters.

<script language="javascript" type="text/javascript">
function igGrow(id,imgstr,igw,igh,imgstr2,igw2,igh2)
{
var omg = document.getElementById(id);
var origY = omg.style.height;
var origX = omg.style.width;

omg.style.width = igw;
omg.style.height = igh;
omg.style.backgroundImage = imgstr;
omg.onclick = Function('igShrink(id, imgstr, igw, igh, imgstr2, igw2, igh2, origY, origX)');
 
}
function igShrink(id,imgstr,igw,igh,imgstr2,igw2,igh2, origY, origX)
{
var omg = document.getElementById(id);

// here comes the realisation... *

omg.style.width = igw2;
omg.style.height = igh2;
omg.style.backgroundImage = imgstr2;
omg.onclick = Function('igGrow("' + id + ',' + imgstr + ',' + igw + ',' + igh + ',' + imgstr2 + ',' + igw2 + ',' + igh2 + '")');
 
}
</script>

OK, nevermind, I see you're already doing that. Silly me.

[Markus]

What happens when you do click on the larger image? Do you get any errors?

[Milenec]

What happens when you do click on the larger image? Do you get any errors?

The only error that I get with firefox's error console is "omg is null"...

[Markus]

alert() yourself the value of the id you are passing, to make sure it's the correct value.

I'm not an expert with javascript, so you may have to wait 'till one shows up.

Markus.

[Milenec]

Ok, so when I use [CODE=javascript]omg.onclick = alert('igShrink ("' + id + ',' + imgstr + ',' + igw + ',' + igh + ',' + imgstr2 + ',' + igw2 + ',' + igh2 + '")'); [/CODE] it returns the right variables. Only, it already gives the alert box the first time I click an image (when I'm enlarging it), instead of when I would click it again, to shrink it again... I'm not sure it's supposed to be like that.

EDIT:

I was trying all kinds of different things, and suddenly it worked. I have no clue why, but this is the actual working code:

<script language="javascript" type="text/javascript">
function igGrow(id,imgstr,igw,igh,imgstra,igwa,igha)
{
var omg = document.getElementById(id);

omg.style.width = igw;
omg.style.height = igh;
omg.style.backgroundImage = imgstr;
omg.onclick = function() {
igShrink(id,imgstr,igw,igh,imgstra,igwa,igha);
}
}

function igShrink(id,imgstr,igw,igh,imgstra,igwa,igha) 
{
	var omg = document.getElementById(id);
	omg.style.width = igwa;
	omg.style.height = igha;
	omg.style.backgroundImage = imgstra;
	omg.onclick = function() {
	igGrow(id,imgstr,igw,igh,imgstra,igwa,igha);
}
}
</script>

Thanks for the help, especially that tip about checking with an alert box, cause that's the one that ended up working. By piece by piece changing the alert() into a function() :D

[Markus]

Ok, so when I use [CODE=javascript]omg.onclick = alert('igShrink ("' + id + ',' + imgstr + ',' + igw + ',' + igh + ',' + imgstr2 + ',' + igw2 + ',' + igh2 + '")'); [/CODE] it returns the right variables. Only, it already gives the alert box the first time I click an image (when I'm enlarging it), instead of when I would click it again, to shrink it again... I'm not sure it's supposed to be like that.

EDIT:

I was trying all kinds of different things, and suddenly it worked. I have no clue why, but this is the actual working code:

<script language="javascript" type="text/javascript">
function igGrow(id,imgstr,igw,igh,imgstra,igwa,igha)
{
var omg = document.getElementById(id);

omg.style.width = igw;
omg.style.height = igh;
omg.style.backgroundImage = imgstr;
omg.onclick = function() {
igShrink(id,imgstr,igw,igh,imgstra,igwa,igha);
}
}

function igShrink(id,imgstr,igw,igh,imgstra,igwa,igha) 
{
	var omg = document.getElementById(id);
	omg.style.width = igwa;
	omg.style.height = igha;
	omg.style.backgroundImage = imgstra;
	omg.onclick = function() {
	igGrow(id,imgstr,igw,igh,imgstra,igwa,igha);
}
}
</script>

Thanks for the help, especially that tip about checking with an alert box, cause that's the one that ended up working. By piece by piece changing the alert() into a function() :D

Ah, no problem. You've formatted it a bit nicer and removed all those ugly, confusing quotation marks. Maybe that's why it didn't work? Who knows.

Good day.

[acoder]

The reason why it now works and didn't earlier is that you need to assign a function object to onclick, not a function result. If you just call the function when assigning to to onclick, it will run the function and assign the return value to the onclick. The Function syntax requires the new operator.

See An Introduction to Function Objects for more information.