画像をクリックしたらズームする仕掛け(改訂版)
マナカナ・イラスト・ギャラリーとねんど作品ページを開始しています。
- マナカナ・イラスト・ギャラリー始動: プラスα空間 (2014年4月25日)
- ねんど作品ギャラリーを開設しました : プラスα空間 (2014年6月28日)
これらのページでは、prettyPhotoというスクリプトを使っており、作品のサムネイルをクリックするとじわ〜っと拡大表示されるようにしています。
WordPress用のプラグインも多数出ていますが、簡単だったので、私はテーマのfunctions.phpに直接書きました。最初に作った時は、WordPressのプラグインの作法を知らず、間違った作り方になっていました。
手順自体は、最初にやった方法とほぼ同じで、JavaScriptとCSSを登録する方法が違います。
- “prettyPhoto_compressed_3.1.6.zip"をダウンロードして、展開する
- 展開した物の内、"css", “images", “js"をWordPressのトップディレクトリに移動
- prettyPhotoを呼び出すJavaScript追加
- テーマのfunctions.phpに記述追加
- 一枚の画像を拡大表示する場合の例
普通にプラグインを探してきて、インストールした方が早いかも知れません。
1. “prettyPhoto_compressed_3.1.6.zip"をダウンロードして、展開する
次のサイトから、"prettyPhoto_compressed_3.1.6.zip"をダウンロードして、展開します。
ただし、中身が、中間階層無しに直接展開されるので、新しいフォルダを作って、その中で展開した方が良いと思います。
2. 展開した物の内、"css", “images", “js"をWordPressのトップディレクトリに移動
展開したフォルダの中に、"css", “images", “js"をWordPressのトップディレクトリ、つまり"wp-config.php"があるディレクトリに移動します。もし、同名のフォルダがあるなら、中身だけ移動して下さい。
3. prettyPhotoを呼び出すJavaScript追加
これも、好みの問題なのですが、私は専用のJavaScript(“prettyPhoto.enable.js")を作り、上記"js"の中に保存しています。prettyPhotoを呼び出す最後の引数の後ろに","があると、IEだとおかしくなるそうです。
jQuery(document).ready(function () {
jQuery("a[rel^='prettyPhoto']").prettyPhoto({
allow_resize: true,
social_tools: false,
show_title: false,
default_width: 640,
default_height: 640
});
});
オプションの設定に付いては、次のウェブページを参考にしています。ありがとうございます。
このページにも書かれている様に、prettyPhotoには、元々ソーシャルアイコン(Facebookとかtwitter)を表示しない様にするオプションが用意されています。prettyPhotoの解説ページを見ると、prettyPhotoのコードを編集して、ソーシャルアイコンを消してしまう改造を加えている物が散見されます。
4. テーマのfunctions.phpに記述追加
prettyPhotoのコード(CSSとJavaScript)を呼び出す為に、functions.phpに追加しています。CSSを追加する時はwp_register_style()とwp_enqueue_style()を、JavaScriptを使う時はwp_enqueue_script()を使います。
実際のスクリプトです。マルチサイト前提になっています。
/* prettyPhoto */
add_action( 'wp_enqueue_scripts', 'theme_prettyPhoto_css' );
function theme_prettyPhoto_css() {
wp_register_style(
'prettyPhoto',
network_home_url('/css/').'prettyPhoto.css'
);
wp_enqueue_style( 'prettyPhoto' );
}
add_action( 'wp_enqueue_scripts', 'theme_prettyPhoto_js' );
function theme_prettyPhoto_js() {
wp_enqueue_script(
'theme_prettyPhoto_js',
network_home_url('/js/').'jquery.prettyPhoto.js',
array( 'jquery' ),
'3.1.6'
);
wp_enqueue_script(
'theme_prettyPhoto_enable_js',
network_home_url('/js/').'prettyPhoto.enable.js',
array( 'theme_prettyPhoto_js' ),
'3.1.6'
);
}
CSSとJavaScriptの設定方法は、次の本で知りました。この本、本当にオススメです。
[amazonjs asin="B00M939Y0I" locale="JP"]5. 一枚の画像を拡大表示する場合の例
次の様なコードを、直接HTMLに埋め込みます。’rel="prettyPhoto"'を追加するのが、肝です。
<a href="原寸画像のURL" rel="prettyPhoto">
<img src="サムネイル画像のURL" alt="画像の説明" width="150" height="150" />
</a>
prettyPhotoのページに、色々な例が載っていますので、参考にして下さい。