前回記事 の続きです。
今回の記事は前半が長いので、最初にページ内リンクを表示します。必要に応じて、読み飛ばしてください。
ポップアップ・ライブラリの紹介
今回試したライブラリは次の通り。
- FancyZoom 1.1
-
簡単な設定で導入できる。jQuery や Prototype などの外部ライブラリは必要としない。
ポップアップ表示の仕方が、個人的には最も好きだ。- ライセンス
- 非商用フリー／商用１サイト毎に３９ドル
- 参考
-
ぼくんちのTV別館 - FancyZoom
CABEL'S BLOG LOL - FancyZoom 1.1 - 設置方法
ダウンロードファイルを解凍し、js-global と images-global の各フォルダーをサーバにアップロードする。
このとき FancyZoom.js の zoomImagesURI に、次のようにライブラリが使用する画像の絶対パスを設定しておく（xxxxxはアップロード先サーバなどのパス）。
var zoomImagesURI = 'http://xxxxx/images-global/zoom/'; // Location of the zoom and shadow images
ブログ HTML の head タグ内に、次の記述を追加。
<script src='http://xxxxx/js-global/FancyZoom.js' type='text/javascript'></script> <script src='http://xxxxx/js-global/FancyZoomHTML.js' type='text/javascript'></script>
- ブログ全体でのポップアップ制御
HTML の body タグ内で次の設定すると、ブログ記事内の画像がすべてポップアップ表示になる。
<body onLoad="setupZoom()">
Blogger でも body タグに設定するそうだが、私の環境では動かなかった。動かない場合、代わりに window.onload を試してみるか、既に関数が割り当てられている場合などに使うイベント処理の追加を次のように head タグ内に記述する。
<script type='text/javascript'> if (window.addEventListener) window.addEventListener("load", setupZoom, false); else if (window.attachEvent) // for IE window.attachEvent("onload", setupZoom); else window.onload = setupZoom; </script>- 画像ごとのポップアップ制御
ポップアップしたくない場合、アンカータグに次の属性を設定する。
rel="nozoom"
- jQuery lightBox plugin 0.5
-
lightBox の jQuery 版クーロン。セレクタを使用してポップアップ画像の指定を行なえる。逆に lightBox の画像指定法であるアンカータグの属性 rel = "lightbox" はデフォルトでは対応していない。
- ライセンス
- クリエイティブ・コモンズ
- 参考
-
CSS Lecture - LightBoxのJQuery版 jQuery lightBox plugin
jQuery lightBox plugin - 設置方法
ダウンロードファイルを解凍し、css images js の各フォルダーをサーバにアップロードする。
このときライブラリが使用する画像の絶対パスを jquery.lightbox-0.5.js 内で変更するか、セレクタ設定時のオプションで指定する。
ブログ HTML の head タグ内に、次の記述を追加（xxxxxはアップロード先サーバなどのパス）。
<link href="http://xxxxx/css/jquery.lightbox-0.5.css" media="screen" rel="stylesheet" type="text/css" /> <script src="http://xxxxx/js/jquery.js" type="text/javascript"></script> <script src="http://xxxxx/js/jquery.lightbox-0.5.min.js" type="text/javascript"></script>
- ブログ全体でのポップアップ制御
画像の選択にはセレクタを使用する。例えば、HTML の head タグ内で次の設定すると、指定した要素の href リンクの画像がポップアップ表示になる（３行目のセレクタを設定すれば lightBox 互換となる）。
<script type='text/javascript'> jQuery(function($){ $('a[@rel*=lightbox]').lightBox(); // アンカータグ属性の rel に lightbox が含まれるとポップアップ表示 $('#gallery a').lightBox(); // gallery ID要素に含まれるアンカータグはポップアップ表示 $('a.lightbox').lightBox(); // lightboxクラスを持つアンカータグはポップアップ表示 $('a').lightBox(); // 全てのアンカータグはポップアップ表示 }); </script>またオプションでライブラリが使用する画像の絶対パスを指定するときは、次のようになる（lightBox互換セレクタで設定している）。
<script type='text/javascript'> jQuery(function($){ $('a[@rel*=lightbox]').lightBox({ imageLoading: 'http://xxxxx/images/lightbox-ico-loading.gif', imageBtnPrev: 'http://xxxxx/images/lightbox-btn-prev.gif', imageBtnNext: 'http://xxxxx/images/lightbox-btn-next.gif', imageBtnClose:'http://xxxxx/images/lightbox-btn-close.gif', imageBlank: 'http://xxxxx/images/lightbox-blank.gif' }); }); </script>- 画像ごとのポップアップ制御
デフォルトでは設定はないが、セレクタを使えば制御可能。
- FancyBox 1.3
-
Mac スタイルの lightBox という触れ込み。jQuery下で動作する。画像指定はセレクタを使う。
- ライセンス
- MIT/GPL
- 参考
-
CSS Lecture - Lightbox風のスクリプト FancyBox
fancybox - 設置方法
ダウンロードファイルを解凍し、fancybox フォルダーをサーバにアップロードする。
このとき fancy.css 内の画像パス定義を、すべて新しい絶対パスに変更する（urlやsrcで定義してある項目が３２個ぐらいある）。
ブログ HTML の head タグ内に、次の記述を追加（xxxxxはアップロード先サーバなどのパス）。jQueryも導入する必要があるため、Google ajax api を利用している（２行目）。
<link href='http://xxxxx/fancybox/jquery.fancybox-1.3.4.css' media='screen' rel='stylesheet' type='text/css'/> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.js' type='text/javascript'></script> <script src='http://xxxxx/fancybox/jquery.fancybox-1.3.4.pack.js' type='text/javascript'></script>
- ブログ全体でのポップアップ制御
画像の選択にはセレクタを使用する。例えば、HTML の head タグ内で次の設定すると、指定した要素の href リンクの画像がポップアップ表示になる。
<script type='text/javascript'> jQuery(function($){ $('a[rel*=fancybox]').fancybox(); // アンカータグ属性の rel に fancybox が含まれるとポップアップ表示 }); </script>- 画像ごとのポップアップ制御
デフォルトでは設定はないが、セレクタを使えば制御可能。
- SlimBox2
-
lightBox の jQuery版軽量クーロン。軽量と謳っているが、lightBox2 とは 100% 互換性があり、さらに高機能。
画像指定はセレクタで行う。デフォルトで rel = "lightbox" にも対応している。- ライセンス
- MIT
- 参考
- Slimbox 2, the ultimate lightweight Lightbox clone for jQuery
- 設置方法
ダウンロードファイルを解凍し、css と js フォルダーをサーバにアップロードする。
ブログ HTML の head タグ内に、次の記述を追加（xxxxxはアップロード先サーバなどのパス）。jQueryも導入する必要があるため、Google ajax api を利用している（２行目）。
<link href='http://xxxxx/css/slimbox2.css' media='screen' rel='stylesheet' type='text/css'/> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'></script> <script src='http://xxxxx/js/slimbox2.js' type='text/javascript'></script>
- ブログ全体でのポップアップ制御
画像の選択にはセレクタを使用する。例えば、HTML の head タグ内で次の設定すると、指定した要素の href リンクの画像がポップアップ表示になる。
<script type='text/javascript'> jQuery(function($){ $('a[rel*=slimbox]').slimbox(); // アンカータグ属性の rel に slimbox が含まれるとポップアップ表示 }); </script>- 画像ごとのポップアップ制御
デフォルトで rel = "lightbox" に対応している。さらにセレクタも使用可能。
ポップアップ・ライブラリ基本機能の比較
ポップアップ・ライブラリの基本的な機能について比較してみる。ライブラリの標準的な設定をもとに比較している。
| 設置 | ブログ全体でのポップアップ制御 | 画像ごとのポップアップ制御 | |
|---|---|---|---|
| FancyZoom | 普通 | 自動選択、カスタマイズ不可 | rel="nozoom"で適用しない |
| jQuery lightBox | 普通 | カスタマイズ可能 | カスタマイズ可能 |
| FancyBox | やや難しい | カスタマイズ可能 | カスタマイズ可能 |
| SlimBox2 | やや易しい | カスタマイズ可能 | カスタマイズ可能 |
設置の難易度はほとんど変わらない。FancyBox は css ファイルの３２箇所を絶対パスに書き換える必要があるので、少し難しい。逆に SlimBox は画像の絶対パスに関しては設定する必要がないので、比較的容易に導入できる。
ブログのポップアップ画像の選択制御に関しては、セレクタでカスタマイズできる jQuery 系のライブラリは柔軟性が高い。
ポップアップ・ライブラリ問題点の比較
実際のブログに適用して、動くかどうかテストをしてみた。これについても標準的な設定でテストを行なっている。
結論から言うと、どのライブラリにも問題があった。障害の切り分けのため、次のように問題点の比較表を作ってみた。
| 画像リンクタイプ | クロスブラウザ | |||||
|---|---|---|---|---|---|---|
| Picasaweb | Blogger upload | Firefox4 | Chrome11 | Opera11 | IE 8 | |
| FancyZoom | 遷移先で表示 | OK | 枠が崩れる | OK | 枠が崩れる | 動作が遅い |
| jQuery lightBox | 表示できない | OK | OK | OK | OK | エラー表示 表示できない |
| FancyBox | 表示できない | OK | OK | OK | OK | エラー表示 ポップアップ閉じれない |
| SlimBox2 | 表示できない | OK | OK | OK | OK | エラー表示 |
リストの「画像リンクタイプ」というのは、前回記事の 当ブログでの画像の取扱い方法について で画像挿入方法の違いのことを指している。
「Picasaでのウェブアルバム同期」で挿入するリンクは画像を単独で指したリンクではなく（直リンクでない）、ポップアップ・ライブラリでは表示できないようだ。逆に「Bloggerからのアップロード」のリンクは画像を単独で指したリンク（直リンク）で、普通のブログサービスで挿入する画像リンクと同一タイプということみたいだ。
クロスブラウザのテストは今回、Firefox4 Chrome11 Opera11 IE8 で検証してみた。特に IE でエラーが発生している。これは恐らく、他の JavaScript とコンフリクトしている可能性がある。
これらの問題解決については、次回の記事 に続きます。