ブルーシュ

IT技術の勉強記録

ホーム > Tips > WordPress

アルバムの1枚目だけ表示する – lightgallery.js

, , ,

はじめに

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

HTMLの書き方

<div id="gallery">
	<a href="img/pic1.jpg">
		<img src="img/pic1_thum.jpg">
	</a>

	<a style="display:none;" href="img/pic2.jpg">
		<img src="img/pic2_thum.jpg">
	</a>

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

ポイントは、1枚目の画像だけ表示して、2枚目以降はdisplay:none;です。
display:none;でも中身の<img>が無いと動きませんでした。。
※実際は、cssで制御しています。
 
 

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

Ver1の場合

lightGallery(document.getElementById('gallery'), {
		thumbnail:true
	}

 

Ver2の場合


let element = document.getElementById("#gallery");
lightGallery(element, {
	plugins: [lgThumbnail],
	thumbnail:true,
	galleryId:element.id
});

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

参考になりそうなTips

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

アルバムの1枚目だけ表示する – lightgallery.js #WordPress #ウェブデザイン #ウェブ制作 #WEBデザイン #WEB制作 #軽量化 #lightgalleryjs #JavaScript #ギャラリー

作者の似顔絵

プログラミング歴19年🌈調べたことをブログにまとめていきます。
記事の感想・質問・間違い指摘などはツイッター ( @blooshcompany ) へお願いします。

秋田のウェブ活用をサポート

ホームページを自作してコスト削減!秋田の事業者は無料で利用できます。
ネットショップ・WordPress・SEO対策などさまざまなお悩みをサポートします。

その他、フロントエンド案件のご依頼はインフォメーション

秋田市 レンタル着物 笹パンダ堂のバナーリンク