Дата публикации
30.04.2020
Просмотров:
470
Поделиться

Данный способ чаще всего применялся мною в CMS Opencart для того, чтобы модальные окна colorbox просмотра изображений товара масштабировались в зависимости от размера просматриваемого экрана устройства посетителя – т.е. делаем адаптивный colorbox с адаптацией под любые устройства. Хотя скрипт и универсальный и будет работать на любых сайтах с используемой библиотекой colorbox.

Сделать наш colorbox адаптивным просто. Достаточно добавить на страницу вызова библиотеки (или в футер/хедер сайта, если нужно чтобы адаптация работала на всех страницах) следующий скрипт:

<script>
jQuery.colorbox.settings.maxWidth  = '97%';//ставим свои значения
jQuery.colorbox.settings.maxHeight = '97%';//ставим свои значения
 
// Сама функция адаптации ColorBox
 
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);
</script>



После этого окно colorbox будет масштабироваться в зависимости от размера экрана. Будет работать не только при просмотре изображений а и при выводе текста в модальном окне, фреймов и д.р. – содержимое не важно – так мы получаем полностью адаптивный colorbox для современных адаптивных сайтов.

Домены