ブルーシュ

IT技術の勉強記録

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

新しくなったlightgallery.js v2 基本の使い方

,

はじめに

lightgallery.jsにはVer1とVer2があり、商用利用する場合はVer2は有料です。
Ver1公式サイトはこちら
Ver2公式サイトはこちら
 
lightgalleryの記事一覧はこちら
 

lightgallery.jsが新しくなった

大きな変更点として、商用サイトで使う場合は有料になりました。
個人で使う場合はこれまで通り無料で使えるみたいです。
 
Ver.1の構成のまま、読み込んでるライブラリをアップデートしてみたんですが、動きませんでした。
Ver1の解説記事をベースにしているので、先に目を通してください🙏
 

最新ソースコード

まずは、GitHubに行って、最新ライブラリ等をゲット。
lightGallery/dist/の中を見ます。
まず必要なのは下記2つのファイル。

サムネイル機能を使いたい場合 ⇒

ハッシュ機能(同じページに複数ギャラリー)を使いたい場合 ⇒

あとはfontディレクトリをダウンロードして、WordPressのサーバーのテーマフォルダがあるディレクトリにアップロード。
 

HTML構成

ここはあまり変化ありません。
でも新しく便利な属性が追加されたので見てみてね。


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

 

設定ファイルlg-conf.js


let element = document.getElementById("gallery");
lightGallery(element, {
	plugins: [lgHash, lgThumbnail],
	thumbnail:true, //サムネイル機能を使う場合
	hash:true, //複数設置する場合
	galleryId:element.id
});

ポイントはplugins: [lgHash, lgThumbnail]のところです。Ver1ではなかったヤツです。
 
開発者さんありがとうございます🙏
 

参考になりそうなTips

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

新しくなったlightgallery.js v2 基本の使い方 #フロントエンド #ウェブデザイン #ウェブ制作 #WEBデザイン #WEB制作 #軽量化 #lightgalleryjs

作者の似顔絵

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