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

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

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

DEMO

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

HTML

CSS

jQuery

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

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

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

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

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

chengeSpeed：画像変更の時間

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

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

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

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

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

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

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

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

ページ内ナビゲーションでスムーズスクロールしてページの上部にフィックスしてついてくるというのはよくあると思います。で、下向きの矢印がついてるとスムーズスクロールだとすぐにわかると思うんですけど、フィックスしてついてくるとき、通り過ぎた要素のナビも下を向いてると違和感を感じますよね？

ということで、通り過ぎた要素のナビの矢印が上を向くフィックスナビを考えてみました。

＞＞DEMO

以下はコードです。CSSは見た目の調整にのみ使っているので、省略しています。
矢印はFont Awesomeで入れているので、コピペするときはお忘れなく。
背景画像の切り替えにする場合は、.attr(‘class’,’fa fa-caret-up’)を.css(‘background-image’,’画像パス’);にすればできます。セレクタをお間違えないように。

HTML

jQuery