jQuery 如何使颜色框响应
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12182668/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to make colorbox responsive
提问by vincent3569
I am using colorbox in a responsive website.
我在响应式网站中使用 colorbox。
I have a request : I wish that Colorbox automatically adjusts itself to the size and orientation of the screen / mobile device : if I change the orientation of the screen / mobile device (ie if I rotate my mobile to adjust horizontal and vertival pictures to the screen size, I wish that Colorbor automatically adjusts itself to the new size / orientation of the screen). for now, Colorbox only automatically adjusts itself on load of a new picture (in a slideshow for exemple).
我有一个请求：我希望 Colorbox 自动根据屏幕/移动设备的大小和方向调整自身：如果我更改屏幕/移动设备的方向（即，如果我旋转我的手机以将水平和垂直图片调整为屏幕尺寸，我希望 Colorbor 自动调整到屏幕的新尺寸/方向）。目前，Colorbox 仅在加载新图片时自动调整自身（例如在幻灯片中）。
I asked the question in the closed google group :
我在封闭的谷歌组中问了这个问题：
https://groups.google.com/group/colorbox/browse_thread/thread/85b8bb2d8cb0cc51?hl=fr
https://groups.google.com/group/colorbox/browse_thread/thread/85b8bb2d8cb0cc51?hl=fr
I created two feature requests on github :
我在 github 上创建了两个功能请求：
https://github.com/Hymanmoore/colorbox/issues/158
https://github.com/Hymanmoore/colorbox/issues/158
but I don't have any response, so I try on Stack Overflow...
但我没有任何回应，所以我尝试使用 Stack Overflow...
Does anyone know if it's possible to get ColorBox to auto-resize based on orientation change (maybe with a callback function in a workaround)?
有谁知道是否有可能让 ColorBox 根据方向变化自动调整大小（可能在解决方法中使用回调函数）？
Thanks in advance to any help.
在此先感谢您的帮助。
回答by NicolasBernier
I solved it using the maxWidthand maxHeightoptions on colorbox initialization, as explained on the developer's website :
我使用colorbox 初始化时的maxWidth和maxHeight选项解决了这个问题，如开发人员网站上所述：
jQuery(*selector*).colorbox({maxWidth:'95%', maxHeight:'95%'});
You can also add this snippet to resize the colorbox when resizing the window or changing your mobile device's orientation :
您还可以添加此代码段以在调整窗口大小或更改移动设备方向时调整颜色框的大小：
/* 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);
Eventually, replace jQueryby $.
最终，取代的jQuery的$。
回答by input
I tried many of the solutions here but the following from @berardig on github worked really well for me
我在这里尝试了许多解决方案，但以下来自 @berardig 的 github 对我来说非常有效
var cboxOptions = {
width: '95%',
height: '95%',
maxWidth: '960px',
maxHeight: '960px',
}
$('.cbox-link').colorbox(cboxOptions);
$(window).resize(function(){
$.colorbox.resize({
width: window.innerWidth > parseInt(cboxOptions.maxWidth) ? cboxOptions.maxWidth : cboxOptions.width,
height: window.innerHeight > parseInt(cboxOptions.maxHeight) ? cboxOptions.maxHeight : cboxOptions.height
});
});
Source: https://github.com/Hymanmoore/colorbox/issues/183#issuecomment-42039671
来源：https: //github.com/Hymanmoore/colorbox/issues/183#issuecomment-42039671
回答by chrisrth
Looks like this issue has been discussed and working solutions offered on the author's github
看起来这个问题已经在作者的 github 上讨论过并提供了工作解决方案
回答by Ray
Call this on window resize and/or "orientationchange" Where 960 is the preferred width for my colorbox, and my maxWidth = 95%
在窗口调整大小和/或“orientationchange”上调用它，其中 960 是我的颜色框的首选宽度，我的 maxWidth = 95%
var myWidth = 960, percentageWidth = .95;
if ($('#cboxOverlay').is(':visible')) {
$.colorbox.resize({ width: ( $(window).width() > ( myWidth+20) )? myWidth : Math.round( $(window).width()*percentageWidth ) });
$('.cboxPhoto').css( {
width: $('#cboxLoadedContent').innerWidth(),
height: 'auto'
});
$('#cboxLoadedContent').height( $('.cboxPhoto').height() );
$.colorbox.resize();
}
回答by Sumith Harshan
Add this into your main js file after load the color box related js and jquery lib files.
在加载与颜色框相关的 js 和 jquery lib 文件后，将此添加到您的主 js 文件中。
(function ($, window, document, undefined) {
//Configure colorbox call back to resize with custom dimensions
$.colorbox.settings.onLoad = function() {
colorboxResize();
}
//Customize colorbox dimensions
var colorboxResize = function(resize) {
var width = "90%";
var height = "90%";
if($(window).width() > 960) { width = "860" }
if($(window).height() > 700) { height = "630" }
$.colorbox.settings.height = height;
$.colorbox.settings.width = width;
//if window is resized while lightbox open
if(resize) {
$.colorbox.resize({
'height': height,
'width': width
});
}
}
//In case of window being resized
$(window).resize(function() {
colorboxResize(true);
});
})(jQuery, this, this.document);
回答by Richardsan
In the jQuery.colorbox.js file just make this change
在 jQuery.colorbox.js 文件中进行此更改
line 24:-
第 24 行：-
maxWidth: "100%",
Don't make any other changes, all will be working fine with all responsive effect :)
不要进行任何其他更改，所有响应效果都会正常工作:)
回答by Anthony Carbon
This one is working properly brothers.
兄弟这一项工作正常。
jQuery( document ).ready( function(){
var custom_timeout = ( function() {
var timers = {};
return function ( callback, ms, uniqueId ) {
if ( !uniqueId ) {
uniqueId = "Don't call this twice without a uniqueId";
}
if ( timers[uniqueId] ) {
clearTimeout ( timers[uniqueId] );
}
timers[uniqueId] = setTimeout( callback, ms );
};
})();
$(".group1").colorbox({rel:'group1', width:"80%" });
$( window ).resize( function(){
custom_timeout(function(){
if( $('#cboxOverlay' ).css( 'visibility' ) ){
$(".group1").colorbox.resize({ innerWidth:'80%' });
}
}, 500 );
});
});
});
Visit demo page
访问演示页面
回答by Milche Patern
You should consider 'framing' with @media query colorBox css file the same way you'd do with the rest of your css.
您应该像处理其余 css 一样考虑使用 @media 查询 colorBox css 文件进行“框架”。
回答by Iggy
I've made this in CSS for youtube video box, but take care, it could cut some vertical images.
我已经在 CSS 中为 youtube 视频框制作了这个，但请注意，它可能会剪切一些垂直图像。
@media (max-width: 480px) {
#colorbox {
max-height:218px !important;
}
#cboxWrapper *, #cboxWrapper {
height:auto !important;
}
}
回答by HappyCoder
This is the solution that worked for me, I took out the timer stuff that was originally posted by Shabith.
这是对我有用的解决方案，我取出了最初由 Shabith 发布的计时器内容。
/**
* Auto Re-Size function
*/
function resizeColorBox()
{
if (jQuery('#cboxOverlay').is(':visible')) {
jQuery.colorbox.resize({width:'100%', height:'100%'});
}
}
// Resize Colorbox when resizing window or changing mobile device orientation
jQuery(window).resize(resizeColorBox);
window.addEventListener("orientationchange", resizeColorBox, false);
Credits go to: shabith
学分转到：shabit
