Question

以下是我网站的链接：www.gilliandeanna.com

我一直试图弄清楚如何在打开图片时使彩色框响应，以便它们根据您正在查看的设备缩小。

截至目前，如果您要在移动设备上查看我的网站，如果您点击缩略图打开与该缩略图相关的图库，则该图像是图像本身的尺寸（800像素宽）。我已经阅读了互联网上的内容和堆栈溢出，并尝试将我见过的代码粘贴到我的文件中，但它不起作用。只要我尝试任何东西，它就会使彩色框不再有效，当你点击缩略图时它不会打开画廊它只会打开那个画廊的第一张照片。

在colorbox jQuery文件中，有一个选项显示scalePhotos，我将其设置为'true'。我也尝试将宽度和高度从'false'更改为'100%'，但这只会让彩盒停止工作。

我对编码很新。任何帮助，将不胜感激。

谢谢：）

Answer 1

刚刚检查了你的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
   });
});

它会将实时彩色框的大小调整为窗口大小高度和宽度的90％。查看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文件中，它似乎使彩色照片的照片响应，因为在移动设备上查看我的网站时，它们现在的大小适合该屏幕。但是，当它在dekstop或笔记本电脑上查看我的网站时，它也会缩放我的照片。我很好奇是否有办法让这段代码仅在检测到某个屏幕尺寸时才有效。

响应式Colorbox

2 个答案: