在 Wordpress 中将 Swinxyzoom 插件与 Fancybox 相结合答案

【问题标题】：Combining Swinxyzoom plugin with Fancybox in Wordpress在 Wordpress 中将 Swinxyzoom 插件与 Fancybox 相结合
【发布时间】：2013-05-07 12:39:14
【问题描述】：

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

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

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

此时需要将灯箱的内容图片用针对大的完整图像的锚标记，然后初始化 swinxyzoom as $(element).swinxyzoom();

任何帮助将不胜感激！

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

【问题讨论】：

标签： jquery wordpress fancybox zooming

【解决方案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 中打开的图片。
一个大尺寸的图像，你在onComplete回调中的包裹锚的href中设置的那个。

还要注意选择器#fancybox-img 指的是fancybox 中打开的图像，仅适用于v1.3.x。

注意：大多数流行的 fancybox WordPress 插件使用 v1.3.4。

见JSFIDDLE

【讨论】：

感谢您的回复。请原谅我的无知，但我会将此 javascript 添加到 mcemcourses.org/wp-content/plugins/nextgen-gallery-optimizer/fancybox/jquery.fancybox-1.3.4.js 文件中的 onComplete 事件中吗？
@Shaun ：你不需要弄乱原来的 fancybox js 或 css 文件。您可以在页面的 <head> 部分中的现有自定义脚本（在其中定义 .myfancybox 选择器）中设置此设置。