Отзывчивый Colorbox

Вот ссылка на мой сайт: www.gilliandeanna.com Отзывчивый Colorbox

Я пытался выяснить, как сделать Colorbox реагировать при открытии изображения так, чтобы они сжимаются в зависимости от устройства вы просматриваете его на.

На данный момент, если вы хотите посмотреть мой сайт на мобильном устройстве, если вы нажмете на миниатюру, чтобы открыть галерею, относящуюся к этому миниатюре, изображение будет размером самого изображения (800 пикселей в ширину) , Я читал все в Интернете и переполнял стек и пытался вставить код, который я видел в свои файлы, но он не работает. Как только я попробую что-нибудь, он делает так, чтобы colorbox больше не работал, и когда вы нажимаете на миниатюру, он не открывает галерею, он просто открывает первое изображение этой галереи.

В файле colorbox jQuery есть опция, указывающая scalePhotos, и у меня есть этот набор 'true'. Я также попытался изменить ширину и высоту от 'false' до '100%', но это просто сделало colorbox прекратить работу.

Я очень новичок в кодировании. Любая помощь будет оценена по достоинству.

Спасибо :)

источник

2016-02-03 Gillian Deanna

Я думаю, что лучше создать пример проблемы в codepen.io, чтобы люди могли просто сосредоточиться на проблеме и легко попробовать разные вещи, чтобы помочь вам. –

Я действительно не могу позволить себе заплатить за один из своих планов, просто чтобы попытаться разместить мой сайт там, где кто-то может поиграть, чтобы исправить, к сожалению. Я только надеялся, что, возможно, кто-то сможет просмотреть мой сайт и использовать инструмент в firefox, чтобы пойти «за кулисами» и посмотреть, что может быть неправильным и почему оно не работает. Сам мой сайт реагирует, но когда вы смотрите на него по мобильному размеру, и вы переходите к разделу w/colorbox, когда вы нажимаете на миниатюру, чтобы открыть соответствующую галерею, галерея имеет тот же размер, что и при просмотре на рабочем столе. Это не отзывчиво. –

Вам ничего не нужно платить. Вам не нужно размещать свой сайт на кодексе. Вам просто нужно воспроизвести проблему, с которой вы сталкиваетесь в примере. Например, вы можете создать пример, в котором существует один эскиз с Colorbox, который ведет себя, как вы сказали, на более мелких устройствах. Он, кстати, свободен. Вот как это работает, создавая небольшой пример проблемы, которую вы имеете, и позволяйте другим выявлять проблему и ее устранять. –

Только что проверил ваш JS-файл. В настоящее время, что у вас есть для установки ColorBox это:

//gallery light box setup 
$('a.colorbox').colorbox({ 
      rel: function(){ 
        return $(this).data('group'); 
      } 
});

Добавить этот кусок кода ниже приведенный выше код и дать ему попробовать:

//gallery light box setup 
$('a.colorbox').colorbox({ 
    rel: function(){ 
      return $(this).data('group'); 
    }, 
    scalePhotos: true 
}); 

$(window).resize(function() { 
    $.colorbox.resize({ 
     "width": $(window).width()*0.9, 
     "height": $(window).height()*0.9 
    }); 
});

Это будет изменить размер живой ColorBox до 90% от высота и ширина ваших размеров окна. Проверьте рабочий пример в CODEPEN

источник

2016-02-05 02:17:41

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

попробуйте новый код, я просто изменил ответ выше –

Наконец-то я получил его. Сейчас он работает как очарование. проверьте последние изменения. Добавьте мой код в конце вашего кода настройки «light light box» –

Я нашел этот код ссылки в Интернете, пытаясь искать решение

<script type="text/javascript"> 
    // Make ColorBox responsive 
    jQuery.colorbox.settings.maxWidth = '100%'; 
    jQuery.colorbox.settings.maxHeight = '100%'; 

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

Я добавил его в файл index.html и, кажется, сделать ColorBox фотографии реагировать на что при просмотре моего сайта на мобильном устройстве теперь они имеют размер, соответствующий этому экрану. Тем не менее, это также масштабирование моих фотографий при просмотре моего сайта на декстон или ноутбуке. Мне любопытно, может ли быть способ заставить этот кусок кода работать только при обнаружении определенного размера экрана.

источник

2016-02-05 21:08:40

Отзывчивый Colorbox

ответ

Смежные вопросы