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

画像の alt 属性は、Fancybox 内からは利用できず、渡すこともできません (fancybox.js を適応させない限り)。そのため、 returnthis.altへの 2 回目の呼び出しで.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 に答える