1

仕事用に作成している Web サイトのライトボックス スクリプトを使用しており、約 100 枚以上の画像を含める予定です。非常に多くの画像を扱う場合、より良い解決策はありますか?

非常に多くのリンクがあるため、個別に入力するのではなく、html リンクを生成する方法はありますか?

<a href="gallery/abcc/abcc01.jpg" rel="lightbox[abcc]"><img class="thumb" src="gallery/abcc/thumb.jpg" alt="ABCC Gallery" title="ABCC Gallery"/></a>
<a href="gallery/abcc/abcc02.jpg" rel="lightbox[abcc]"></a>
<a href="gallery/abcc/abcc03.jpg" rel="lightbox[abcc]"></a>
<a href="gallery/abcc/abcc04.jpg" rel="lightbox[abcc]"></a>
<!-- generate each link automatically? -->
<a href="gallery/abcc/abcc99.jpg" rel="lightbox[abcc]"></a>
4

1 に答える 1

1

参考： jsFiddle Lightbox v2.5.1 デモ

ライトボックススクリプトはjQueryフレームワークを使用するため、を持つすべてのクラス名を反復処理し、thumbその親アイテムでアンカーaリンクに必要なマークアップを追加できrel="lightbox"ます。

HTML:

<a href="http://lokeshdhakar.com/projects/lightbox2/images/examples/image-3.jpg">
    <img class="thumb" src="http://lokeshdhakar.com/projects/lightbox2/images/examples/thumb-3.jpg" alt="gallery" title="Photo 1" />
</a>


<a href="http://lokeshdhakar.com/projects/lightbox2/images/examples/image-4.jpg">
    <img class="thumb" src="http://lokeshdhakar.com/projects/lightbox2/images/examples/thumb-4.jpg" alt="gallery" title="Photo 2" />
</a>


<a href="http://lokeshdhakar.com/projects/lightbox2/images/examples/image-5.jpg">
    <img class="thumb" src="http://lokeshdhakar.com/projects/lightbox2/images/examples/thumb-5.jpg" alt="gallery" title="Photo 3" />
</a>

jQuery:

$(document).ready(function() {

    // Scan the webpage for all class names of 'thumb' that is seen.
    $('.thumb').each(function(){

        // For each class name of 'thumb' found, go to the parent item of that thumb and apply the rel attribute.    
        $(this).parent().attr('rel','lightbox[myGallery]');

    });

});

使用されている上記の jQuery はHTML Web ページ レイアウトに基づいているため、実際にそのページにあるものに合わせて調整する必要がある場合があります。この.each();方法は、他のクラス名についても繰り返すことができます。

于 2012-07-27T06:39:44.187 に答える