Делаем colorbox адаптивным (резиновый jQuery Colorbox)

Этот приём не только для Yii, а вообще для colorbox. Мне нравится этот jQuery-плагин своей лёгкостью. Но один баг в нём продолжает оставаться вот уже в версии colorbox 1.6.4 не внедрена адаптивность картинки под размер экрана. Это крупный косяк, но что-то упорно на него закрывают глаза. А решение не сложное.

Перед вызовом скрипта colorbox добавим javascript-код. У меня это в отдельном файле со скриптами, но можно и в теле страницы.

jQuery(document).ready(function () {       
            // Респонсивный ColorBox
            jQuery.colorbox.settings.maxWidth  = '95%';
            jQuery.colorbox.settings.maxHeight = '95%';
             
            // Функция ресайза ColorBox
            var resizeTimer;
            function resizeColorBox()
            {
              if (resizeTimer) clearTimeout(resizeTimer);
              resizeTimer = setTimeout(function() {
                        if (jQuery('#cboxOverlay').is(':visible')) {
                                  jQuery.colorbox.resize({width:'90%', height:'90%'})
                        }
              }, 300);
            }
             
            // Ресайз при изменении размера окна браузера и
            // изменении ориентации мобильного устроиства
            jQuery(window).resize(resizeColorBox);
            window.addEventListener("orientationchange", resizeColorBox, false);
            
            // вешаем colorbox на ссылку с классом .gallery
            jQuery('a.gallery').colorbox({ opacity:0.5 , rel:'group1', loop:false });
        });

16 октября 2018, Программирование, веб-кодинг / Метки: colorbox