1

サムネイル ヘルパーと共に、タイトルをエレメント スクリプトとして利用しようとしています。両方に同じクラス名、つまり (.fancybox-thumb) を使用すると、要素としてのタイトルのみが機能します。

ご協力いただきありがとうございます。

要素としてのタイトル

$(".fancybox-thumb")
        .attr('rel', 'gallery')
        .fancybox({
            beforeLoad: function() {
                var el, id = $(this.element).data('title-id');

                if (id) {
                    el = $('#' + id);

                    if (el.length) {
                        this.title = el.html();
                    }
                }
            }
        });

サムネイルヘルパー

    $(".fancybox-thumb")
        .attr('rel', 'gallery')
        .fancybox({
             prevEffect : 'none',
             nextEffect : 'none',
             helpers    : {
                 title  : {
                     type: 'outside'
                },
                 thumbs : {
                     width  : 60,
                     height : 60
                }
            }

        });

両方に同じクラス名を使用すると (.fancybox-thumb)、要素としてのタイトルのみが機能します。

<div id="main" class="wrapper clearfix">              
      <a class="fancybox-thumb" rel="fancybox-thumb" href="http://farm7.staticflickr.com/6111/6285920681_67917e8062_b.jpg" title="walk in the park (ewitsoe)">
        <img src="http://farm7.staticflickr.com/6111/6285920681_67917e8062_m.jpg" alt="" />
    </a>

    <a class="fancybox-thumb" rel="fancybox-thumb" href="http://farm7.staticflickr.com/6106/6347065961_bb73745e70_b.jpg" data-title-id="title-1">
        <img src="http://farm7.staticflickr.com/6106/6347065961_bb73745e70_m.jpg" alt="" />
    </a>
    <div id="title-1" class="hidden">
        This is 1st title. <a href="http://google.com" target="blank">Some link</a>
    </div><!--title-1-->
</div> <!-- #main -->
4

1 に答える 1

0

次のような単一のスクリプト内に両方の API オプションを統合します。

$(".fancybox-thumb").attr('rel', 'gallery').fancybox({
    prevEffect: 'none',
    nextEffect: 'none',
    helpers: {
        title: {
            type: 'outside'
        },
        thumbs: {
            width: 60,
            height: 60
        }
    },
    beforeLoad: function() {
        var el, id = $(this.element).data('title-id');
        if (id) {
            el = $('#' + id);
            if (el.length) {
                this.title = el.html();
            }
        }
    }
});​

もちろん、次のような fancybox のサムネイル ヘルパー css および js ファイルをロードすることを忘れないでください。

<!-- Add fancyBox - thumbnail helper -->
<link rel="stylesheet" type="text/css" href="/fancybox/source/helpers/jquery.fancybox-thumbs.css?v=2.1.3" />
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-thumbs.js?v=2.1.3"></script>

編集:次のような別の親コンテナーの下にギャラリー要素をグループ化する別のギャラリーを作成できます

<div id="gallery1" class="gallery">
    <p>gallery one</p>
    <a class="fancybox-thumb" href="http://farm8.staticflickr.com/7100/6917703112_d18e3e1b95_b.jpg">one</a>
    <a class="fancybox-thumb" href="http://farm8.staticflickr.com/7140/7061825385_0ccedf2a8e_b.jpg">two</a>
</div>
<div id="gallery2" class="gallery">
    <p>gallery two</p>
    <a class="fancybox-thumb" href="http://farm8.staticflickr.com/7065/7058141285_064170310e_b.jpg">one</a>
    <a class="fancybox-thumb" href="http://farm6.staticflickr.com/5333/7061356373_1af921fd78_b.jpg">two</a>
</div>
<div id="gallery3" class="gallery">
    <p>gallery three</p>
    <a class="fancybox-thumb" href="http://farm8.staticflickr.com/7069/7060779347_fbee5aae15_b.jpg">one</a>
    <a class="fancybox-thumb" href="http://farm8.staticflickr.com/7053/6918451990_20fa76f338_b.jpg">two</a>
</div>

親コンテナには同じものを使用しましたが、ギャラリーを互いに区別するために使用する別の を使用したことに注意 してください。classID

次に、小さな jQuery を使用して、それぞれに異なるスクリプトを必要とせずに、fancybox ギャラリーを作成します。

// loop through each parent container and set rel attribute accordingly
$("div.gallery").each(function() {
    var thisID = this.id;
    $(this).find(".fancybox-thumb").attr("rel", thisID).fancybox({
        // API options here
    });
}); // each​​​​​

jsfiddleのデモを見る

于 2012-11-27T18:55:21.430 に答える