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のサムネイル画像のサイズを小さくして動作を軽くする
 
③に続き、今度は、複数アルバムを設置し、そして各アルバムの全画像をまたがってスライドできるやつです。
基本設定は①基本の使い方、ギャラリーを複数設置する方法は
③アルバム複数設置(各アルバムは独立)を見てください。
テンプレートのソースコードだけ解説します。
 

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

	<!--ギャラリーのブロックは1つだけ-->
	<div id="gallery0">

		<?php

		//複数形!!
		$galleries = get_post_galleries( $post, false );
		$number = 1;

		foreach( $galleries as $gallery ) : ?>


			<?php 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 href="<?php echo $src; ?>"></a>

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

	</div>

<?php endif?>

 
ギャラリーを複数設置するところは③とおなじだけど、ギャラリーを囲ってるブロックを1つだけにするのがポイントです。
そして、最後のギャラリーを起動させるJavaScriptの記述も、1つだけです。

<script type="text/javascript">
lightGallery(document.getElementById('gallery0', {
	thumbnail:true
});
</script>

サムネイル機能を使わないならthumbnail:trueは書かなくていいです。

動作サンプルで確認してね。

④アルバム複数設置(全画像表示)lightgallery.jsとWordPressの組み合わせ | ブルーシュカンパニー

<<次の記事

lightgallery.jsの画像が1枚だけの場合サムネイルが表示されない問題

前の記事>>

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