Дата публикации
30.04.2020
Просмотров:
1013
Поделиться
Данный способ чаще всего применялся мною в 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 для современных адаптивных сайтов.
