duplicate image with slightly different name

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>

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

Try this:

$('a.slashc-img-zoom-pan img').each(function() {
    var $this = $(this);
    var image_sku = $this.attr('src').split('-1.jpg')[0];
    $this.after('<img src="' + image_sku + '-2.jpg">');
});

Try this:
var x = 1;
function CreateImage(){
var img = new Image(1,1); // width, height values are optional params 
img.src = '/v/vspfiles/photos/hk01344-1478-'+x;
x = x+1;
img_id.innerHTML += "<br/>";
img_id.innerHTML += img ;
}

assign and id to anchor tag, and then call this function on the event you want to create image

Use whatever programming language you have available to you's loop functionality. For example, in PHP you could do this:

<?php
for($i=1;$i<41;$i++) {
    echo '<img src="/v/vspfiles/photos/hk01344-1478-'.$i.'.jpg" />';
}
?>

JavaScript (with jQuery):

for(i=1;i<41;i++) {
  $('#element').append('<img src="/v/vspfiles/photos/hk01344-1478-' + i + '.jpg" />');
}