iPhoneでLightboxが動作しなかったので、
代替のパッケージを調査してみた
発生する問題
調べてみたところ、次の3つの問題がある事が分かった。表示位置がずれる
本来タップした位置ではなく、かなり上の方に表示される。画面の暗転が起きるので動作しているのは分かるのだけれど、画像が表示されるように見えない。
ダウンロードが出来ない
画像の表示は上手くいってもiPhoneでは画像をプレスすると「画像を保存」と「コピー」が表示されるのが、リンクとして認識され「開く」と「新規ページで開く」、「コピー」が表示されダウンロードできない。これだと、壁紙画像とか作っても使えないので困る
動作が重い
スマートフォンでも使うからこそ動作速度、容量ともに軽量なものが望ましい調査したパッケージ
元祖Lightbox
表示位置 ×
ダウンロード ○
軽さ ○
Firespeedでも長く使用していたLightbox
フレームワークに依存しない設置の容易さが特徴
今見ると対応しているのが画像だけだったり、複数画像の連続表示ができなかったりと機能の少なさが目立つものの、当時は衝撃的だった。
これだけクローンが出ているのが何よりの証拠
iPhoneでは表示位置がずれる問題が発生。
本家ではprototype.jsを使ったlightbox2もある。
prettyPhoto
表示位置 ○
ダウンロード ×
軽さ ×
デザインセンスが美しいプラグイン
ダウンロードの問題と、動作が重いのが残念
jQuery lihgtBox plugin
表示位置 ○
ダウンロード ×
軽さ ○
名前のとおりシンプルなLightboxクローン
機能的にはシンプルなんだけれど、保存ができなかった
Ceebox
表示位置 ×
ダウンロード ○
軽さ ○
シンプルなデザインとセンスの良いアイコンが光る。
余分なものをつけないデザインは好印象ながら元祖同様表示位置がずれる
YoxView
表示位置 ○
ダウンロード ×
軽さ ○
フェードイン/アウトする画像や、画像にカーソルを乗せると表示されるナビゲーションなど、動きがすごく凝っている。
動きだけならこれを使いたかった
FancyBox
表示位置 ○
ダウンロード ○
軽さ ×
シンプルな見た目と表示位置、ダウンロードの問題を解決した数少ないプラグイン
マウスホイールで画像を移動するなど機能も充実しているけれど、
単体で重たいのと他プラグインへの依存が強いのが残念
ColorBox
表示位置 ○
ダウンロード ○
軽さ ○
見栄えではトップとはいえないけれど、すべてでバランスよく動作してくれたのがColorBox
設置も容易でよかった。
PC、iPhone、Androidで正しく動いて画像の保存もできる。
ということで、FirespeedではColorBoxを使うことにしました。
LightboxからColorBoxへの移行方法
従来の記事もすべてColorBox化したいので、ヘッダの変更だけ、本文には触れずにColorBoxへと変わるようにしてみた。jqueryの設置
jQueryのサイトよりダウンロードしてもいいけれど、
便利なのがGoogle AJAX Libraries APIを使う方法。
Googleがホスティングしてくれるのでダウンロードや設置の手間が要らないし、複数サイトで共有することでブラウザのキャッシュが利くことも期待できる。
使い方は1行コードを入れるだけと超簡単
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
ColorBoxの設置
ColorBoxのサイトでColorBoxをダウンロードしzipを解凍後、colorbox/jquery.colorbox-min.jsをサイトに設置して。
scriptで開く
<script type="text/javascript" src="jquery.colorbox.js" ></script>公式サイトのデモンストレーションを参考にして
example1
黒い斜線の背景に白枠の力強いデザイン
example2
白い背景に細い黒枠の爽やかなデザイン
example3
濃い黒の背景に黒枠の高級感あるデザイン
example4
白い背景に柔らかな影があるApple風デザイン
example5
黒い背景に立体的なフレームの写真たて風デザイン
のうち好きなデザインを選び、
フォルダ内のcolorbox.cssファイルとimagesフォルダを同一フォルダへコピーする。
imagesフォルダをcssとは別の場所に置きたい場合は、cssフォルダを開きurl(images となっている場所をimagesフォルダを設置した場所に書き換える必要がある。
ヘッダタグ内でcssにリンクする
<link rel="stylesheet" type="text/css" href="/css/colorbox.css" media="screen" />
LightBoxから移行
本文を書き換えたくないので、LightBoxで使っていたrel='lightbox'属性をそのまま使う<script type="text/javascript">$(function() {
$('a[rel^=lightbox]').colorbox();
});
</script>これで無事LightboxのコードのままColorboxが動く