みなさん、お疲れ様です。
今回は画像を表示するモーダルウィンドウを作りました。Lightboxなどのプラグインでおなじみの機能で、使い勝手の良いものも多いですが、いろいろ見てて自分でも作ってみたくなったのでやってみました。
プラグインには及びませんが、そこそこ使えると思いますので、使ってやってもいいよって方はぜひ使ってください。
まずはデモページをどうぞ。
以下コードです。下に使い方も載せておきます。
HTML
CSS
jQuery
変更するのはthumbnailの画像のパスとaタグのhref属性（これが表示する画像になります）、CSSです。
基本的にjQueryは触らずに使えるようにしていますが、カスタマイズしたい場合はご自由にどうぞ。
初めのところの変数でいろいろ変えられるようになってます。
modalIn：モーダルウィンドウを開く時間
modalOut：モーダルウィンドウを閉じる時間
chengeSpeed：画像変更の時間
arrowStyle：falseにすると矢印ボタンの位置をCSSで変更できるようになります。
今回、使ったjQueryのいろいろ
setTimeout：時間差で処理を実行する。これのおかげでボタンの位置を調整できた。
.map：一言でいうと配列が作れる。慣れると便利だと思う。
.length：配列や要素の数を取得できる。個数が変化する要素には必須だと思う。
:visible：今見えてる要素を取得。今回大活躍。
詳しくは調べてみてください。いろいろ使い方があっておもしろいですよ。
それでは、長くなってしまいましたが、今回はこのへんで。