Big flaw in my image expand/original size toggle script help...

[Minimeallolla]

I have come across a script that sets all images by default to 75x75pixels and clicking toggles between original size and back to 75x75px only problem is each image is in the "a.image-expand img" class. therefor when one image is expanded they all expand.. -.- any way to only expand selected image?

 

$(document).ready(function(){
	// default width and height to 75px
	$("a.image-expand img").css({'height':'75px', 'width':'75px'});

	// Click function (toggle)
	$("a.image-expand").click(function(){
		if(($("a.image-expand img").css("height") == "75px") && ($("a.image-expand img").css("height") == "75px"))
		{
			$("a.image-expand img").css({'height':'auto', 'width':'auto'});
		}
		else
		{
			$("a.image-expand img").css({'height':'75px', 'width':'75px'});
		}
	});
});

[gristoi]

you need to use the Jquery

each()

function

 

http://api.jquery.com/jQuery.each/

 

this will seperate each of the unique instances of the same class into their own objects

[Minimeallolla]

Here is the working script if anybody ever wants it.  (all codes shown are vital for a working code)

 

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

<a class="image-expand" style="cursor: pointer" onclick="toggleSize(this)">
	<img src="Pics/roflcopter.gif" />

$(document).ready(function(){
	// default width and height to 75px
	$("a.image-expand img").css({'height':'75px', 'width':'75px'});
});

function toggleSize(_var_)
{
	image = $(_var_).children("img");

	if(($(image).css("height") == "75px") && ($(image).css("height") == "75px"))
	{
		$(image).css({'height':'auto', 'width':'auto'});
	}
	else
	{
		$(image).css({'height':'75px', 'width':'75px'});
	}
}