Laravel框架下elevateZoom切换图片后放大仍显示首图如何解决

elevateZoom插件首次初始化后，会自动在页面中插入放大层相关DOM元素，同时将初始的放大图片地址缓存到实例内。仅修改主图的src和data-zoom-image属性、重复调用elevateZoom()不会更新已有实例的缓存数据，也不会替换旧的放大层元素，因此切换缩略图后放大区域始终显示第一张图片。

修改JS代码，每次切换图片前先销毁旧的elevateZoom实例、清理残留的放大层元素，再重新初始化插件即可：

<script>
var productgalery = $('#product_galery');
var subnailproductgalery = productgalery.find('.gallery-ul li');
// 把elevateZoom配置抽出来，避免重复书写
var zoomConfig = {
    'zoomWindowOffetx': -880,
    'zoomWindowWidth': 500,
};

subnailproductgalery.click(function () {
    var mainimageurl = $(this).attr('data-main-image');
    var thumbimageurl = $(this).attr('data-image');
    $('.gallery-ul li').removeClass('activeli');
    $(this).addClass('activeli');
    showgallery(mainimageurl, thumbimageurl);
})

function showgallery(imageurl, thumb) {
    var $mainImg = $('#zoom-product');
    // 第一步：销毁旧的elevateZoom实例，清理生成的放大层元素
    if ($mainImg.data('elevateZoom')) {
        $mainImg.data('elevateZoom').remove();
        $('.zoomContainer').remove();
    }
    // 第二步：更新主图属性
    $mainImg.attr('src', thumb).attr('data-zoom-image', imageurl);
    // 第三步：重新初始化elevateZoom
    $mainImg.elevateZoom(zoomConfig);
}

// 页面首次加载初始化
$('#zoom-product').elevateZoom(zoomConfig);
</script>

• 不要在每次切换图片时重复查找.mainimage元素，直接用主图的ID选择器#zoom-product定位更准确
• 插件生成的.zoomContainer类元素是放大层的容器，每次切换必须清理干净，避免出现多个放大层重叠的问题

内容的提问来源于stack exchange，提问作者mohammad bagri