3

私は壮大なポップアップ (ライトボックス) を使用しており、コンテナーにいくつかの画像があります。これらの画像はすべてウェブサイトに表示されます。ここで、画像をクリックしてギャラリー モードでポップアップを開き、特定のクラス (クラス 'one' など) の画像のみを表示したいと考えています。出来ますか？

HTML

<div class="zoom-gallery" > 
    <a href="a.jpg"><img class="one" src="a.jpg"/></a>
    <a href="b.jpg"><img class="two" src="b.jpg"/></a>
    <a href="c.jpg"><img class="one" src="c.jpg"/></a>
    <a href="d.jpg"><img class="three" src="d.jpg"/></a>
</div>

JS

$('.zoom-gallery').magnificPopup({
    delegate: 'a',
    type: 'image',
    closeOnContentClick:true,
    closeBtnInside: true,        
    gallery: {
        enabled: true
    }
});

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

4

1 に答える 1

1

まだ探している人のために、反対のアプローチを使用するソリューションを次に示します。つまり、特定のクラスの画像を非表示にして残りを表示することができます。

これは私にとってはうまくいきました（画像を順序付けられていないリストに配置し、それらを.my_gallerydiv 内にラップしました）：

$('.my_gallery').each(function() { // iterate over unordered list placed inside '.my_gallery' div
    $(this).magnificPopup({        
       delegate: 'a:not(.hidden)', // the select all except hidden ones
       type: 'image',
       removalDelay: 1000,
       gallery: {
           enabled:true
       }
   });
});
于 2016-06-11T20:36:42.920 に答える