1

我想要实现的是在响应式网站上的 Fancybox 灯箱中激活 Swinxyzoom Wordpress 插件（它使用 jQuery 允许用户放大图像的一部分）。

在与 Swinxyzoom 插件作者取得联系后，他提出以下建议：

要将 SwinxyZoom 与灯箱集成，您需要创建一些自定义代码，这些代码在灯箱完成显示其内容时触发，例如。在fancybox 中，这个事件是'onComplete'。

此时，您需要使用定位大完整图像的锚标记包装灯箱的内容图像，然后将 swinxyzoom 初始化为 $(element).swinxyzoom();

任何帮助将非常感激！

我单独使用上述两个插件的站点的测试页面是http://www.mcemcourses.org/radiology-test

4

1 回答 1

0

Based on the information you have provided, this code should do the trick :

<script type='text/javascript'>
jQuery.noConflict();
jQuery(document).ready(function ($) {
    jQuery('a.myfancybox').fancybox({
        'zoomSpeedIn': 500,
        'zoomSpeedOut': 500,
        'overlayShow': true,
        'overlayOpacity': 0.3,
        'onComplete': function () {
            $("#fancybox-img").wrap("<a class='myZoom' href='http://www.mcemcourses.org/wp-content/uploads/9-Orbital-floor-.jpg' />");
            $("a.myZoom").swinxyzoom({
                mode: 'lens' // or your preferred mode
            });
        }
    });
});
</script>

Notice that you will need 3 images :

  • Your thumbnail, the one you click to open fancybox.
  • A middle size image, the one you target in the href of the link that opens fancybox, and actually, the image opened in fancybox.
  • A big size image, the one you set in the href of the wrapping anchor inside the onComplete callback.

Also notice that the selector #fancybox-img refers to the opened image in fancybox for v1.3.x only.

NOTE : Most popular fancybox WordPress plugins use v1.3.4.

See JSFIDDLE

于 2013-05-07T19:05:34.083 回答