Bloosh Company

2021年3月1日

Development>WordPress

②アルバムの作り方lightgallery.jsとWordPressの組み合わせ

, ,

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

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

②アルバムの作り方lightgallery.jsとWordPressの組み合わせ←いまここ

③アルバム複数設置(各アルバムは独立)lightgallery.jsとWordPressの組み合わせ
④アルバム複数設置(全画像表示)lightgallery.jsとWordPressの組み合わせ
lightgallery.jsの画像が2枚だけのときスライド方向が逆になる
lightgallery.jsの画像が1枚だけの場合サムネイルが表示されない問題
WordPressの画像情報を取得してlightgallery.jsのキャプションにする
lightgallery.jsのサムネイル画像のサイズを小さくして動作を軽くする
 
WEBアルバムのように、先頭の画像だけ表示する。
左右ボタンを押すと、隠れた画像もスライドして切り替えできる。というやつです。
 
最初の設定は①基本の使い方を見てください。
 
WordPressのギャラリーを設置したあとの、テンプレートファイルのソースコードだけ。

<?php if ( get_post_gallery() ) : ?>

	<div id="gallery0">

		<?php

		$gallery = get_post_gallery( $post, false );
		foreach( $gallery['src'] as $cnt => $src ) :

			if($cnt == 0) :
				//画像IDをゲット
				$id = explode(",", $gallery["ids"])[$cnt];
		?>

				<a href="<?php echo $src;?>">
					<img src="<?php echo wp_get_attachment_image_src($id, "thumbnail")[0];?>" >
				</a>

			<?php else: ?>

				<a style="display: none;" href="<?php echo $src;?>"></a>

			<?php endif; ?>
		<?php endforeach; ?>

	</div>

<?php endif?>

 
ポイントは、1枚目の画像だけ表示して、2枚目以降はdisplay:none;です。
記事ページの小さく表示する写真は1枚目だけで良いので、2枚目以降は小サイズの画像を取得しません。
 
※lighgallery.jsのサムネイル機能を使うときに、小サイズ画像を使用して動作を軽くするオプションもあるので、後日書きます。
 
そして、最後に
 

<script type="text/javascript">

	lightGallery(document.getElementById('gallery0'), {
		thumbnail:true
	});
</script>

ギャラリーを取得したら、ソースコードの最後のあたりにこれを書きます。
ギャラリーを囲ってるブロックをIDで指定しています。
また、thumbnail:trueでサムネイル機能をオンにしてます。
動作サンプルで確認してね。

②アルバムの作り方lightgallery.jsとWordPressの組み合わせ | ブルーシュカンパニー

<<次の記事

③アルバム複数設置(各アルバムは独立)lightgallery.jsとWordPressの組み合わせ

前の記事>>

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