Question

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

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

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

此时您需要使用包装灯箱的内容图像   定位大型完整图像的锚标记然后初始化   swinxyzoom as $（element）.swinxyzoom（）;

非常感谢任何帮助！

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

Answer 1

根据您提供的信息，此代码可以解决问题：

<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>

注意您需要3张图片：

您的缩略图，您点击打开fancybox的缩略图。
中等大小的图片，您在打开fancybox的链接的href中定位的图片，实际上是在fancybox中打开的图片。
大尺寸图片，您在href回调中的包装锚点的onComplete中设置的图片。

另请注意，选择器#fancybox-img仅针对v1.3.x引用fancybox中打开的图像。

注意：最受欢迎的fancybox WordPress插件使用v1.3.4。

参见 JSFIDDLE

在Wordpress中将Swinxyzoom插件与Fancybox结合使用

1 个答案: