Swap image

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

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.

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

Code:

---

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.