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

デザインも頼めるシステム開発会社をお探しならBPS株式会社までどうぞ 開発エンジニア積極採用中です! Ruby on Rails の開発なら実績豊富なBPS

この記事の著者

baba

ゆとりプログラマー。 高校時代から趣味でプログラミングを初め、そのままコードを書き続けて現在に至る。慶應義塾大学環境情報学部(SFC)卒業。BPS設立初期に在学中から参加している最古参メンバーの一人。Ruby on Rails、PHP、Androidアプリ、Windows/Macアプリ、超縦書の開発などを気まぐれにやる。軽度の資格マニアで、情報処理技術者試験(16区分17回 + 情報処理安全確保支援士試験)、技術士(情報工学部門)、Ruby Programmer Gold、AWSソリューションアーキテクト(アソシエイト)、日商簿記2級、漢検準1級などを保有。

babaの書いた記事

関連する記事

夏のTechRachoフェア2019

週刊Railsウォッチ

インフラ

ActiveSupport探訪シリーズ