Bloosh Company

2020年12月15日

Development>フロントエンド

lightgallery.jsの画像が2枚だけのときスライド方向が逆になる

, ,

サンプルまとめページはこちら

①基本の使い方lightgallery.jsとWordPressの組み合わせ
②アルバムの作り方lightgallery.jsとWordPressの組み合わせ
③アルバム複数設置(各アルバムは独立)lightgallery.jsとWordPressの組み合わせ
④アルバム複数設置(全画像表示)lightgallery.jsとWordPressの組み合わせ

lightgallery.jsの画像が2枚だけのときスライド方向が逆になる←いまここ

lightgallery.jsの画像が1枚だけの場合サムネイルが表示されない問題
WordPressの画像情報を取得してlightgallery.jsのキャプションにする
lightgallery.jsのサムネイル画像のサイズを小さくして動作を軽くする
 

lightgallery.jsについて

jQuery不要のギャラリー表示プラグインです。
※同じ開発者の方がjQueryを使ったlightgalleryプラグインも作っているので、公式サイトや解説しているサイトを見るときはどっちの説明なのかよく確認してから読みましょう!
公式サイトはこちら→lightgallery.js
 
もちろんWordPressに埋め込んで使えます。
lightgallery.jsを使って、WordPressのギャラリーをアルバムのように表示する方法は後日アップします。
 
問題は「ギャラリーの画像が2枚だけのとき、左右ボタンをクリックすると逆方向にスライドする」です。
 

出現条件

・lightgallery.js ver.1.4.0
・画像が2枚
 

応急処置

jsファイルをいじります。
dist/js/lightgallery.jsのファイル1054行目のあたり。

if (index < _prevIndex) {
	_prev = true;
	if (index === 0 && _prevIndex === _length - 1 && !fromThumb) {
		// _prev = false; コメントアウト
		// _next = true; コメントアウト
	}
} else if (index > _prevIndex) {
	_next = true;
	if (index === _length - 1 && _prevIndex === 0 && !fromThumb) {
		//_prev = true; コメントアウト
		//_next = false; コメントアウト
	}
}

_prev_nextの内容を入れ替えてる?ところ計4行をスラッシュ2つつけてコメントアウトします。
これやってみて動作がおかしくなったら元に戻してね。

lightgallery.jsの画像が2枚だけのときスライド方向が逆になる | ブルーシュカンパニー

<<次の記事

①基本の使い方lightgallery.jsとWordPressの組み合わせ

前の記事>>

YouTubeやGoogleマップを埋め込んで、比率を変えずにレスポンシブ表示する方法!