未分類

luminousを使ったギャラリーの覚書

Posted on by croquis

luminousを使って、

lightboxを使った時に、rel=”lightbox[***]”　を使って、１ページ内に複数のギャラリーを設置

と同じようなことをするには 

<a href="--------" class="luminous-***" data-set="***"><img -------></a>
WordPressの場合は、***の部分をpostIDにするなりして、まとめたい画像を同じ文字でそろえる。 
var luminousElem_array = [];


//luminousで始まるclassの取得
let luminousElem = document.querySelectorAll(`[class^='luminous']`);
if( luminousElem !== null ) {
    luminousElem.forEach(function(elem) {
   //data-setの値で配列作成
       luminousElem_array.push(elem.dataset.set);
   
});
//luminousElem_arrayから重複分を削除
const newluminousElem_array = luminousElem_array.filter((element, index) => luminousElem_array.indexOf(element) === index);
newluminousElem_array.forEach(function(elem) {
//LuminousGalleryを作成
new LuminousGallery(document.querySelectorAll('.luminous-'+elem));
});
}

適当なので、もっと効率の良い方法がありそうです。

 

HOME