0

以下のこのソース コードは、Cristiano G. Carvalhoが次の質問への回答として投稿したもの です。

<div class="details_gallery">
 <a href="#" class="manualfancybox">Manual Call Fancybox</a>
 <div class="details_gallery_min">
  <a rel="details" href="max/1.jpg" class="fancybox"><img src="min/1.jpg" alt="" /></a>
  <a rel="details" href="max/2.jpg" class="fancybox"><img src="min/2.jpg" alt="" /></a>
  <a rel="details" href="max/3.jpg" class="fancybox"><img src="min/3.jpg" alt="" /></a>
  <a rel="details" href="max/4.jpg" class="fancybox"><img src="min/4.jpg" alt="" /></a>
 </div>
</div>

<script>

$(document).ready(function(){
    $(".manualfancybox").click(function() {
        var photos  = new Array();

        $(".details_gallery_min a").each(function(){

            href = $(this).attr("href"); 
            title = $(this).attr("title"); 
            photos.push({'href': href, 'title': title})         

        });

        jQuery.fancybox(photos , 
            {   'transitionIn' : 'elastic', 
                'easingIn' : 'easeOutBack', 
                'transitionOut' : 'elastic', 
                'easingOut' : 'easeInBack', 
                'opacity' : false, 
                'titleShow' : true, 
                'titlePosition' : 'over',
                'type'              : 'image',          
                'titleFromAlt' : true 
            }
        );
    });
});

</script>

そして、それは機能します...ギャラリーが1つしかない場合(例では.details_gallery_min )。

変えてみました

$(".details_gallery_min a").each(function(){

に

$(".galleryone a, .gallerytwo a").each(function(){

「.galleryone a」でのみ機能します。「gallerytwo」を呼び出すリンクをクリックすると、「galleryone」が開きます。私の HTML コードは正しいです。

私の質問は：

異なるギャラリーを開く複数のリンクがあり、すべてのギャラリーに同じ動作 (トランジション、イージングなど) を使用したい場合はどうすればよいですか?

4

1 に答える 1

1

まあ、Cristiano G. Carvalhoの答えは機能しますが、やり過ぎだと思います。array()+ このメソッド.each()は、メモリとパフォーマンスの点で (議論の余地がある) 高いコストがかかります。ギャラリーに複数の画像がある場合は、さらに多くのコストがかかります。

単純なファンシーボックス コードと手動のイベント ハンドラーで問題に対処できる場合、すべての要素を反復処理して配列内にファンシーボックス ギャラリーを (再び) 構築する理由はわかりません。しかし、それは完全に私の個人的な意見です。

たとえば、次のような html があるとします。

<h3>gallery one</h3>
<div id="gallery_one">
    <a rel="galleryone" class="fancybox" href="http://fancyapps.com/fancybox/demo/1_b.jpg"><img src="http://fancyapps.com/fancybox/demo/1_s.jpg" alt=""/></a>
    <a rel="galleryone" class="fancybox" href="http://fancyapps.com/fancybox/demo/2_b.jpg"><img src="http://fancyapps.com/fancybox/demo/2_s.jpg" alt=""/></a>
... etc.
</div>

<h3>gallery two</h3>
<div id="gallery_two">
    <a rel="gallerytwo" class="fancybox" href="http://fancyapps.com/fancybox/demo/3_b.jpg"><img src="http://fancyapps.com/fancybox/demo/3_s.jpg" alt=""/></a>
    <a rel="gallerytwo" class="fancybox" href="http://fancyapps.com/fancybox/demo/4_b.jpg"><img src="http://fancyapps.com/fancybox/demo/4_s.jpg" alt=""/></a>
...etc.
</div>

同じ質問に対する自分の回答を書き直して、必要な手動リンクを次のように設定します。

<a class="manualfancybox" data-gallery="gallery_one" href="#nogo">manual call to first gallery</a>
<a class="manualfancybox" data-gallery="gallery_two" href="#nogo">manual call to second gallery</a>

data-galleryリンク先のギャラリーを示すHTML5 属性を追加したことに注意data-galleryしてください (値は各ギャラリーの親コンテナーの ID と一致します)。

次に、すべてのギャラリーのファンシーボックス コードを追加します。

$(".fancybox").fancybox({
    // API options here
});

そして、イベント ハンドラーを次のような手動の fancybox 呼び出しにバインドします。

$(".manualfancybox").on("click", function(){
    var gallery = "#" + $(this).data("gallery");
    $(gallery).find(".fancybox").eq(0).click();
    return false;
});

.eq()ギャラリーを開始する画像に応じて値を設定します。

JSFIDDLEを参照してください

注：.on()jQuery v1.7+が必要です

于 2013-08-15T17:28:59.143 に答える