jQuery Fancybox 全宽
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28075139/
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
Fancybox full width
提问by joemimmo
I'm new to coding and I'm trying to have every fancybox ONLY in my homepagefull width and responsive (eg) but non of these options have done the job (fitToView, autoSize or aspectRatio).
我是编码新手，我试图在我的主页中使用全宽和响应式（例如）中的每个花式框，但这些选项都没有完成这项工作（fitToView、autoSize 或 aspectRatio）。
jQuery
jQuery
jQuery(document).ready(function() {
jQuery( "#site-logo" ).click(function( e ) {
alert( "As you can see, the link no longer took you to jquery.com" );
jQuery.scrollTo( 0 , 1000, { easing:'easeInOutExpo' });
$(".fancybox").fancybox({
helpers : {
media: true
},
width: 1600,
height: 870,
aspectRatio: true,
scrolling: no,
});
});
});
回答by Dimas Pante
Try adding an autoSize false, removing the aspectRatio and changing the width to "100%":
尝试添加 autoSize false，删除宽高比并将宽度更改为“100%”：
jQuery(document).ready(function() {
jQuery( "#site-logo" ).click(function( e ) {
alert( "As you can see, the link no longer took you to jquery.com" );
jQuery.scrollTo( 0 , 1000, { easing:'easeInOutExpo' });
$(".fancybox").fancybox({
helpers : {
media: true
},
width: "100%",
height: 870,
autoSize: false,
scrolling: false
});
});
});
回答by Derek
For anyone else looking in future searches I had the same problem where I needed the image (pop up) to be full width, even if the image has overflow height so I wanted it to be scrollable. Anyways I hope this helps someone in the future.
对于在未来搜索中寻找的其他人，我遇到了同样的问题，我需要图像（弹出）为全宽，即使图像具有溢出高度，所以我希望它是可滚动的。无论如何，我希望这对将来的某人有所帮助。
<script type="text/javascript">
jQuery(document).ready(function($) {
$(".fancybox").fancybox({
autoSize : true,
scrolling : 'auto',
fitToView : false,
width : 'auto',
maxWidth : '100%',
});
});
</script>
