こんにちは。
ウェブデザイナーの野尻です。
今回はウェブ制作で使うモーダルウィンドウの中でもかなり有名なcolorboxについて、デフォルトではついていない機能をコピペでグレードアップできたので、ご紹介します。
①表示されたモーダルウィンドウをスワイプ対応にする
画像が複数あるとき、表示されたモーダル内で「＜」「＞」ボタンで前後の画像へ移動する挙動はよく見ますが、colorboxは標準だとこの機能が備わっているものの、スワイプには対応していません。
モバイル全盛の今、UIもモバイルに寄せて考える必要があります。
そんなときは↓のコードを加えるだけで簡単にスワイプ対応可能！
こちらの例はインライン要素をモーダル表示したときとなります.
表示させるモーダルコンテンツにクラスを振っておくことがコツ
②表示されたモーダルウィンドウを、ウィンドウサイズに合わせてリアルタイムでリサイズ
colorboxは通常スクリプトが実行されたタイミングのウィンドウサイズを読み取ってモーダルサイズを自動的に決めてくれるのですが、
モーダルを開いた後にウィンドウサイズを変更したとき、可変してくれません
そんなときは、↓のコードを追加するだけでOK
//ウィンドウのリサイズに対応
$(window).resize(function(){
$.colorbox.resize({width:’90%’});
});
