Responsive Colorbox

Question

Here is the link to my website: www.gilliandeanna.com

I was trying to figure out how to make colorbox responsive when you open photos so that they decrease depending on the device on which you are viewing it.

Like now, if you want to see my site on a mobile device, if you click on a thumbnail to open a gallery related to this thumbnail, the image will be the size of the image itself (800 pixels wide). I read everything on the Internet and overflowed the stack and tried to insert the code that I saw in my files, but it does not work. As soon as I try something, it makes the colorbox no longer work, and when you click on the thumbnail, it does not open the gallery, it just opens the first image of this gallery.

There is an option in the jQuery colorbox file that says scalePhotos, and I have this option set to 'true'. I also tried changing the width and height from 'false'to '100%', but just stopped the colorbox working.

I am very new to coding. Any help would be greatly appreciated.

Thanks:)

Answer 1

Just checked your js file. You currently have a colorbox setting:

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

Add this code below the code above and try:

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

It will resize the color window in real time by 90% of the height and width of your window size. See a working example in CODEPEN

Answer 2

,

<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, , , , , . , . , .