图像src未在点击时更新

Question

我想在选择新图像时更改图像源，以便我可以在所有图像上应用我的java脚本。代码在第一张图像上正常工作但不更新其他图像的源。

帮助我。

HTML

    <div>

      <? php $pro_detail ->pic_continer_disp(); ?>
var zoomConfig = {cursor: 'crosshair', zoomType: "inner",zoomWindowFadeIn: 500,zoomWindowFadeOut: 750 }; 
var zoomImage = $('#zoom');
var image = $('#zoom1');

zoomImage.elevateZoom(zoomConfig);//initialise zoom

image.on('click', function(){
    // Remove old instance od EZ
    $('.zoomContainer').remove();
    zoomImage.removeData('elevateZoom');
    // Update source for images
    zoomImage.attr('src', $(this).data('image'));
    zoomImage.data('zoom-image', $(this).data('zoom-image'));
    // Reinitialize EZ
    zoomImage.elevateZoom(zoomConfig);
}); 
</script> 

    </div>

PHP

pic_continer_disp() {
            if($product_image1 != ''){
            echo "<a href=''  target='_blank'><img src='admin_area/product_images/product_pics/$product_image1' class='enlarge' width='400' height='265'  alt=' ' id='zoom' data-image='admin_area/product_images/product_pics/$product_image1'  data-zoom-image='admin_area/product_images/product_pics/$product_image1' /></a>";


            }


            if($product_image2 != ''){
            echo "<div id='gallery'><a href='' id='zoom1' target='_blank'><img src='admin_area/product_images/product_pics/$product_image2' class='enlarge' width='400' height='265'  alt=' '  data-image='admin_area/product_images/product_pics/$product_image2' data-zoom-image='admin_area/product_images/product_pics/$product_image2' /></a></div>";              
            }

  }


  if ($product_image2 != '') {
    echo "<a href=''  target='_blank'>
    <img src='admin_area/product_images/product_pics/$product_image2' class='enlarge' width='400' height='265'  alt=' ' id='zoom1'  data-zoom-image='admin_area/product_images/product_pics/$product_image2' />
    </a>";
  }
}