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

Ответ 1

Я решил это, используя параметры 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 на $.

Ответ 2

Я попробовал много решений здесь, но следующее из @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

Ответ 3

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

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

Ответ 4

Вызовите это при изменении размера окна и/или "changechange" Где 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();

}

Ответ 5

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

Ответ 6

Этот человек работает правильно, братья.

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

});

Посетите демонстрационную страницу

Ответ 7

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

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

Ответ 8

в файле jquary.colorbox.js просто сделайте следующий chnage

строка 24: -

maxWidth: "100%",

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

Ответ 9

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

Ответ 10

Добавьте это в свой основной файл 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);

Ответ 11

Решение, найденное на Drupal site, использует функцию Colorbox OFF:

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

Вам нужно будет повторно инициировать colorbox по определенному размеру окна.

Ответ 12

Мое решение помогает, когда веб-сайт не реагирует и вы хотите, чтобы 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);
    }

Ответ 13

Перед блокировкой colorbox 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", и оно автоматически выполнит расчет. Это сработало для меня, поэтому я перехожу!

Ответ 14

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

Я использовал концепцию ответа из этого самого сообщения (fooobar.com/questions/169777/...), но сделал несколько изменений:

/**
 * Raj: Used basic source from here: /questions/169777/how-to-make-colorbox-responsive/962924#962924
 **/

// 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, чтобы он загружался с различными точками останова, если это необходимо.

Ответ 15

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

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