从提供的 jsfiddle 到 fancybox 添加社交共享代码的位置

Question

这是一个非常非常基本的问题，因为我是 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 分享而不是点赞按钮，但这就是我想要的）。

非常感谢您帮助菜鸟。

Answer 1

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

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

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

请注意，您的页面无效 HTML - 您还有两个额外的 head 和 body 标签需要删除 - 第二个 head 标签符合要求446:

<div id="CustomPageBody"><head>

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

从提供的 jsfiddle 到 fancybox 添加社交共享代码的位置

Where to add social sharing code from provided jsfiddle to fancybox

javascript

jquery

facebook

fancybox