ブルーシュ

IT技術の勉強記録

ホーム > Tips > フロントエンド

独立したアルバムを複数設置する – lightgallery.js

, , ,

はじめに

lightgallery.jsにはVer1とVer2があり、商用利用する場合はVer2は有料です。
Ver1公式サイトはこちら
Ver2公式サイトはこちら
 
最初の設定はlightgallery.js v1 基本の使い方新しくなったlightgallery.js v2 基本の使い方を見てください。
lightgalleryの記事一覧はこちら
 
今日は、●アルバムを複数設置(1)します。各アルバムの先頭の画像だけ表示されています。各アルバムは独立していて、複数あるアルバムをまたがってスライドさせることはできません。
複数あるアルバムをまたがってスライドさせたい場合は全画像をスライドできるアルバムを複数設置 – lightgallery.js
動作サンプルはページの最後にあります。
 

HTMLの書き方

<div class="gallery" id="gallery1">
	<a href="img/pic1-1.jpg">
		<img src="img/pic1-1_thum.jpg">
	</a>

	<a style="display:none;" href="img/pic1-2.jpg">
		<img src="img/pic1-2_thum.jpg">
	</a>

	<a style="display:none;" href="img/pic1-3.jpg">
		<img src="img/pic1-3_thum.jpg">
	</a>
</div>

<div class="gallery" id="gallery2">
	<a href="img/pic2-1.jpg">
		<img src="img/pic2-1_thum.jpg">
	</a>

	<a style="display:none;" href="img/pic2-2.jpg">
		<img src="img/pic2-2_thum.jpg">
	</a>
</div>

<div class="gallery" id="gallery3">
	<a href="img/pic3-1.jpg">
		<img src="img/pic3-1_thum.jpg">
	</a>

	<a style="display:none;" href="img/pic3-2.jpg">
		<img src="img/pic3-2_thum.jpg">
	</a>
</div>

サンプル1id="gallery"のブロックが複数ある状態です。
class="gallery"になりました。idは番号をつけています。
display:none;は実際は、cssで制御しています。
 
 

次に、設定ファイルlg-conf.jsの書き方。

Ver1の場合

let elems= document.getElementsByClassName("gallery");
for(let i = elems.length; i--; ){
	lightGallery(elems[i], {
		thumbnail:true,
		hash:true,
		galleryId: elems[i].id
	});
}

 

Ver2の場合

let elems= document.getElementsByClassName("gallery");
for(let i = elems.length; i--; ){
	lightGallery(elems[i], {
		plugins: [lgHash, lgThumbnail],
		thumbnail:true,
		hash:true,
		galleryId:element.id
	});
}

thumbnail:trueでサムネイル機能をオンにしてます。
 

参考になりそうなTips

ACFとlightgallery.jsで無限に画像を追加する
Welcartの商品画像とlightgallery.jsの組み合わせ事例
lightgallery.jsの画像が1枚だけの場合サムネイルが表示されない問題
lightgallery.jsのサムネイル画像のサイズを小さくして動作を軽くする
 
下記、動作サンプルで確認してね。

独立したアルバムを複数設置する – lightgallery.js #フロントエンド #ウェブデザイン #ウェブ制作 #WEBデザイン #WEB制作 #JavaScript #ギャラリー #軽量化 #lightgalleryjs

作者の似顔絵

秋田市在住のプログラマーです。
プログラミングを始めて18年、まだまだ日々勉強。調べたことをブログにまとめていきます。
記事の感想・質問・間違い指摘などはツイッター ( @blooshcompany ) へお願いします。