Question

我正在使用fancybox从主产品图片和一系列替代视图图像（电子商务风格）创建图库。

还有一组彩色框用于切换主图像的颜色。使用jquery我已经很容易实现了这一点。

问题是我第一次激活fancybox画廊的时刻，似乎它已设置并且不会改变？例如，第一个主图像是蓝色。我可以点击红色框并将主图像切换为红色版本（所有数据等都会更新），我激活fancybox图库并显示红色图像，然后显示图库中的其他图像。

如果我然后将主图像切换回蓝色版本，它不会更新，并且红色图像卡在图库中？

我以为.update会这样做，但我似乎不能不止一次发动这个动作？我也用过elevateZoom。

                <script type="text/javascript">
$(document).ready(function(){
$('#zoom_03').elevateZoom();

$('#zoom_03').click(function(e) {
    $.fancybox.update();
    loadFancybox();
});

loadFancybox = function() {
    $('.fancybox').fancybox();
};

$("#colour1, #colour2, #colour3").click(function() {
    var currentDataImage = $(this).children('img').attr('data-image');
    var currentDataZoomImage = $(this).children('img').attr('data-zoom-image');
    var currentDataThumbImage = $(this).children('img').attr('data-thumb-image');
    var currentDataFancyboxHref = $(this).children('img').attr('data-fancybox-href');
    smallImage = currentDataImage;
    largeImage = currentDataZoomImage;
    var ez =   $('#zoom_03').data('elevateZoom');
    ez.swaptheimage(smallImage, largeImage);
    $('#mainThumb').attr('src',currentDataThumbImage);
    $('#zoom_03').attr('data-fancybox-href',currentDataFancyboxHref);
    $.fancybox.update();
});
});
</script>

使用jquery更新Fancybox库中的图像（产品缩放中的颜色切换）

0 个答案: