画像をクリックしたらズームする仕掛け[追記あり]

2016年1月23日Web-log・ココログ関連,WordPress,パソコン・インターネット

(追記 2015-06-25)

改訂版を書きました。

以下の方法は、動作しますが、WordPress的には間違った方法です。間違ったやり方のサンプルとして残しておきます。

マナカナ・イラスト・ギャラリーを開始しました。

記念すべき、第一作は、次の物です。

サムネイル画像をクリックすると、じわーっと拡大します。次のprettyPhotoと言うソフト(JavaScript)を使っています

WordPress用のプラグインも多数出ていますが、簡単だったので、私はテーマのfunctions.phpに直接書きました。次の様な手順になります。

  1. “prettyPhoto_compressed_3.1.5.zip"をダウンロードして、展開する
  2. 展開した物の内、"css", “images", “js"をWordPressのトップディレクトリに移動
  3. “jquery.js"のリンク作成
  4. prettyPhotoを呼び出すJavaScript追加
  5. テーマのfunctions.phpに記述追加
  6. 一枚の画像を拡大表示する場合の例

う〜ん、結構めんどうだったのかも。普通にプラグインを探してきて、インストールした方が早いかも知れません。

1. “prettyPhoto_compressed_3.1.5.zip"をダウンロードして、展開する

次のサイトから、"prettyPhoto_compressed_3.1.5.zip"をダウンロードして、展開します。

ただし、中身が、中間階層無しに直接展開されるので、新しいフォルダを作って、その中で展開した方が良いと思います。

2. 展開した物の内、"css", “images", “js"をWordPressのトップディレクトリに移動

展開したフォルダの中に、"css", “images", “js"をWordPressのトップディレクトリ、つまり"wp-config.php"があるディレクトリに移動します。もし、同名のフォルダがあるなら、中身だけ移動して下さい。

3. “jquery.js"のリンク作成

これは、好みの問題ですが、"jquery.js"から"jquery-1.6.1.min.js"にシンボリックリンクを張りました。この"js"フォルダには、いくつかのバージョンの"jquery-*.min.js"が置かれているので、呼び出す側のJavaScriptになるべく影響を与えたくなかった為です。

4. prettyPhotoを呼び出すJavaScript追加

これも、好みの問題なのですが、私は専用のJavaScriptを作り、それを呼び出す様にしました。

$(document).ready(function(){
  $("a[rel^='prettyPhoto']").prettyPhoto({
    allow_resize: true,
    social_tools: false,
    show_title: false,
    default_width: 800,
    default_height: 800
  });
});

(追記 2014-05-01 19:55 prettyPhotoを呼び出す最後の引数の後ろに","があると、IEだとおかしくなるそうです。

)

このスクリプトを、上記"js"の中に、"prettyPhoto.enable.js"と言う名前で保存しています。

私がこのようにした理由は、ページの表示の高速化の為に、次のプラグインを入れている為です。ページ中に生のJavaScriptが書かれてていると、Head Cleanerでまとめられてしまうのが嫌でした。

オプションの設定に付いては、次のウェブページを参考にしています。ありがとうございます。

このページにも書かれている様に、prettyPhotoには、元々ソーシャルアイコン(Facebookとかtwitter)を表示しない様にするオプションが用意されています。prettyPhotoの解説ページを見ると、prettyPhotoのコードを編集して、ソーシャルアイコンを消してしまう改造を加えている物が散見されます。

5. テーマのfunctions.phpに記述追加

prettyPhotoのコード(JavaScriptとCSS)を呼び出す為に、wp_headに追加しています。

add_action('wp_head', 'my_prettyPhoto');
function my_prettyPhoto() {
        switch_to_blog(1);
        echo '<script src="'.home_url().'/js/jquery.js" type="text/javascript" charset="utf-8"></script>'."\n";
        echo '<link rel="stylesheet" href="'.home_url().'/css/prettyPhoto.css" type="text/css" media="screen" title="prettyPhoto main stylesheet" charset="utf-8" />'."\n";
        echo '<script src="'.home_url().'/js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"><script>'."\n";
        echo '<script src="'.home_url().'/js/prettyPhoto.enable.js" type="text/javascript" charset="utf-8"></script>'."\n";
        restore_current_blog();
}

私のサイトは、マルチサイトで運用しているので、デフォルトブログ(1)に切り替えてから、URLを参照しています。

6. 一枚の画像を拡大表示する場合の例

次の様なコードを、直接HTMLに埋め込みます。’rel="prettyPhoto"'を追加するのが、肝です。

<a href="原寸画像のURL" rel="prettyPhoto">;
<img src="サムネイル画像のURL" alt="画像の説明" width="150" height="150" />;
</a>;

茉奈Q 佳奈Q

prettyPhotoのページに、色々な例が載っていますので、参考にして下さい。

Posted by お市のかた