Webページ内で貼られている画像の中には、クリックすると拡大された画像を表示するものがあります。
あれは画像自体にリンクを貼って、クリックするとそのリンク先（この場合は拡大画像）に飛ぶように設定されているためです。
しかし、HTML標準のリンクでは、リンクをクリックするとページが更新されるか新しく別窓を開く設定になってしまいます。拡大画像を見たいだけなのに一々別窓が開くのは鬱陶しいの一言です。 Webサイトの運営者の中には改善したいと考えている方も多いでしょう。
そこで、別窓を開かず画像を拡大してくれるJavaScript「FancyZoom」を紹介します。
以下、そのサンプルです。
▲サンプル画像。クリックするとポップアップ形式で拡大。
※Webサイト運営者向けの記事です。ユーザー（閲覧者）が導入するものではないのでご注意ください。
FancyZoom
ダウンロードページ ： FancyZoom 1.1
ライセンス ： 非商用なら無料。商用1サイトに付き$39です。
jQuery版「FancyZoom」
○Fancy Zoom by John Nunemaker
http://static.railstips.org/orderedlist/demos/fancy-zoom-jquery/
Opensource - AJAX - Jquery Fancyzoom
http://www.dfc-e.com/metiers/multimedia/opensource/jquery-fancyzoom/
ライセンス ： GPLライセンスのようです。（以下、ライセンスの概要）
GPLは、プログラム（日本国著作権法ではプログラムの著作物）の複製物を所持している者に対し、概ね以下のことを許諾するライセンスである。
- プログラムの実行
- プログラムの動作を調べ、それを改変すること（ソースコードへのアクセスは、その前提になる）
- 複製物の再頒布
- プログラムを改良し、改良を公衆にリリースする権利（ソースコードへのアクセスは、その前提になる）
Wikipedia「GNU General Public License」より引用
特徴
- リンクされている画像を、別窓など開かずに拡大表示します。
- 設置が簡単。HEAD内に少しコードを書き加えるだけです。
- ブログサービスでも利用しやすい。
- 過去のページにあるサムネイル画像まで対応してくれます。
設置方法
- 「FancyZoom 1.1.zip」をダウンロード後、解凍。中に入っている画像ファイルをすべてサーバー内にアップロードします。
- 「FancyZoom.js」を開き、44行目（var zoomImagesURIの行）のコードを改変、先ほどアップロードした画像フォルダへパスを通します。
- 「FancyZoom.js」「FancyZoomHTML.js」のふたつをサーバーにアップロードします。
- 各ページの<head> ～ </head>でJavaScriptを呼出します。
次に<body>タグ内から関数「onload="setupZoom()"」を呼び出します。
これで画像へリンクを貼った全てのページにある<img>タグに対して適用されポップアップするようになります。
拡大させたくない場合
「rel="nozoom"」を加える。
<a href="~.jpg"><img rel="nozoom" src="~small.jpg" /></a>
詳細な設置法解説
ここは一応「初心者講座」を謳っているのでもう少し具体的に解説します。
とはいえ、基礎的なブログ管理の知識が必要ですので、以下の内容がわからないという方は一度勉強なさってから挑戦すると良いでしょう。（最低でも「アップロード方法」「リンクの概念」と「HTMLの基礎知識」が必要です。）
操作1 ： 「FancyZoom 1.1.zip」をダウンロード後、解凍。中に入っている画像ファイルをすべてサーバー内にアップロードします。
ダウンロードページから「FancyZoom 1.1.zip」をダウンロードして解凍します。すると「__MACOSX」と「FancyZoom 1.1」のふたつのフォルダが解凍されます。
そのうち「FancyZoom 1.1」の中にある「images-global」内の画像をすべてサーバーにアップロードします。「zoom」フォルダごとアップロードすればOKです。アップロードする場所は任意で問題ありません。操作2で画像フォルダへのパスを通します。
操作2 ： 「FancyZoom.js」を開き、44行目（var zoomImagesURIの行）のコードを改変、先ほどアップロードした画像フォルダへパスを通します。
どんなソフトを使ってもいいので「js-global」フォルダ内にある「FancyZoom.js」（本体であるJavaScriptファイル）を開きます。メモ帳で開きたい場合は拡張子を「FancyZoom.js.txt」とすればOKです。
開いたら、44行目「var zoomImagesURI ="~~";」の「"~~"」で囲まれた部分を先ほどアップロードした画像フォルダのURLに改変します。（絶対パスだと安全。相対パスだとFancyZoom.jsの場所によってパスが変わってくるため。サーバー内のFancyZoom.jsの場所がすでに決まっているならば相対パスでも問題ない。）
▲クリックで拡大
操作3 ： 「FancyZoom.js」「FancyZoomHTML.js」のふたつをサーバーにアップロードします。
そのままです。「FancyZoom.js」「FancyZoomHTML.js」のふたつをサーバーにアップロードしてください。これも場所は任意です。操作4でJavaScriptファイルを指定します。
操作4 ： 各ページの<head> ～ </head>でJavaScriptを呼出します。
次に<body>タグ内から関数「onload="setupZoom()"」を呼び出します。
各ページの<head> ～ </head>内でJavaScriptを呼出すコードを記述します。以下のように記述します。（※リンク部分はアップロードしたJavaScriptファイルの場所を指定してください。）
<script src="/xxxxxxxx/FancyZoom.js" type="text/javascript"></script> <script src="/xxxxxxxx/FancyZoomHTML.js" type="text/javascript"></script>
さらに<body>タグ内から関数「onload="setupZoom()"」を呼び出すため、以下のようにコードを記述します。
<body onload="setupZoom()">
以上で導入は完了です。以下のように記述された画像リンクすべてに適用されます。
<a href="~.jpg"><img src="~small.jpg" /></a>
他にもJavascript onloadがある場合
Javascript onloadが他にも複数ある場合は、上手く作動しないことがあります。「window.onload」が複数ある場合、一番最後に実行されたものが優先されてしまうからです。
解決法は以下のサイトで詳しく書かれています。
○Javascript onloadが複数ある場合の対処法 ～FancyZoomとCubeブログシールを共存させる - ブログ・カスタマイズ徒然記
HTMLでの呼び出し方である「onload="setupZoom()"」を、Javascriptによる呼び出し方である
「window.onload = function() {setupZoom();}」に変更させ、「window.onload」を複数実行できるよう外部スクリプトファイルを置くという手法です。
function addOnloadEvent(fnc){
if ( typeof window.addEventListener != "undefined" )
window.addEventListener( "load", fnc, false );
else if ( typeof window.attachEvent != "undefined" ) {
window.attachEvent( "onload", fnc );
}
else {
if ( window.onload != null ) {
var oldOnload = window.onload;
window.onload = function ( e ) {
oldOnload( e );
window[fnc]();
};
}
else
window.onload = fnc;
}
}
以上のコード通りに記述したJavascriptファイル（.js）を作成しアップロードします。これをJavascriptの冒頭に設置、読み込ませます。（一番最初に読み込ませる）
その後、以下のコードを加えます。このとき、<body>タグ内の「onload="setupZoom()"」は削除します。
<script type="text/javascript"> addOnloadEvent(function() {setupZoom();}); </script>
これで他のwindow.onloadを使用しているスクリプトを読み込んだとしても、正しく実行できるようになるようです。（当ブログでもやっています）
まとめ
以前から「拡大画像を表示させるたびに別窓（タブ）が開くのは面倒だろうな～」と思っていたので良いスクリプトがないか探していました。この「FancyZoom」はそんな悩みを一気に解決してくれたためこれからも重宝すると思います。
導入もちょこっとHEADにJavaScriptを加えるだけですので記事自体を書き換える必要もなく、すべての画像リンクに適用できるので本当に便利です。
無料のブログサービスでも「JavaScriptのアップロードと実行」「画像をフォルダ単位で管理可能」なブログであるなら簡単に導入できます。ぜひ試してみてはいかがでしょうか。
Comments [5]
んかめんさん
このサイトの、
＞そこで、別窓を開かず画像を拡大してくれるJavaScript「FancyZoom」を紹介します。
＞以下、そのサンプルです。
＞▲サンプル画像。クリックするとポップアップ形式で拡大。
は別窓で開いてしまい、ポップアップしませんよ。当方、Mac leopard, safari and FireFox(3.6.27)です.
他のサイトのFancyZoomはポップアップしますので、このサイトの組み込みが悪いのではないでしょうか？
管理人さんから んかめんさんへの返信
え、ほんとですか？
私のところではWindows7 で FireFox（10.0.2） でも safari（5.1.2） でも動作しますね。safariですとちょっと挙動が怪しいですが、ポップアップはします。
たまにページが重くなるときがありまして、jsのロードが遅れるとある程度時間がたってもポップアップしないことはありますが、ロードが完了すれば動作するはず・・・
ん～調査してきます！
＝＝ 2012年3月6日 追記 ＝＝
まず思いついたのが「onload」の重複。回避方法はここの記事にも書いてあります。私のブログでは確か重複しなかったのでここはさぼってたのですが、真面目に回避してみました。
「addonload.js」を冒頭で読み込ませ、bodyにある「onload="setupZoom()"」も削除。当方の環境ではこれで動作確認いたしました。
確認したブラウザはIE9、IE8、IE7、Google Chrome、Lunascape、Firefox、Safar、Opera、それぞれ現時点で最新版のものを使用しました。私のところでは、これらすべてのブラウザで動作を確認いたしました。Firefoxに関しましては別に「ver 3.6.27」もインストールし検証してみましたが、きちんと動作しているようです。
次にお使いのOSがMacという点。OSで左右されるとは思わないのですが一応調査。しかし、特に目立った記事もなし。
最後に、このブログはHTML5でできているということ。これで特有の不具合があるかもしれないと睨む。
これも調査してみたのですが、同じく目立った不具合も見つからず・・・
jQuery版を試すという手もまだ残ってますが、私の技術では現在状況が再現できません。
もし、ページのロードが完全に完了したにも関わらず動作しない場合は、申し訳ありませんが現状私では手が打てません。
ん～何が原因なんだろう。
んかめんさん
勝手に込めんとしたのに真面目に対応してくれてて少し恐縮です。
先ほどクリックしてみましたら、今は正常に同じページ内でポップアップしています。
（ただし、firefoxは起動してすぐにこのページを開いてクリックすると前回とおなじ別タブ表示でした。なぜかは不明です。リトライしたらポップアップしてくれます。リロードしたら１回目クリックはまたタブで開き、以降はまた正常動作します。）
いずれにせよ、改善はしているようです。何が効いたのかは知りませんが。。。
どうもです。
んかめんさんさん
訂正
firefox、1回目でも正常動作確認しました。
（正確には、ページが完全に読み込まれる前にクリックするとタブ表示になります。）
管理人さんから んかめんさんさんへの返信
ご連絡ありがとうございます。
そうですか、一応動作はしてくれましたか。安心しました。
あとはこのブログをいかにして軽くするか・・・ですね。そうすればJSのロードも早くなるはすですのでラグも少なくなると思います。結構大変なんですけどね（笑
＞勝手に込めんとしたのに真面目に対応してくれてて少し恐縮です。
いえいえ、趣味でやってることですから。楽しんでますので大丈夫です。私もコメントがあると嬉しいですから。