Bloosh Company

2021年9月23日

Development>WordPress>フロントエンド

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

,

前に紹介したlightgallery.jsが新しくなりました。
 
lightgallery.jsの記事まとめ
 
大きな変更点として、商用サイトで使う場合は有料になりました。
個人で使う場合はこれまで通り無料で使えるみたいです。
 
Ver.1の構成のまま、読み込んでるライブラリをアップデートしてみたんですが、動きませんでした。
なのでおさらい。
 

最新ソースコード

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

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

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

あとはfontフォルダをダウンロードしてサーバーに配置。

HTML構成

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


<div id="gallery">
	<a href="img/img1.jpg">
	<img src="img/thumb1.jpg" />
	</a>
	<a href="img/img2.jpg">
		<img src="img/thumb2.jpg" />
	</a>
	...
</div>

 

JSで設定


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

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

新しくなったlightgallery.js v2 基本の使い方 #フロントエンド #lightgalleryjs #軽量化

<<次の記事

Welcartの配送方法を全商品更新する方法!

前の記事>>

ACFとswiper.jsで無限に画像を追加する