サンプルまとめページはこちら
①基本の使い方 – lightgallery.jsとWordPressの組み合わせ
②アルバムの作り方 – lightgallery.jsとWordPressの組み合わせ
③アルバム複数設置(各アルバムは独立) – lightgallery.jsとWordPressの組み合わせ←いまここ
④アルバム複数設置(全画像表示) – lightgallery.jsとWordPressの組み合わせ
lightgallery.jsの画像が2枚だけのときスライド方向が逆になる
lightgallery.jsの画像が1枚だけの場合サムネイルが表示されない問題
WordPressの画像情報を取得してlightgallery.jsのキャプションにする
lightgallery.jsのサムネイル画像のサイズを小さくして動作を軽くする
今回は、①、②と違う関数が出てきます。
get_post_galleries()です。
①・②はget_post_gallery()でした。複数形になってるので注意してください。
まずは、①基本の使い方でギャラリー設置してください。
このとき、ギャラリーを複数設置します。
記事画面はこのようになります。
そしてソースコードです。
<?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:trueとgalleryIdを記述すること。
numberは、上で各ギャラリーのブロックに振った数になります。
動作サンプルで確認してね。