WordPressギャラリーの作り方［4］fancyboxを組み込み

Posted on by vision2019

fancyboxを組み込んで見栄えを良くします。

デフォルトのままだと、写真（サムネイル）をクリックすると、大きい写真が別ページで表示されるだけの仕様です。
そのためjQueryのfancyboxを組み込んでポップアップウインドーで写真が表示されるようにします。

fancyboxをダウンロードします。

公式サイトよりfancybox一式をダウンロードします。
http://fancybox.net/
右上にあるリンクからfancyBox2をダウンロードしてください。

211

WordPressへの組み込み方法は別の機会に投稿します。
今回は、お使いのテーマにfancyboxのスクリプトが組み込まれていることを前提に解説します。

スクリプトコードの追記

WordPressのギャラリーでfancyboxが動くように、head下にコードを追記します。

<script type="text/javascript">
jQuery(document).ready(function($){
$(".gallery-icon a").addClass("fancybox");
$('a.fancybox').fancybox({
	autoSize: false,
	maxwidth: 800,
	});
});
</script>

2行めから
Wordpressのギャラリーが書き出す、
〈dt class=’gallery-icon landscape’〉
〈a href=’http://www.yourname.com/wp-content/uploads/2016/11/filename.jpg’〉
の「a」タグの中に「fancybox」のクラスを追記するコードです。
3行めは
「a」タグに「fancybox」のクラスがあったらfancyboxを動かすというコードです。
5行めと6行めは
見栄えを良くするために、幅が最大でも800pxを超えないように指定しています。

表示を確認します。

fancyboxの動作確認をします。ポップアップが開けばOKです。
212