jQuery小ネタ

複数枚の画像をクリックで拡大表示したい時、直接HTMLを修正する方法もありますが、数が多くなってくるとコードの修正が大変です。以下は、スライダーの画像を拡大表示するサンプルです。

jQueryで書けば一気に適用する事ができます。

// 画像を抽出
var slickSlides= $('#main').find('.slick-slide').find('img');
$.each(slickSlides, function(index, value){
    // lightbox用にアンカータグを付ける。
    var src = $(this).attr("src");
    $(this).wrap('<a href="'+src+'"'+' data-lightbox="group">');
})


コメントは受け付けていません。