画期的!?読み手の事を考えたJSライブラリー（IMG FLY BOX）

画期的!?読み手の事を考えた画像ビュアーJS（IMG FLY BOX）

RELEASE- 2011年11月14日 12:20 PM

UPDATE - 2012/02/01 11:35

どこが読み手のこと考えてるの？

この手のプラグインで多いのが、小さい画像をクリックしたら全画面を占領して大きな画像を表示するというものが多いですよね。
でもこれって本当は全然ユーザーの事考えてないんだと思って今回のプラグインを作りました。

このプラグインなら大きな画像がでてきてもドラッグして自分の好きな位置に移動して、大きな写真を出しながら文字をそのまま読めたり、大きな画像を出したままスクロールもできたりします。
もちろんサイズの調整もできます。

NEWS

2012/02/01(var 1.3.2)
Display Center(rel:DC)を追加
iPhoneでは強制的にDC表示に変更
元画像より大きくは拡大できないように変更
2012/01/31(var 1.3.1):Center(rel:C)を追加
2012/01/31(var 1.3):クロスドメインでも動くようにしました。
2012/01/31(var 1.2):relなしでも動くようにしました。
2011/11/15(var 1.1):iPad,iPhoneに対応した
2011/11/14(var 1.0):IMG FLY BOX リリース

SAMPLE SITE

DEMO

←クリックしてね。左の画像はrelなし（DC）で出しています。以下ダミーテキスト。ネコの起源は、ネズミを捕獲させる目的で飼われ始めた（狭義の）ヤマネコ（Felis silvestris）の家畜化であり、分類学上はヤマネコの1亜種とされる[1]。人によくなつくため、多くが愛玩用のペットとして飼育されている。本項ではこれについて解説する。一方、広義の「ネコ」は、ネコ類（ネコ科動物）の一部、あるいはその全ての獣を指す包括的名称を指す。しばしば、家畜種の「イエネコ」に加えて広義のヤマネコ類を含む。特に学術用語としては、英語の「cat」と同様、トラやライオンなどといった大型種を含む全てのネコ科動物を指すことがある。

右の画像はL：10で出しています。以下ダミーテキスト。学名（ラテン語名）「Felis silvestris catus（仮名転写：フェーリス・シルウェストリス・カトゥス）」の語義は「猫、野生の、猫」である。これは、ヤマネコ「Felis silvestris」（野生の猫の意）の中の「猫という一群」との命名意図がある。日本では、鳴き声の語呂合わせから2月22日が猫の日とされる[2][3]。血液型はA・B・ABがあり、ABが希少である。

左の画像はR：10で出しています。以下ダミーテキスト。学名（ラテン語名）「Felis silvestris catus（仮名転写：フェーリス・シルウェストリス・カトゥス）」の語義は「猫、野生の、猫」である。これは、ヤマネコ「Felis silvestris」（野生の猫の意）の中の「猫という一群」との命名意図がある。日本では、鳴き声の語呂合わせから2月22日が猫の日とされる[2][3]。血液型はA・B・ABがあり、ABが希少である。

使い方

jQueryを使います。

ここでは、1.7.1を使っています。
それ意外は動くかわからんとです。

先頭で読み込んでね

jQueryとIMG FLY BOXを読み込む
スタイルシートなどは特に必要ありません。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="js/imgflybox1.3.2.min.js"></script>

中はこんな感じ

<a href="photo.jpg" class="imgflybox" rel="L:50">
<img src="thumb.jpg" />
</a>

意味

href　-見せたい画像
class　-imgflyboxを指定
rel　-どこに表示するか(任意)
「DC」-ディスプレイの真ん中に表示（デフォルト値）
「C」 -画像の真ん中に表示
「L:50」-左50pxに表示
「R:100」-右100pxに表示

良かったら御一報ください。

Twitter：@wada

ダウンロード

var1.3.2
img fly box をダウンロード

* IMG FLY BOX v1.3.2
* http://www.wadadanet.jp/javascript-tips/img_fly_box/
*
* Copyright (c) 2011 Minoru Wada
* Dual licensed under the MIT and GPL licenses.
*
* Date: 2012-01-31 19:00:00

動作確認環境

Chrome15.0
Firefox8.0
IE9
iPad(初期)
iPhone4S
非対応：IE8以下

とりあえず、こんだけ動作確認しました。
動いたー！とか動かん！とかの報告にご協力ください。

Twitter:@wada

これから

Android系も対応したいけど、実機がないからぁ

twitter:@wada