Как сделать colorbox отзывчивым

Question

Я использую colorbox на отзывчивом веб-сайте.

У меня есть запрос: я хочу, чтобы Colorbox автоматически настраивался на размер и ориентацию экрана/мобильного устройства: если я изменяю ориентацию экрана/мобильного устройства (т.е. если я поворачиваю свой мобильный телефон для регулировки горизонтального и Вертикальные изображения на размер экрана, я хочу, чтобы Colorbor автоматически настраивался на новый размер/ориентацию экрана). , Colorbox только автоматически настраивается на загрузку нового изображения (например, в слайд-шоу).

Я задал этот вопрос в закрытой группе Google:

https://groups.google.com/group/colorbox/browse_thread/thread/85b8bb2d8cb0cc51?hl=fr

Я создал два полнометражных запросы на GitHub:

https://github.com/jackmoore/colorbox/issues/158

, но у меня нет никакого ответа, так Я пытаюсь использовать Stack Overflow ...

Кто-нибудь знает, можно ли получить ColorBox для авто- изменить размер на основе на изменение ориентации (возможно, с функцией обратного вызова в обходном пути)?

Заранее благодарим за любую помощь.

Answer 1

Вы должны рассмотреть «обрамление» с помощью @media запроса colorBox css-файла так же, как и с остальной частью вашего css.

Answer 2

Похоже, этот вопрос обсуждался и рабочие решения, предлагаемые на автора GitHub

https://github.com/jackmoore/colorbox/issues/158

Answer 3

Решение я нашел на Drupal site использует функцию OFF ColorBox в:

if (window.matchMedia) { 
    // Establishing media check 
    width700Check = window.matchMedia("(max-width: 700px)"); 
    if (width700Check.matches){ 
     $.colorbox.remove(); 
    } 
} 

Вам нужно будет для повторного запуска colorbox по определенному размеру окна.

Answer 4

Мое решение помогает, когда веб-сайт не реагирует на запросы, и вы хотите, чтобы colorbox отображался на мобильных устройствах. Я лично использую его для хранения формы 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); 
    } 

Answer 5

я решил его с помощью MaxWidth и MaxHeight параметры инициализации ColorBox, как описано на сайте разработчика:

jQuery(*selector*).colorbox({maxWidth:'95%', maxHeight:'95%'}); 

Вы также можете добавить этот фрагмент, чтобы изменить размер ColorBox при изменении размера в окне или изменении ориентации вашего мобильного устройства:

/* 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 от $.

Answer 6

Вызов этого на окно изменения размера и/или «orientationchange» Где 960 является предпочтительной шириной моей ColorBox, и мой 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(); 

} 

Answer 7

Я пробовал много решений здесь, но следующий из @berardig на GitHub работал очень хорошо для меня

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

Answer 8

Это один правильно работающих братьев.

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); 
}); 

});

Визит demo page

Answer 9

Я сделал это в CSS для видео окна YouTube, но будьте осторожны, это может сократить некоторые вертикальные изображения.

@media (max-width: 480px) { 
#colorbox { 
max-height:218px !important; 
} 
#cboxWrapper *, #cboxWrapper { 
height:auto !important; 
} 
} 

Answer 10

в jquary.colorbox.js файл просто сделать пыльник chnage

линия 24: -

maxWidth: "100%", 

не делают никаких других изменений все будет работать нормально со всеми отзывчивым эффектом :)

Answer 11

Это решение, которое сработало для меня, я достал материал таймера, который был первоначально опубликован 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

Answer 12

Добавьте это в основной JS файл после загрузки в поле цвета, относящиеся JS и JQuery Lib файлы.

(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); 

Answer 13

Перед ColorBox замка расслоение плотной, вставьте следующий код:

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); 

Отпуска слева, справа, снизу и сверху со значением «ложь», и он будет делать расчет автоматически. Это сработало для меня, поэтому я перехожу!

Answer 14

Я хотел бы добавить здесь ответ. У меня было требование, чтобы заставить colorbox реагировать, соблюдая разные ширины точек останова и изменяя ширину popover на основе ширины окна. В принципе, я могу позволить себе пустые места слева и справа от цветного окна, когда он отображается в браузере, но не тогда, когда он отображается в телефоне/планшете.

я использовал концепцию ответа с этого поста (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; 

Когда объект Colorbox готовят просто добавить этот дополнительный атрибут к нему. Мы также можем настроить cboxDefaultOptions или предоставить другой настраиваемый объект для $.colorbox.responsiveOptions, чтобы он загружался с различными точками останова, если это необходимо.

Answer 15

Ответ от владельца colorbox.

window.addEventListener("orientationchange", function() { 
if($('#cboxOverlay').is(':visible'){ 
    $.colorbox.load(true); 
} 
}, false);