Lightbox的なモーダルウインドウ作ってみた

みなさん、お疲れ様です。
今回は画像を表示するモーダルウィンドウを作りました。Lightboxなどのプラグインでおなじみの機能で、使い勝手の良いものも多いですが、いろいろ見てて自分でも作ってみたくなったのでやってみました。

プラグインには及びませんが、そこそこ使えると思いますので、使ってやってもいいよって方はぜひ使ってください。

 

まずはデモページをどうぞ。

DEMO

 

以下コードです。下に使い方も載せておきます。

 

HTML

CSS

jQuery

変更するのはthumbnailの画像のパスとaタグのhref属性(これが表示する画像になります)、CSSです。

基本的にjQueryは触らずに使えるようにしていますが、カスタマイズしたい場合はご自由にどうぞ。

初めのところの変数でいろいろ変えられるようになってます。

modalIn:モーダルウィンドウを開く時間

modalOut:モーダルウィンドウを閉じる時間

chengeSpeed:画像変更の時間

arrowStyle:falseにすると矢印ボタンの位置をCSSで変更できるようになります。

 

今回、使ったjQueryのいろいろ

setTimeout:時間差で処理を実行する。これのおかげでボタンの位置を調整できた。

.map:一言でいうと配列が作れる。慣れると便利だと思う。

.length:配列や要素の数を取得できる。個数が変化する要素には必須だと思う。

:visible:今見えてる要素を取得。今回大活躍。

詳しくは調べてみてください。いろいろ使い方があっておもしろいですよ。

 

それでは、長くなってしまいましたが、今回はこのへんで。

トップへ戻る