jQuery   发布时间:2022-04-19  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了jquery – 响应式Colorbox大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
这是我网站的链接: @L_874_1@

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

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

在colorBox jQuery文件中,有一个选项说scalePhotos,我将其设置为’true’.我也尝试将宽度和高度从“假”更改为“100%”,但这只会让彩盒停止工作.

我对编码很新.任何帮助,将不胜感激.

谢谢 :)

解决方法

刚刚检查了你的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中的工作示例

大佬总结

以上是大佬教程为你收集整理的jquery – 响应式Colorbox全部内容,希望文章能够帮你解决jquery – 响应式Colorbox所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。