Question

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

我的网站上有几个fancybox画廊（链接here）。客户端想要在每个图像上使用类似按钮，该按钮将链接回该特定图像。由于网站已经上线，我现在已经取消了类似按钮。

我已经为每个图片添加了锚点链接，因此我可以从URL打开它们没问题 - 就像http://www.izzyhodge.com/portfolio/index.html#image01一样。我也可以得到实际的按钮没问题，因为我已经使用了一些java来添加＆＃34;诗＆＃34;将鼠标悬停在物体上（它只包含每个图像中一堆div的内容）。但是，当我使用Facebook代码添加一个like按钮时，它不仅会在下一个图像上添加另一个类似按钮的位置，而且该按钮更像是主要的投资组合页面而不是锚点链接。

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

我真的很感激这个帮助！顺便说一句，我使用Fancybox 2.0，并且我使用HTML5方法添加按钮（不确定我是否必须更改doctype？）。

编辑：我现在正在尝试使用社交按钮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，它看起来像是按钮的正确尺寸，但它里面没有任何东西！这可能是由于我在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＆＃39; 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 （已更新）

Fancybox 2.0 Facebook就像按钮来锚定链接

1 个答案: