lightbox - すべてのJavaScript関数の設定

Answer 1

まだ慣れていない場合は、jquery を学ぶのも 1 つの方法です。

http://jquery.com/

次に、次のような方法で、ページ上のすべてのタグのすべてのクリック イベントに関数を簡単にアタッチできます。

$("a").click(function(event) {

      //your lighbox code goes here ...
});

編集

使用しているlightbox2スクリプトでは、クラスまたはタグタイプに基づいてページ上のリンクのグループに割り当てる方法があるようには見えないため、上記の機能は関係ありません. 一見すると、そのスクリプトを使い続ける場合、同じページの複数のリンクで機能させる唯一の方法は、各リンクに一意の data-lightbox="" 属性を含めることです。

<a href="img/image-1.jpg" data-lightbox="image-1" title="My caption">image #1</a>
<a href="img/image-1.jpg" data-lightbox="image-2" title="My caption">image #2</a>
<a href="img/image-1.jpg" data-lightbox="image-3" title="My caption">image #3</a>

タグのタイプまたはクラスに基づいてライトボックスを設定できるライトボックス スクリプトは他にもあります。たとえば、http://fancyapps.com/fancybox/では次のことができます。

<a class="fancybox" rel="group" href="big_image_1.jpg">image #1</a>
<a class="fancybox" rel="group" href="big_image_2.jpg">image #2</a>

次に、スクリプトを使用します

<script type="text/javascript">
$(document).ready(function() {
    $(".fancybox").fancybox();
});
</script>

上記は基本的に、fancybox ライトボックスを class="fancybox" を持つものにアタッチします。

それが役立つかどうかはわかりません-標準クラスをそれらに追加するのと同じように、各リンクに一意の data-lightbox="image-3" を追加する必要があることに大きな違いはないかもしれません:-)

グレン