1

我希望我在 Fancybox 中的 Facebook 共享器能够捕获图像的 alt 并将其作为链接标题。

使用下面的代码，我得到了“未定义”的标题，其余的都很好。

它出什么问题了？

    $(".fancybox").fancybox({
    beforeShow : function() {
        var alt = this.element.find('img').attr('alt');

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

        this.title = alt;
    }
});

$(".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 += '<a href="https://www.facebook.com/sharer/sharer.php?s=100&p[url]=' + this.href + '&p[title]=' + this.alt + '&p[images][0]=' + this.href + '&p[summary]=My website summary">Facebook</a> ;'
            }
        },
        afterShow: function() {
            // Render tweet button
            twttr.widgets.load();
        },
        helpers : {
            title : {
                type: 'inside'
            }
        }  
    });

这是图像的代码：

<a class="fancybox" title="Title displayed under image" alt="alttext" href="Link to big image" rel="group"><img alt="alttext" src="Thumb" /></a>


<div class="hidden">
<a class="fancybox" title="Title displayed under image" alt="alttext" href="Link to big image" rel="group"><img alt="alttext" src="Thumb" /></a>
<a class="fancybox" title="Title displayed under image" alt="alttext" href="Link to big image" rel="group"><img alt="alttext" src="Thumb" /></a>
<a class="fancybox" title="Title displayed under image" alt="alttext" href="Link to big image" rel="group"><img alt="alttext" src="Thumb" /></a>
<a class="fancybox" title="Title displayed under image" alt="alttext" href="Link to big image" rel="group"><img alt="alttext" src="Thumb" /></a>
</div>

基本上隐藏类用于隐藏除了顶部的图像之外的所有图像，但是它们仍然可以通过 Fancybox 浏览。

另一个编辑：

我在第一张图片上添加了 div 以对其进行测试

    <div class="fancybox"><a class="fancybox" title="Title displayed under image" alt="alttext" href="Link to big image" rel="group"><img alt="alttext" src="Thumb" /></a></div>

会发生什么 - 如果我离开警报，它会弹出正确的标题。但是，当我点击图片时，只显示图片而没有社交按钮。

4

2 回答 2

0

这可能是对http://api.jquery.com/element-selector/的滥用。

如果标签是具有 .fancybox 类的元素的子元素（第 n 级），并且您正在尝试获取该标签的 'alt' 属性，那么我会尝试省略 element 命令。 

var alt = $(this).find('img').attr('alt');

这是一个例子：

http://jsfiddle.net/benashby/avGk6/

注意：如果您所追求的 img 是 fancybox div 的 1 级子级，则在客户端上使用http://api.jquery.com/children/命令或它的一些派生会更容易。

于 2013-08-29T13:42:37.390 回答
0

图像的 alt 属性在 Fancybox 内部不可用，也不能传递给它（不适应 fancybox.js）。这就是为什么this.alt在您第二次调用beforeShow()返回时undefined。

您需要使用另一种方法将所需的字符串传递给您的 Facebook 链接。如果替代文本与标题文本相同，那么如何执行以下操作：

 if (this.title) {

            // pass original title to new variable
            var originalTitle = this.title;         

            // New line
            this.title += '&lt;br /&gt;';

            // 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 ## using originalTitle
            this.title += '<a href="https://www.facebook.com/sharer/sharer.php?s=100&p[url]=' + this.href + '&p[title]=' + originalTitle + '&p[images][0]=' + this.href + '&p[summary]=My website summary">Facebook</a> ;'
        }

锚标签中不允许使用 alt 属性 - 有什么理由让它存在吗？

于 2013-08-30T09:30:22.013 回答