ミギムキ

Lightboxのパス指定を省略したい

公開日:2019/10/12 更新日:2020/11/12

Lightboxは、画像の拡大表示やスライドショーをしたいときに便利なプラグインです
使用する際は、aタグとimgタグの両方に画像パスを指定する必要があります。サムネイルと拡大表示用でパスが違う場合はいいのですが、同じパスを参照する場合では、aタグとimgタグの両方に同じパスを書くのは手間がかかります
ということで、Lightboxのパス指定を楽にするためのコードを検討しました

サンプルコード

html

<a rel="lightbox"><img src="./images/sample.jpg" alt="サンプル画像"></a>

<a rel="lightbox[group]"><img src="./images/sample_001.jpg" alt="サンプル画像001"></a>
<a rel="lightbox[group]"><img src="./images/sample_002.jpg" alt="サンプル画像002"></a>
<a rel="lightbox[group]"><img src="./images/sample_003.jpg" alt="サンプル画像003"></a>

jQuery

jQuery(function ($) {
    $('a[rel^=lightbox]').each(function() {
        var image_url = $(this).find('img').attr('src');
        $(this).attr('href', image_url);
    });
});

仕組み

Lightboxの使用を宣言する「rel="lightbox"」にひっかかるセレクタでeachループを回します
あとはimgタグのsrc属性に設定された画像パスをaタグのhref属性にコピーしているだけです

ご質問など受け付けています

記事の中でわかりにくかったところ、もっと知りたかったこと、間違っていることなど、何でもお気軽にご連絡ください。

ご連絡は下記フォームを利用いただくか、ツイッターアカウント@flat8migi宛てでもOKです。