Bloosh Company

2021年3月1日

Development>フロントエンド

2. アルバム複数設置(各アルバムは独立) – lightgallery.js WordPressギャラリー事例

, , ,

2021.10.19 編集。
lightgallery.js Ver1の話です。Ver1とVer2があり、商用利用する場合はVer2は有料です。
lightgalleryに関する新しい記事はこちら
Ver1公式サイトはこちら
Ver2公式サイトはこちら
※個人的にはギャラリー機能はもう使わないのですが、過去記事として残しています。
WordPressギャラリー機能についてはこちら
 
 
今回は、②と違う関数が出てきます。
get_post_galleries()です。
②はget_post_gallery()でした。複数形になってるので注意してください。
まずは、WordPressの管理画面でギャラリー設置してください。
このとき、ギャラリーを複数設置します。
記事画面はこのようになります。

そしてソースコードです。

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

		<?php

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

		foreach( $galleries as $gallery ) : ?>

			<!--各ギャラリーのブロックに番号を振る-->
			<div id="gallery<?php echo $number ?>">

			<?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; ?>
			</div>
			<?php $number++; ?>
		<?php endforeach; ?>

<?php endif?>

そして最後のほうに、IDを振って起動させます。
ギャラリーの数が少ないなら1つずつベタ書きでいいですが、多い場合はJavaScriptのなかにPHPのforを書いちゃいます。

<script type="text/javascript">
<?php for($i = 1; $i < $number; $i++) : ?>

let lg<?php echo $i?> =
		document.getElementById('gallery<?php echo $i?>');
lightGallery(lg<?php echo $i?>, {
	thumbnail:true,
	hash:true,
	galleryId:<?php echo $i ?>
});

<?php endif; ?>
</script>

 
ポイントは、hash:truegalleryIdを記述すること。
numberは、上で各ギャラリーのブロックに振った数になります。
動作サンプルで確認してね。

2. アルバム複数設置(各アルバムは独立) – lightgallery.js WordPressギャラリー事例 #フロントエンド #JavaScript #lightgalleryjs #ギャラリー #軽量化

<<次の記事

3. アルバム複数設置(全画像表示)– lightgallery.js WordPressギャラリー事例

前の記事>>

1. アルバムの作り方 – lightgallery.js WordPressギャラリー事例