如何在Jack Moore的jQuery缩放插件中设置缩放图像的目标

Question

我正在使用Jack Moore的缩放（zoom）和colorbox插件。除了无法指定缩放后的图像显示在不同的目标区域外，其他都正常。

这个页面上的设置文档http://www.jacklmoore.com/zoom/说：

"target false 应该用作缩放图像父容器的选择器或DOM元素."

我尝试像设置其他选项一样去设置它，但是没有成功。例如，

$(document).ready(function(){
$('#target-img').zoom({magnify:2,
            callback: function(){
                $(this).colorbox({href: this.src, magnify: 2, target: '#zoom-window'});
            }
});

});

缩放后的图像保留在父容器中。请参见此fiddle以获取完整示例：

http://jsfiddle.net/contendia/MFrV3/2/

- contendia

---

目标是.zoom选项，所以它应该在回调之外，像这样[http://jsfiddle.net/MFrV3/3/]。 - Abraham Uribe

感谢@AbrahamUribe，这是我犯的一个愚蠢错误，在调用colorbox时将目标引用放在了错误的位置。我知道比那更好的语法是将选择器作为目标传递，但我却被这个问题难住了。我从来没有想过使用.get()方法，并且找不到任何示例。有了你的示例，我也更新了点击事件。现在缩放功能可以正常工作，但colorbox不能。这可能是因为回调函数中的$(this)不再引用正确的元素，因为$("#zoom-window).get(0)选择器改变了它吗？ http://jsfiddle.net/contendia/MFrV3/6/ http://jsfiddle.net/contendia/MFrV3/7/ - contendia

$('#target-img') 不是一个 img 标签，所以你需要获取 #target-img 内部的 img 并获取它的 attr("src")。[http://jsfiddle.net/MFrV3/15/] - Abraham Uribe

@AbrahamUribe 很好！如果您愿意将您的意见作为答案添加，我会接受它。再次感谢。 - contendia

Answer 1

目标选项仅适用于.zoom插件而不是.colorbox，因此您需要在.zoom调用中设置目标，如下所示：

$(document).ready(function(){
    $('#target-img').zoom({    
           magnify:2,
           target:$("#zoom-window").get(0)//target need to be the html element 
    }).colorbox({href: $("img",this).attr("src")});//you can chain the colorbox call
    //get attr src of the img inside the target-img
});    

要获取图片的src，您需要获取#target-img div内的实际图片，并使用.attr检索src。
http://jsfiddle.net/MFrV3/15/

- Abraham Uribe

---

对于任何感兴趣的人，包含@Abraham答案的完整Zoom和Colorbox设置可以在这里找到： http://jsfiddle.net/contendia/MFrV3/16/ - contendia