jquery.colorbox.jsを本当にレスポンシブ対応させる
レスポンシブと言っても色々ある。
PCでもスマートフォンでも同じように、コンテンツをモーダルウィンドウに表示する場合
高さ、幅の最大値を指定してあげることで、スマートフォンでもモーダルウィンドウがはみ出すことなく表示できる
jQueryプラグイン「Colorbox」をレスポンシブに対応させる方法！ ｜ Web Design Magazine
PCはモーダル、スマートフォンでは新しいウィンドウで開くようにする場合
ユーザーエージェントをみて色々な方法があります。
スマホで閲覧した時だけJavaScriptを一部無効化したり有効化したりする - Qiita
スマートフォンで閲覧する時にjQuery Colorboxを無効化する (WordPress) | Zafiel
レスポンシブと言ったらCSSメディアクエリの場合
そんな時は、画面幅をみて挙動を変えるわけです。
そんな時例えば、こちらが参考になりました。
ブラウザのウィンドウサイズを取得する際のjQueryとJavaScriptとCSSメディアクエリの違い | BlackFlag
例えば、html、jQueryはこんな感じに
<a href="contents1.html" class="colorbox01">１番目のコンテンツ</a> <a href="contents2.html" class="colorbox01">２番目のコンテンツ</a> <a href="contents3.html" class="colorbox01">３番目のコンテンツ</a>
$(function(){
if(window.matchMedia('(min-width:600px)').matches){
$(".colorbox01").colorbox({rel:'group01'});
} else {
$('.colorbox01').on('click',function(){
window.open(this.href,'_blank');
return false;
})
}
});
しかし！
レスポンシブと言ったら、PCでウィンドウサイズを変えたら、それにあわせて挙動が変わらなくちゃダメでしょ！っていうケースもある。
そのため、ウィンドウサイズのリサイズを検知して挙動を変えてやる必要がでてくる。
PCとスマートフォンで画像も入れ替えたりすることが多いので、ここはよくコピペさせていただいている。
jQueryでウィンドウサイズによって画像を切り替える ｜ Tips Note by TAM
さらにしかし！
これだけだと、ウィンドウを大きくしたり小さくしたりしているうちに、「on('click'」と「colorbox」が重なってきたりしてとても具合が悪い。
そして、スマートフォンで一瞬PCの画像が表示されてりしてなんか美しくない。
ってことで、最終的なjQueryはこんな感じに。
$(function(){
///////////////////////////////////////////////
// PCとスマートフォンの切り替え
var mw = '(min-width:600px)';
function viewSwitch() {
// 非対応ブラウザの場合は何もしない
if( !window.matchMedia ){
return;
}
if(window.matchMedia(mw).matches ){
// PCの場合
var src1 = '_sp'; // 切り替える画像ファイル名の末尾
var src2 = '_pc';
$('.colorbox01').off('click'); // スマートフォンの場合に追加したイベント削除
$(".colorbox01").colorbox({rel:'group01'}); // PCの場合はColorboxで表示
} else {
// スマートフォンの場合
var src1 = '_pc';
var src2 = '_sp';
$(".colorbox01").colorbox.remove(); //PCの場合にセットしたColorboxを削除
$('.colorbox01').off('click'); //重複して追加されないように一度イベントを削除
$('.colorbox01').on('click',function(){ //スマートフォンの場合は新規ウィンドウで表示
window.open(this.href,'_blank');
return false;
})
}
// 画像の切り替え class="imgchg"として要素の画像ファイルを入れ替える
// ロード時に画像のチラツキを抑えるため、cssで、img.imgchg {visibility : hidden;} としておく
$('img.imgchg').each(function() {
var spsrc = $(this).attr('src').replace(src1,src2);
$(this).attr('src',spsrc);
$(this).css('visibility','visible');
});
}
viewSwitch();
var resizeTimer;
$(window).on('resize', function() {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(function() {
viewSwitch();
}, 200);
});
});
