nyroModalの使い方

JavaScriptを使ったライトボックスはたくさんありますが、単に表示させるだけでなく、開いたボックス内で簡単な操作をしたいこともありますよね。

そんなときは、jQueryプラグインのnyroModalが高機能で便利です。

http://nyromodal.nyrodev.com/

使い方は簡単。ダウンロードしたJSとCSSを適切に読み込んだら、以下のように書くだけです。

<a href="hoge1.html" class="nyroModal" rel="gal"><img src="hoge1.jpg" /></a>
<a href="hoge2.html" class="nyroModal" rel="gal"><img src="hoge2.jpg" /></a>
<a href="hoge3.html" class="nyroModal" rel="gal"><img src="hoge3.jpg" /></a>

JSを書く必要はありません。class指定のみで大丈夫です。

このうち、rel="gal" の指定が、グループ化してギャラリーにする（前へ・次へボタンを有効にする）設定です。

galという文字列は何でも良く、もし複数ギャラリーを作りたいときは、グループ名を入れればOKです。

たとえば、以下のようにすれば、hogeギャラリーとpiyoギャラリーができて、それぞれ3枚ずつ画像がある状態に出来ます。

<a href="hoge1.html" class="nyroModal" rel="hoge"><img src="hoge1.jpg" /></a>
<a href="hoge2.html" class="nyroModal" rel="hoge"><img src="hoge2.jpg" /></a>
<a href="hoge3.html" class="nyroModal" rel="hoge"><img src="hoge3.jpg" /></a>

<a href="piyo1.html" class="nyroModal" rel="piyo"><img src="piyo1.jpg" /></a>
<a href="piyo2.html" class="nyroModal" rel="piyo"><img src="piyo2.jpg" /></a>
<a href="piyo3.html" class="nyroModal" rel="piyo"><img src="piyo3.jpg" /></a>

なお、nyroModalは、リンク先の拡張子を見て、動作を変更しています。
.jpgなどの拡張子では、自動的にサイズを調べて、適切なリサイズを行ってくれます。

プログラムから動的に画像を出力する際など、以下のようなURLでは、誤作動を起こすので気をつけて下さい。
http://bpsinc.jp/image/test.jpg?width=50

この場合、以下のようにすれば解決できます。
http://bpsinc.jp/image/test.jpg?width=50&ext=.jpg