Bloosh Company

2021年3月1日

Development>WordPress

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

, , ,

2021.10.19 編集。
lightgallery.js Ver1の話です。Ver1とVer2があり、商用利用する場合はVer2は有料です。
lightgalleryに関する新しい記事はこちら
Ver1公式サイトはこちら
Ver2公式サイトはこちら
※個人的にはギャラリー機能はもう使わないのですが、過去記事として残しています。
WordPressギャラリー機能についてはこちら
 
 
WEBアルバムのように、先頭の画像だけ表示する。
左右ボタンを押すと、隠れた画像もスライドして切り替えできる。というやつです。
WordPressのギャラリー機能と組み合わせてみます。WordPressギャラリー機能についてはこちら
 
最初の設定はlightgallery.js v1 基本の使い方を見てください。
 
WordPressのギャラリーを設置したあとの、テンプレートファイルのソースコードだけ。


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

	<div id="gallery">

		<?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?>

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

 
ポイントは、1枚目の画像だけ表示して、2枚目以降はdisplay:none;です。
 
※lighgallery.jsのサムネイル機能を使うときに、小サイズ画像を使用して動作を軽くするオプションもあるので、後日書きます。
 
thumbnail:trueでサムネイル機能をオンにしてます。
動作サンプルで確認してね。

1. アルバムの作り方 – lightgallery.js WordPressギャラリー事例 #WordPress #JavaScript #lightgalleryjs #ギャラリー #軽量化

<<次の記事

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

前の記事>>

lightgallery.js v1 基本の使い方