Question

Here is a jQuery code that I am using to expand a photo, as it expands I want to replace the thumbnail version of the image to the original sized version.

$('img.photo_share_image').click(function() {
var new_image = $(this).replace(/thumb_/ig, $(this).attr("src"));
$(this).animate({width:'100%'},500);
})

The original image is put onto the page by the HTML tag. It is sourced from http://www.example.com/thumb_someimage.jpg what I need to do is remove the thumb_ from the source url.

I have already tried this by using this code

var new_image = $(this).replace(/thumb_/ig, $(this).attr("src"));

but it didn’t work. Any suggestions?

Answer 1

use this

var new_image = $(this).attr('src', $(this).attr('src').replace(/thumb_/ig, ""));

Moreover, you may want to wait for your image to finish loading if it’s a big one because your animation will start right after you assign a new source for your image. So, animation will not necessarily wait for it but work on the existing image DOM element.