Question

I need to duplicate the image file and add it after with making a slight change to the file name.

The problem I am having is the var does not change with each image. This will have to run for many more images so I have to find a way to update the var for each image.

<a class="slashc-img-zoom-pan">
<img src="/v/vspfiles/photos/hk01344-1478-1.jpg">
</a>
<a class="slashc-img-zoom-pan">
<img src="/v/vspfiles/photos/sc-00342-1.jpg">
</a>
<a class="slashc-img-zoom-pan">
<img src="/v/vspfiles/photos/bs-0034-534-1.jpg">
</a>

<script>
$('a img').each(function() {
var image_sku = $("a").html().split("-1.jpg")[0];
$(this).after(image_sku + '-2.jpg" >');
});
</script>

The outcome is suppose to look like this:

<a class="slashc-img-zoom-pan">
<img src="/v/vspfiles/photos/hk01344-1478-1.jpg">
<img src="/v/vspfiles/photos/hk01344-1478-2.jpg">
</a>
<a class="slashc-img-zoom-pan">
<img src="/v/vspfiles/photos/sc-00342-1.jpg">
<img src="/v/vspfiles/photos/sc-00342-2.jpg">
</a>
<a class="slashc-img-zoom-pan">
<img src="/v/vspfiles/photos/bs-0034-534-1.jpg">
<img src="/v/vspfiles/photos/bs-0034-534-2.jpg">
</a>

Answer 1

This does it with jQuery.

$('a.slashc-img-zoom-pan img:eq(0)').each(function(){
    var src = $(this).attr('src');
    var src2 = src.replace('-1.jpg','-2.jpg');
    $('<img src="' + src2 +'" >').appendTo('a.slashc-img-zoom-pan');
});

http://jsfiddle.net/jasongennaro/TUzNF/3/

Explanation:

1. get the first instance of the img (necessary, since you will be creating a second)
2. grab the src text
3. replace the end bit
4. add it back to the parent a