昨晩からブログ内の画像をポップアップ形式でスムーズに拡大するスクリプトFancyZoom 1.1をいうものを導入してみました。
▲サンプル画像。
クリックすると画像がブラウザ内でスムーズに拡大、ポップアップ表示されます。
※2017年3月から画像拡大にはMagnific Popupを使っています
ブログやホームページを大掛かりな改造したりせず、HEAD内にチョコチョコっとJavaScriptを加えるだけで導入は超簡単。
過去ページのサムネイル画像（大きな画像にリンクしてあるもの）までポップアップに対応してくれるのが大きな魅力です。
FancyZoom
配布ページ：FancyZoom
ライセンス：非商用無料。商用1サイトに付き$39。
jQuery版が以下サイトで紹介されています
Fancy Zoom by John Nunemaker（リンク切れ）
http://orderedlist.com/demos/fancy-zoom-jquery/
Opensource - AJAX - Jquery Fancyzoom
こちらはGPLライセンスのようです。
設置の仕方
- ダウンロードした画像を自サーバ内にアップロード。
- FancyZoom.js内の44行目（var zoomImagesURIの行）で画像フォルダへパスを通す。
- FancyZoom.js、FancyZoomHTML.jsの2つのファイルをアップロード。
- 各ページでJavaScriptを呼出し、<body>タグ内から関数onload="setupZoom()"を呼び出す。
上記の手順で画像へリンクを貼った<img>タグが、全てブラウザ内でポップアップするようになります。
ポップアップしたくない場合
<a href="../big.png"><img rel="nozoom"src="../small.png" /></a>
自分用メモ: FancyZoomの改造してたら、nozoomタグが効かなくなった。
このサイト内の画像を別窓表示させたく無い場合はrel="lightbox"と指定する。
画像にタイトルを付けたい場合
<a href="../big.png"><img title="画像のタイトル" src="../small.png"/></a>
JavaScriptのアップロード、画像をフォルダ単位で管理出来るサービスならブログでも設置は簡単です。（Livedoorブログなどは難しいかも）
サイト内に他にもJavascript onloadがある場合
Javascript onloadが複数存在する場合、後者が優先され上手く作動しない場合があります。そんな場合の解決策が以下のサイトに記されています
Javascript onloadが複数ある場合の対処法 ～FancyZoomとCubeブログシールを共存させる : ブログ・カスタマイズ徒然記
FancyZoom 1.1はIEで作動しない？
導入にあたり、IEでは作動しない、モタつく、カクつく、などの評判を聞き色々テストしてみたのですが、サブ機のPentiumM1.6Ghz 512mb（XP SP3）のIE7でも気になるほどの速度低下は見られなかったので導入しました。
IE6の場合はかなり速度低下が見られましたが、それでも別窓が開く鬱陶しさや「戻る」ボタンで記事ページに戻る手間を考えるとFancyZoomを導入した方がWeb閲覧はスムーズに行える気がします。
（とはいえIEではFirefoxを使用した場合の半分くらいの速度しか出ないようです。）
FancyZoomのIEでの表示速度はサイトによってマチマチ？
FancyZoomを導入されたサイトさんをアチコチ見て回っていますが、IEでも十分な速度でポップアップ表示されているサイトさんがいくつかあります。どういう改造をされているのかただいま勉強中。
おまじない1
<meta http-equiv="Imagetoolbar" content="no" />
の一文を入れておくとIEでの表示が多少マトモになるようです。
IE6～7での表示速度は当方でも改善されました。
IE8で素早く表示されているサイトさんはどういう仕掛けをされているんだろう・・・？
また、IE、Firefox、Opera関係なく、Shiftキーを押しながら画像をクリックした場合はポップアップがもの凄くスローモーションになるみたいです。
個人的あとがき
PCのメイン環境をXPからWindows7に移行して、WindowsのGUIが大きく変化しました。このサイトのメイン記事の横幅は520ピクセル程度なのですが、Windows7の画像を使って解説を行おうとするとこの横幅では殆どの画像を縮小表示せねばならず、簡単に画像のポップアップ表示を行えるプログラムを探していました。
FancyZoomはHEADにJavaScriptを加えるだけで記事本文を書き換える必要がなく本当に助かります。