※ （この記事を書いたときはブログソフトがMovable Type でしたが、現在はWordpress に変更したため、デモ画面は動作しません）
私がブログを書く時には、文字での説明よりわかやすいだろうと思って、写真や動画を多く載せるようにしています。
７年前にブログを始めたばかりの頃の記事の写真は、数も少なくサイズもかなり小さいものを掲載していました。
そして小さい画像をクリックすると、別画面で大きな画像が開くようになっていました。
最近は、記事の数も増えそれに伴って写真の数も多くなり過ぎたので、掲載する写真をそこそこ大きなもの（480pxか560px）にして、サムネイルと原寸サイズの画像の二つをアップしないで、一つだけにしてしてしまうことが多くなりました。
それでも、中には「これは是非大きなサイズで見てもらいたい！」という写真や地図には、やはり原寸サイズの画像もアップしたくなります。
そんな時、大きな写真が表示される時、単に別画面に表示されるのではなく、他の方のブログで見かけるような「うにぃ、うにぃ」という感じで同じ画面の中で表示される方がかっこいいかなと思って、自分のブログでもやってみました。
調べてみると、JavaScriptを使って実現する方法がいくつか紹介されていました。
その中でも比較的導入が簡単そうで、しかも過去に書いたブログ記事の写真部分の表示を、書き換えないでもすむ「FancyZoom」を導入して見ることにしました。
出来上がりはこんな感じです。
（※ 下の画像をクリックすると、同じ画面の中で拡大します。
拡大した画像を、もう一度クリックする元のサイズに戻ります）
（※ クリックしても、ズームしながら拡大しない時は、サイトを再読み込み、「F5」キーを一二度クリッしてみてください。）
■ 導入方法
まずは、次のサイトから「FancyZoom package（FancyZoom 1.1.zip (53 KB)」をダウンロードします。
zipファイルを解凍すると「__MACOSX」と「FancyZoom 1.1」の二つのフォルダーが出来ますが、「__MACOSX」はマック用らしいので使用しません。
「FancyZoom 1.1」フォルダーの中にある、「images-global」と「js-global」の二つのフォルダーを使用します。
このうち、「images-global」「zoom」フォルダーの中にあるのは画像ファイルで、拡大表示した写真に閉じる「closebox.png」アイコンや画像まわりの薄い影、時間経過を示す回るアイコンを表示させるものです。
しかしこのアイコンは、なぜか Internet Explorer ではうまく表示されず、Firefox や Google Chrome ではちゃんと表示されます。
もう一つのフォルダー「js-global」を開き、この中の「FancyZoom.js」をテキストエディターで編集します。
44行目付近にある次の行を
var zoomImagesURI = ‘/images-global/zoom/’; // Location of the zoom and shadow images
↓ ↓
var zoomImagesURI = ‘http://harley-davidson.ddo.jp/images-global/zoom/’; // Location of the zoom and shadow images
このように自分がアップしたサイトへのパスに書き換えてから二つのフォルダーごと、自分のサイトのルートに近いところにアップロードします。
私は、「http://harley-davidson.ddo.jp/」の直下に置きました。
ファイル構成はこんな感じになりました。
次に表示させたいサイトのテンプレートを書き換えます。
HTMLの<head>セクションに次の行を追加します。
<script src=”http://harley-davidson.ddo.jp/js-global/FancyZoom.js” type=”text/javascript”></script>
<script src=”http://harley-davidson.ddo.jp/js-global/FancyZoomHTML.js” type=”text/javascript”></script>
同じく、 <body>タグにonload=”setupZoom()”を追加します。
<body onload=”setupZoom()”>
これらを、メインページ、エントリーアーカイブ、カテゴリーアーカイブ、日付アーカイブのそれぞれに同じように記載します。
<body>タグの部分については、
日付アーカイブなどは、
<body class=”layout-two-column-right date-based-archive”>
となっている部分の後ろに追記すればいいので次のようになります。
<body class=”layout-two-column-right date-based-archive” onload=”setupZoom()>
でも、エントリーアーカイブは、
<body class=”layout-two-column-right individual-entry-archive” onload=”individualArchivesOnLoad(commenter_name)” >
となっていて既に「onload=” ”」が使われています。
このままでは重複しての使用は出来ませんので回避する必要があるのですが、面倒なので単純に元の「onload=” ”」を取ってしまい、
<body class=”layout-two-column-right individual-entry-archive” onload=”setupZoom()>
としてしまいました。
でも「individualArchivesOnLoad」が無いと、コメント入力欄に名前やメアド、urlを記入した後「この情報を登録しますか?」にチェックを付けても次回入力時に反映出来ないので不便です。
そこで、<body>タグ内の最後の方に、
<script type=”text/javascript”>
<!–
individualArchivesOnLoad(commenter_name);
//–>
</script>
を追加しました。
これで動作しているようですが、どこかに不具合が出ているのかもしれません。
その時に対象しようかなと思っています。
これで、原寸サイズの画像があるサムネイルを表示する時にちょっぴりカッコよくなったかなと思っています。
コメント
がっちゃん さんへ、
コメント、ありがとうございます。
同じような世代で、バイクの乗り始めた時期も
最初の原付バイクも同じ、さらに次のバイクがホーク！
（私は250ホークでしたが）とは奇遇ですね。
奥様の了承も得られたということは、
ハーレーライフも、もう目前ですね。
ファットボーイローは、ハーレーらしいバイクですね。
ノーマルのままでも、カスタマイズしても、どちらでもサマになりそうです。
こちらこまたコメント、よろしくお願いします。
hal さんへ、
他の方のサイトでも、いろいろと
カッコいい動きをするものがありますね。
今回は、設定が楽な割に見た目に良さそうなので
導入してみました。
私の場合は自宅サーバなので好き勝手出来ますが、
プロバイダのブログだといろいろ制約がありそうです。
ライブドアブログでの導入事例もあるようですが、
ひと工夫、必要そうですね。
こちらのサイトが参考になるでしょうか。
http://blog.livedoor.jp/inushiki/archives/869588.html
ＤＯＮ さんへ、
画像を縮小するだけならPhotoshopを使うより
デジカメに付属してきたソフトや、
フリーソフトの方が一括処理出来て便利ではないですか。
私はフリーの「チビすな!!」を使っています。
http://homepage3.nifty.com/metis/
Exifデータも残す事も可能なので便利です。
単に写真を縮小表示、クリックで拡大するだけなら、
今のDONさんの写真のまま、縮小画像を作らなくても、
< src=”http://image.space.rakuten.co.jp/lg01/52/0000516752/32/imgddcc5621zik8zj.jpeg” width=”624″ height=”468″ alt=”イベント.jpg” border=”0″>
を
<a href=”http://image.space.rakuten.co.jp/lg01/52/0000516752/32/imgddcc5621zik8zj.jpeg”><img alt=”イベント.jpg” src=”http://image.space.rakuten.co.jp/lg01/52/0000516752/32/imgddcc5621zik8zj.jpeg” width=”312″ height=”234″ border=”0″ /></a>
と書き換えるだけでも出来ますよ。
ただし､元画像が画面より大きすぎる場合は縮小が必要ですね。
『サンプルです』
http://biketoshumi.chips.jp/wp/wpcontent/uploads/donsann_test.html
※上の写真は、元の表記のままで、下の写真が修整したものです。
クリックすると別画面で元画像が開きます。
いやー！我が家も試してみます！
いつもフォトショップで小さくして、それを加工したりしていました。
大きく撮影して小さくするのは時間もかかるし！
早速！やってみます。
こんにちは・・・
写真の拡大とても良いですね。
これは、レンタルサーバとかを借りている場合に出来るのでしょうね。
私のようにブログそのものが借り物（livedoor）の場合は無理なんでしょうね。
はじめまして。ブログ楽しみに拝見しております。
現在私は、50才になります。
経歴を見ていてビックリです、私が初めて買ったバイクは、16歳で白のCB50JX-1で、二第目がホンダのｽｰﾊﾟｰﾎｰｸ3でした。
家のローンも後1年で完了します。
妻から完済後は、バイク購入のお許しが出たので何軒かのハーレー代理店に行き、
ﾌｧｯﾄﾎﾞｰｲﾛｰが気に入りました。今週末試乗に行ってきます。
来年の今頃は、ﾊｰﾚｰのオーナーになれるよう夢見ています。
これからもブログ楽しみにしています。
おくさん さんへ、
自宅サーバでMovableTypeを自分で入れているブログなので
割と自由に加工する事が出来ます。
おくさんのブログは、
写真もそうですが、あのプロ級のイラストが最高ですね。
大きくなるのを表現するの、なんと言っていいのかわからず、
「うにぃ、うにぃ」という感じと書いてしまいました。
ちなみにサンプルの写真は、
昨年行ったアルプスで、ホテルの部屋から撮影した
マッターホルンの朝焼けの写真です。
うにぃうにぃと大きくなるのいいですね。
わたしも、写真は多くのせるようにしてるんですが、
容量がいっぱいになり、のせられなくなることが、たまに．．．．（＾＾；）。
これは大きい写真で！っていうときはいいですよね。