カラーボックスをレスポンシブにする方法
レスポンシブWebサイトでカラーボックスを使用しています。
私はリクエストがあります：Colorboxが画面/モバイルデバイスのサイズと向きに自動的に調整されることを望みます：画面/モバイルデバイスの向きを変更する場合（つまり、モバイルを回転させて水平および垂直の画像を調整する場合画面サイズ、Colorborが画面の新しいサイズ/向きに自動的に調整されることを望みます）。現時点では、Colorboxは新しい画像の読み込み時にのみ自動的に調整されます（例のスライドショーで）。
私は閉じたグーグルグループで質問をしました：
https://groups.google.com/group/colorbox/browse_thread/thread/85b8bb2d8cb0cc51?hl=fr
Githubで2つの機能リクエストを作成しました。
https://github.com/jackmoore/colorbox/issues/158
しかし、私は応答がないので、Stack Overflowを試してみます...
方向の変更に基づいてColorBoxを自動サイズ変更できるかどうかを知っていますか（回避策のコールバック関数を使用する場合があります）？
助けてくれてありがとう。
開発者のウェブサイトで説明されているように、カラーボックスの初期化でmaxWidthおよびmaxHeightオプションを使用して解決しました：
jQuery(*selector*).colorbox({maxWidth:'95%', maxHeight:'95%'});
このスニペットを追加して、ウィンドウのサイズを変更するとき、またはモバイルデバイスの向きを変更するときに、カラーボックスのサイズを変更することもできます。
/* Colorbox resize function */
var resizeTimer;
function resizeColorBox()
{
if (resizeTimer) clearTimeout(resizeTimer);
resizeTimer = setTimeout(function() {
if (jQuery('#cboxOverlay').is(':visible')) {
jQuery.colorbox.load(true);
}
}, 300)
}
// Resize Colorbox when resizing window or changing mobile device orientation
jQuery(window).resize(resizeColorBox);
window.addEventListener("orientationchange", resizeColorBox, false);
最終的に、jQueryを$に置き換えます。
私はここで多くのソリューションを試しましたが、githubの@berardigからの次のことが本当にうまくいきました
var cboxOptions = {
width: '95%',
height: '95%',
maxWidth: '960px',
maxHeight: '960px',
}
$('.cbox-link').colorbox(cboxOptions);
$(window).resize(function(){
$.colorbox.resize({
width: window.innerWidth > parseInt(cboxOptions.maxWidth) ? cboxOptions.maxWidth : cboxOptions.width,
height: window.innerHeight > parseInt(cboxOptions.maxHeight) ? cboxOptions.maxHeight : cboxOptions.height
});
});
ソース： https://github.com/jackmoore/colorbox/issues/183#issuecomment-42039671
この問題は議論されており、実際のソリューションは著者のgithubで提供されているようです
ウィンドウのサイズ変更および/または「orientationchange」でこれを呼び出します。960はカラーボックスの推奨幅で、maxWidth = 95％です
var myWidth = 960, percentageWidth = .95;
if ($('#cboxOverlay').is(':visible')) {
$.colorbox.resize({ width: ( $(window).width() > ( myWidth+20) )? myWidth : Math.round( $(window).width()*percentageWidth ) });
$('.cboxPhoto').css( {
width: $('#cboxLoadedContent').innerWidth(),
height: 'auto'
});
$('#cboxLoadedContent').height( $('.cboxPhoto').height() );
$.colorbox.resize();
}
カラーボックス関連のjsおよびjquery libファイルをロードした後、これをメインjsファイルに追加します。
(function ($, window, document, undefined) {
//Configure colorbox call back to resize with custom dimensions
$.colorbox.settings.onLoad = function() {
colorboxResize();
}
//Customize colorbox dimensions
var colorboxResize = function(resize) {
var width = "90%";
var height = "90%";
if($(window).width() > 960) { width = "860" }
if($(window).height() > 700) { height = "630" }
$.colorbox.settings.height = height;
$.colorbox.settings.width = width;
//if window is resized while lightbox open
if(resize) {
$.colorbox.resize({
'height': height,
'width': width
});
}
}
//In case of window being resized
$(window).resize(function() {
colorboxResize(true);
});
})(jQuery, this, this.document);
JQuery.colorbox.jsファイルでこの変更を行うだけです
24行目：-
maxWidth: "100%",
他の変更を加えないでください、すべてがすべてのレスポンシブ効果で正常に動作します:)
@media query colorBox cssファイルでの「フレーミング」を、他のcssで行うのと同じ方法で検討する必要があります。
これは兄弟がきちんと働いています。
jQuery( document ).ready( function(){
var custom_timeout = ( function() {
var timers = {};
return function ( callback, ms, uniqueId ) {
if ( !uniqueId ) {
uniqueId = "Don't call this twice without a uniqueId";
}
if ( timers[uniqueId] ) {
clearTimeout ( timers[uniqueId] );
}
timers[uniqueId] = setTimeout( callback, ms );
};
})();
$(".group1").colorbox({rel:'group1', width:"80%" });
$( window ).resize( function(){
custom_timeout(function(){
if( $('#cboxOverlay' ).css( 'visibility' ) ){
$(".group1").colorbox.resize({ innerWidth:'80%' });
}
}, 500 );
});
}）;
訪問 デモページ
私はこれをyoutubeビデオボックスのCSSで作成しましたが、注意してください、いくつかの垂直方向の画像をカットする可能性があります。
@media (max-width: 480px) {
#colorbox {
max-height:218px !important;
}
#cboxWrapper *, #cboxWrapper {
height:auto !important;
}
}
これは私のために働いたソリューションです、私は元々Shabithによって投稿されたタイマーのものを取り出しました。
/**
* Auto Re-Size function
*/
function resizeColorBox()
{
if (jQuery('#cboxOverlay').is(':visible')) {
jQuery.colorbox.resize({width:'100%', height:'100%'});
}
}
// Resize Colorbox when resizing window or changing mobile device orientation
jQuery(window).resize(resizeColorBox);
window.addEventListener("orientationchange", resizeColorBox, false);
クレジットの移動先： shabith
Drupalサイト で見つけた解決策はColorboxのOFF機能を使用しています：
if (window.matchMedia) {
// Establishing media check
width700Check = window.matchMedia("(max-width: 700px)");
if (width700Check.matches){
$.colorbox.remove();
}
}
特定のウィンドウサイズでカラーボックスを再起動する必要があります。
私のソリューションは、ウェブサイトがレスポンシブでなく、カラーボックスをモバイルデバイスで表示したい場合に役立ちます。私は個人的にreCaptchaフォームを保存するために使用するので、必須です。
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) {
$.colorbox({reposition: true, top: 0, left: 0, transition: 'none', speed:'50', inline:true, href:"#contactus"}).fadeIn(100);
} else {
$.colorbox({width:"400px", height:"260px", transition: 'none', speed:'50', inline:true, href:"#contactus"}).fadeIn(100);
}
ここに答えを追加したいと思います。さまざまなブレークポイントの幅を考慮し、ウィンドウの幅に基づいてポップオーバーの幅を変更することにより、カラーボックスを反応させる必要がありました。基本的に、ブラウザで表示されるときはカラーボックスの左右に空のスペースを置く余裕がありますが、電話/タブレットでは表示されません。
私はこの非常に投稿からの回答の概念を使用しました（ https://stackoverflow.com/a/23431190/260665 ）が、いくつかの変更を加えました：
/**
* Raj: Used basic source from here: https://stackoverflow.com/a/23431190/260665
**/
// Make sure the options are sorted in descending order of their breakpoint widths
var cboxDefaultOptions =
[
{
breakpointMinWidth: 1024,
values: {
width : '70%',
maxWidth : '700px',
}
},
{
breakpointMinWidth: 640,
values: {
width : '80%',
maxWidth : '500px',
}
},
{
breakpointMinWidth: 320,
values: {
width : '95%',
maxWidth : '300px',
}
}
];
$(window).resize(function(){
// alert (JSON.stringify($.colorbox.responsiveOptions));
// var respOpts = $.colorbox.attr('responsiveOptions');
var respOpts = $.colorbox.responsiveOptions;
if (respOpts) {
var breakpointOptions = breakpointColorboxOptionsForWidth (window.innerWidth);
if (breakpointOptions) {
$.colorbox.resize({
width: window.innerWidth > parseInt(breakpointOptions.values.maxWidth) ? breakpointOptions.values.maxWidth : breakpointOptions.values.width,
});
}
}
});
function breakpointColorboxOptionsForWidth (inWidth) {
var breakpointOptions = null;
for (var i=0; i<cboxDefaultOptions.length; i++) {
var anOption = cboxDefaultOptions[i];
if (inWidth >= anOption.breakpointMinWidth) {
breakpointOptions = anOption;
break;
}
}
return breakpointOptions;
}
使用法：
$.colorbox.responsiveOptions = cboxDefaultOptions;
カラーボックスオブジェクトが準備されたら、この追加属性を追加します。 cboxDefaultOptionsを構成したり、別のカスタム値オブジェクトを$.colorbox.responsiveOptions必要に応じて異なるブレークポイントでロードするようにします。
カラーボックスjsロックの前に、次のコードを挿入します。
jQuery.colorbox.settings.maxWidth = '95%';
jQuery.colorbox.settings.maxHeight = '95%';
var resizeTimer;
function resizeColorBox()
{
if (resizeTimer) clearTimeout(resizeTimer);
resizeTimer = setTimeout(function() {
if (jQuery('#cboxOverlay').is(':visible')) {
jQuery.colorbox.load(true);
}
}, 300);
}
jQuery(window).resize(resizeColorBox);
window.addEventListener("orientationchange", resizeColorBox, false);
左、右、下、上を値「false」のままにしておくと、計算が自動的に行われます。それは私のために働いたので、私は行きます！
カラーボックスの所有者からの回答。
window.addEventListener("orientationchange", function() {
if($('#cboxOverlay').is(':visible'){
$.colorbox.load(true);
}
}, false);