Fancybox 2.0 Facebook 点赞按钮来锚定链接

Question

我觉得这是不可能的，但我想我还是会问。有几个类似的问题，但没有一个能解决我的特定问题。

我有一个包含几个fancybox 画廊的网站（链接here）。客户希望在每个图像上都有一个赞按钮，该按钮将链接回该特定图像。由于该网站已上线，因此我暂时取消了“赞”按钮。

我已经为每张图片添加了锚链接，这样我就可以从 URL 打开它们了——就像http://www.izzyhodge.com/portfolio/index.html#image01。我也可以得到实际的like按钮没问题，因为我已经使用了一些java来添加“诗歌”悬停在事物上（它只包括一堆关于每个图像的div的内容）。但是，当我使用 Facebook 代码添加一个赞按钮时，它不仅会在下一张图片的不同位置添加另一个赞按钮，而且该按钮喜欢主投资组合页面而不是锚链接。

我能找到的唯一解决方案是使用带有 Facebook 按钮的锚链接，在喜欢的页面的标题中使用元标记，我当然不能这样做。

非常感谢您对此提供的帮助！顺便说一句，我使用的是 Fancybox 2.0，并且我使用的是 HTML5 添加按钮的方法（不确定是否必须为此更改文档类型？）。

编辑：我现在在这里尝试使用社交按钮 JSfiddle 来执行此操作，但是我使用 alt 标记作为标题，我不确定如何组合这两段代码。我的 JS 现在看起来像：

$(document).ready(function() {
  $(".fancybox").fancybox({
   helpers : { 
    title : { type : 'inside' }
   }, // helpers
       beforeShow : function() {
            if (this.title) {         
                // New line
                this.title += '<br />';

                // Add FaceBook like button
                this.title += '<iframe src="//www.facebook.com/plugins/like.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>';
            }
        var alt = this.element.find('img').attr('alt');

        this.inner.find('img').attr('alt', alt);

        this.title = alt;

        var toolbar = "<div id='tools'>" + $("#appendContent div").eq(this.index).html() + "</div>";

   $(".fancybox-inner").append(toolbar);
}
  }); // fancybox
 }); // ready

如果我删除；

this.title = alt;

我得到了一个 div，它的大小与 like 按钮的大小差不多，但里面什么都没有！这可能是由于我在 CSS 中的自定义标题格式。

Fancybox 的 HTML：

                <div id="thumb-container">
                    <a id="image01" class="fancybox thumb" rel="group" href="/images/portfolio/large/big_1.jpg"><img src="/images/portfolio/thumbs/th_1.jpg" alt="<h2>LOLA LURKING IN THE LILYPADS <br/> Book Cover (Book in progress) <br/> Pencil and Digital</h2>"/></a>
                    <a id="image02" class="fancybox thumb" rel="group" href="/images/portfolio/large/big_2.jpg"><img src="/images/portfolio/thumbs/th_2.jpg" alt="<h2>THE TREMENDOUS TAILS OF TRAVELLERS TRAILS - THE OTTER<br/>Collection published by Zeitgeist Fine Art<br/>Ink and Digital</h2>" /></a>
                    <a id="image03" class="fancybox thumb" rel="group" href="/images/portfolio/large/big_3.jpg"><img src="/images/portfolio/thumbs/th_3.jpg" alt="<h2>THE TREMENDOUS TAILS OF TRAVELLERS TRAILS - THE POLAR BEAR<br/>Collection published by Zeitgeist Fine Art<br/>Ink and Digital</h2>" /></a>

ETC
                </div>
                <div id="appendContent" style="display: none;">
                    <div><div class="fb-like" data-href="http://www.izzyhodge.com/portfolio/index.html#image01" data-layout="button_count" data-action="like" data-show-faces="true" data-share="false"></div></div>
                    <div><h2><a>READ POEM<img class="hoverpoem" src="/images/poems/otterpoem.png" alt=""/></a></h2></div>
                    <div><h2><a>READ POEM<img class="hoverpoem" src="/images/poems/polarbearpoem.png" alt=""/></a></h2></div>

ETC

干杯！

Answer 1

问题在于这一行

this.title = alt;

将覆盖您之前的 title，其中包括 facebook 按钮。你应该这样做：

this.title += alt;

完整代码：

$(".fancybox").fancybox({
    beforeShow: function () {
        if (this.title) {
            // New line
            this.title += '<br />';
            // Add FaceBook like button
            this.title += '<iframe src="//www.facebook.com/plugins/like.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>';
        }
        var alt = this.element.find('img').attr('alt');
        this.inner.find('img').attr('alt', alt);
        this.title += alt;
        var toolbar = "<div id='tools'>" + $("#appendContent div").eq(this.index).html() + "</div>";
        $(".fancybox-inner").append(toolbar);
    },
    helpers: {
        title: {
            type: 'inside'
        }
    }
});

JSFIDDLE

另一方面，请记住这一行

if (this.title)

验证title 属性是否存在于<a> 元素上......在你的情况下它确实存在，它简单地说image01，image02。等等，所以它也显示在fancybox'a title。

如果您只想使用title 属性在fancybox 的title 中显示鼠标悬停而不是，则删除条件并在其中从头开始构建title像这样的回调：

$(".fancybox").fancybox({
    beforeShow: function () {
        // New line
        this.title = '<br />'; // here we start the title
        // Add FaceBook like button
        this.title += '<iframe src="//www.facebook.com/plugins/like.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>';
        var alt = this.element.find('img').attr('alt');
        this.inner.find('img').attr('alt', alt);
        this.title += alt;
        var toolbar = "<div id='tools'>" + $("#appendContent div").eq(this.index).html() + "</div>";
        $(".fancybox-inner").append(toolbar);
    },
    helpers: {
        title: {
            type: 'inside'
        }
    }
});

JSFIDDLE（更新）