0

jqueryを使用するライトボックススクリプトを書き直す方法について質問があります。

ギャラリーを区別するためにdividを使用しています。rel=""おそらく末尾に番号を付けて、属性を使用してもらいたいのですが。rel="gallery1"これは、数を増やすループ内などをチェックするために書くことができますか？私はそのようなもののjs構文に慣れていません。または、おそらく、のループは、そのrelを持つオブジェクトのdomをチェックします。どうも。

Javascript

$(function() {
    $('#gallery1 a').lightBox();
    $('#gallery2 a').lightBox();
});
4

1 に答える 1

0

これにより、forループが3回ループされ、、、およびの.lightBox()リンクが呼び出されます。ループ数を好きなだけ増やすことができます。relgallery1gallery2gallery3

Javascript

for (x = 1; x <= 3; x += 1) {
    $('a[@rel*=gallery' + x + ']').lightBox();
}​

rel異なるプロパティを指定.lightBox()してすべてのリンクを呼び出すだけで、ライトボックスをグループ化できると思いますが。

すべてのライトボックスリンクにクラスをlightbox指定してから、、などのさまざまなグループをrelすべてのリンクに指定します。次に、次のように呼びます。これらはすべて個別にグループ化する必要があると思います。gallery1gallery2gallery3.lightBox()

HTML

<a href="[image_src]" class="lightbox" rel="gallery1">[link text or thumbnail]</a>
<a href="[image_src]" class="lightbox" rel="gallery1">[link text or thumbnail]</a>
<a href="[image_src]" class="lightbox" rel="gallery1">[link text or thumbnail]</a>

<a href="[image_src]" class="lightbox" rel="gallery2">[link text or thumbnail]</a>
<a href="[image_src]" class="lightbox" rel="gallery2">[link text or thumbnail]</a>

<a href="[image_src]" class="lightbox" rel="gallery3">[link text or thumbnail]</a>
<a href="[image_src]" class="lightbox" rel="gallery3">[link text or thumbnail]</a>
<a href="[image_src]" class="lightbox" rel="gallery3">[link text or thumbnail]</a>

Javascript

$('a.lightbox').lightBox();

何が起こるべきかはgallery1、リンクが一緒にグループ化され、gallery2リンクが一緒にグループ化され、gallery3リンクが一緒にグループ化されます。これはデフォルトで発生するはずです。

これがお役に立てば幸いです。

編集1

注意すべき点として、jQueryライトボックスプラグインは4。5年間更新されていません。あなたはcolorboxのようなよりよく維持された代替案を見たいかもしれません。

于 2012-11-26T22:29:34.113 に答える