2

同様の問題に対処するいくつかの質問を見てきましたが、どの修正も私の状況ではうまくいかないようです。基本的に、サイト全体の 1 つのページに複数のファンシーボックス ギャラリーがあり、サイト上の 1 つのスライドショーをクリックすると、ギャラリーから次のギャラリーへと続きます。ギャラリー/ファンシーボックスのインスタンスを互いに分離したままにしたい。基本的に、ギャラリーを分離し、互いに混ざり合わないようにするために、「rel」カテゴリが必要です。私はいくつかのことを試しましたが、何もうまくいかないようです。

ソーシャル メディア ボタンを追加するために追加した Javascript は次のとおりです。

$(function(){
    $(".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="' + "http://drewalbinson.com/" + '">Tweet</a> ';

                    // Add FaceBook like button
                    this.title += '<iframe src="http://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>';
                }
            },
            afterShow: function() {
                // Render tweet button
                twttr.widgets.load();
            },
            helpers : {
                title : {
                    type: 'inside'
                }
            }  
        });

    });

これが私の HTML の簡略版です。

<!-- Gallery 1 -->

<div class="imagebox">
<a href="g1_img1.png" class="fancybox" rel="gallery1" title="1 of 2">

<img src="g1_img1_small.png" />

</a>

<a href="g1_img2.png" class="fancybox" rel="gallery1" title="2 of 2"></a>

</div>

<!-- Gallery 2 -->

<div class="imagebox">

<a href="g2_img1.png" class="fancybox" rel="gallery2" title="1 of 2">

<img src="g2_img1_small.png" />

</a>

<a href="g2_img2.png" class="fancybox" rel="gallery2" title="2 of 2"></a>

</div>

ありがとう！

4

1 に答える 1

1

コードのこの部分:

$(".fancybox")
    .attr('rel', 'gallery')
    .fancybox({
    .... etc

rel...あなたのhtmlの属性を上書きしています。.attr()次のようにメソッドを削除するだけです：

$(".fancybox")
    .fancybox({
    .... etc

...そして、あなたは大丈夫です。

于 2013-06-10T23:06:05.437 に答える