Swap image

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

zebedeee

Hi all,

I have a row of thumbnails and when you click on one thumbnail I need it to open the larger version and display that in another div.

Here is my code:-

$('#thumbs img').live('click', function(){
   $('#largeImage').attr('src',$(this).attr('src').replace('46x57','199x319'));
});

The trouble is the images are being called from Wordpress and if I change the settings so the images are not cropped to exact size (which is what I need) then the height of the image generated by Wordpress is different.

So I need a way of changing the last part of line to .replace('46x','199x')

The * (Astrix) will allow that part of the file name to be any number.

Any ideas?

I hope I explained correct but any questions please let me know.

Thank you kind people.

ReFreezed

The following code will convert the height of thumbnail to the large image's height more dynamically.

var sizes = {57:319, 76:365, 99:385}; // 57=thumb height, 319=corresponding large image height etc.
$('#thumbs img').live('click', function(){
	$('#largeImage').attr('src',$(this).attr('src').replace(/46x([\d]+)/,function(match,thumbHeight){
		// use the size in "sizes" if it exists, else use the same height as the thumb
		return '199x'+(sizes[thumbHeight] || thumbHeight);
	}));
});

Maybe you'd want to fetch or calculate the large image height in some other way, but this is how you can use regular expressions to change the image url.