Question

我目前正在使用提升缩放插件（http://www.elevateweb.co.uk/image-zoom）来允许在悬停时放大图像。我遇到的问题是图片不会存在于文档加载中，它们会被附加到点击功能上，因此相关的elevateZoom功能不会出现问题。工作。
jSFiddle演示：http://jsfiddle.net/neal_fletcher/3j33gb1y/
HTML：

<button data-rel="http://2.bp.blogspot.com/-MUcNEVzLIB8/TrStjvP92kI/AAAAAAAABLI/eK3vb1QMrrw/s1600/slide1-new.png">Click!</button>
<button data-rel="http://1.bp.blogspot.com/-KDiH65CZ8Hs/TjO9rQbmt9I/AAAAAAAAAfg/HeVV38ckUzk/s1600/3.jpg">Click!</button>
<button data-rel="http://4.bp.blogspot.com/-pZuNX8uqQhw/TjO9rDvyC8I/AAAAAAAAAfY/N91storzGWc/s1600/2.jpg">Click!</button>
<button data-rel="http://4.bp.blogspot.com/-y1cPqvkIts8/TjPDKH1-XDI/AAAAAAAAAgA/l8JbwyqcQvI/s1600/hompimenu.jpg">Click!</button>
<div id="area"></div>

jQuery的：

$(document).ready(function () {
    $("button").click(function () {
        var imgUrl = $(this).data('rel');
        $("#area").html("<img class='test' src='" + imgUrl + "' data-zoom-image='" + imgUrl + "' />").hide().imagesLoaded(function () {
            $(this).fadeIn(500);
        });
    });
});

$(".test").elevateZoom({
    zoomType: "inner",
    cursor: "crosshair"
});

正如您在test容器中添加#area图片后所看到的那样，我想让elevateZoom功能发挥作用，让人们放大图像，不确定如果可以的话？任何建议将不胜感激！

Answer 1

对不起，小提琴在我办公室被封锁:(

也许是这样的：

$(document).ready(function () {
    $("button").click(function () {
        var imgUrl = $(this).data('rel');
        $("#area").html("<img class='test' src='" + imgUrl + "' data-zoom-image='" + imgUrl + "' />").hide().imagesLoaded(function () {
            $(this).fadeIn(500, function() {
                $(".test").elevateZoom({
                    zoomType: "inner",
                    cursor: "crosshair"
                });         
            });
        });
    });
});

jQuery提升缩放：启动点击功能

1 个答案: