在哪里将社交共享代码从提供的 jsfiddle 添加到 fancybox答案

【问题标题】：Where to add social sharing code from provided jsfiddle to fancybox在哪里将社交共享代码从提供的 jsfiddle 添加到 fancybox
【发布时间】：2015-02-11 20:31:01
【问题描述】：

这是一个非常非常基本的问题，因为我是 Javascript 和 Jquery 的新手，但我似乎无法在任何地方找到答案。

我正在尝试在我们网站的一个页面上实现 FancyBox，包括 FancyBox 提示和技巧提供的其他社交分享按钮。

这是我到目前为止所做的（还没有社交分享），我喜欢它： http://www.aatg.org/default.asp?page=Testpageja

问题是我不知道在哪里将社交分享按钮的代码添加到提供的 jquery.fancybox.js 文件中。我太新了，无法弄清楚函数应该在哪里。我已经在 JSFiddle 中找到了它，所以它可以工作，我只是不知道现在把它放在我的网站上的哪里，所以它可以正常工作。

这是我在 JSFiddle 中提出的：http://jsfiddle.net/G5TC3/3186/

$(".fancybox")
.attr('rel', 'gallery')
.fancybox({
    beforeShow: function () {
        if (this.title) {
            // New line
            this.title += '<br />';

            // Add tweet button
            this.title += '<a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-url="' + this.href + '">Tweet</a> ';

            // Add FaceBook like button
            this.title += '<iframe src="//www.facebook.com/plugins/share_button.php?href=' + this.href + '&amp;layout=button_count&amp;show_faces=true&amp;width=500&amp;action=like&amp;font&amp;colorscheme=light&amp;height=23" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:110px; height:23px;" allowTransparency="true"></iframe>';
        }
    },
    afterShow: function() {
        // Render tweet button
        twttr.widgets.load();
    },
    helpers : {
        title : {
            type: 'inside'
        }
    }  
});

谁能帮我告诉我这需要放在 jquery.fancybox.js 文件中的什么地方（可从 Fancybox 下载）。也许我错了，上面的代码需要进入 jquery.fancybox.pack.js？（注意：现在它是一个 FB 分享而不是一个赞按钮，但这就是我想要的）。

非常感谢您帮助菜鸟。

【问题讨论】：

标签： javascript jquery facebook fancybox

【解决方案1】：

在您提供的页面上，您在第 469 行初始化了 fancybox：

<script type="text/javascript">
  $(document).ready(function() {
    $(".fancybox").fancybox();
  });
</script>

所以你可以用 Fiddle 中的脚本替换 $(".fancybox").fancybox(); 行，它应该可以工作。
基本上，您不会将用于初始化插件的代码添加到插件文件本身，而是将其添加为 HTML 中的内联脚本（就像您已经做的那样）或将其添加到您包含在页面中的单独脚本文件中这可以更好地维护可维护性。

请注意，您的页面不是有效的 HTML - 您还有两个额外的 head 和 body 标记需要删除 - 第二个 head 标记在第 446 行：

<div id="CustomPageBody"><head>

并在第 452 行结束。第二个 body 标记是第 454 行，并在初始化 fancybox 的脚本下方的第 464 行结束。

【讨论】：

非常感谢！我肯定忽略了那个地方——我完全按照你的要求做了，不幸的是，现在正在加载图片，好像根本没有调用 fancyBox，图像只是在页面中加载。
@user2697568 我刚刚检查了您更新的页面 - 您缺少 $(document).ready(function() { 的结束 });。请注意，当前您有 2 个脚本错误 - 第 479 行的 SyntaxError: missing } after function body，您应该在其中添加此 });。第二个错误 - TypeError: $(...).autocomplete is not a function 可能是相关的，但请先为 fancybox 添加缺少的括号。
非常感谢马蒂亚斯！我刚改了，已经修好了！看起来 twitter 小部件图像没有加载，但这是我自己可以弄清楚的。你帮了我很多，谢谢！
@user2697568 很高兴我能帮助你:)。如果这回答了您的问题，您可以接受此答案，以便将问题标记为已关闭/已解决。如果您不知道这是如何工作的以及为什么，请查看meta.stackexchange.com/questions/5234/…
感谢您的提示，已解决，@matthias_h！