使用Fancybox 2时,如何才能正确调整文本内容的大小？
tom*_*dot 18 jquery fancybox fancybox-2
我正在使用Unsemantic框架在HTML5中创建一个单页网站,链接到Fancybox 2中显示的隐藏div,并且无法正确地调整所有不同类型的内容.
有三个div - 一个包含div中的文本,包含在隐藏的div中,因此我可以相应地操作内容,一个包含图像库,另一个包含YouTube视频的链接.我创建了一个隐藏类,我通过CSS调用它:
文本部分的HTML:
<a class="fancybox" href="#bio">...blah blah blah...
...then later on...<article class="hidden" id="bio">
视频部分的HTML:
<a class="fancybox fancybox.iframe" href="https://www.youtube.com/video">Videos</a>
CSS:
.hidden {
overflow:hidden;
display:none;
}
在<head>标签内部调用Fancybox :
<script type="text/javascript">
$(document).ready(function() {
$("#fancybox-gallery").click(function() {
$.fancybox.open([
{
href : "image_1.jpg",
}, {
href : "image_2.jpg",
}, {
href : "image_3.jpg"
}
], {
helpers : {
thumbs : {
width: 75,
height: 50
}
}
});
});
});
</script>
使用Fancybox 2默认值(autoSize:true,autoWidth:false和autoHeight:false),图像会相应调整大小,视频会相应调整大小,但文本链接默认为最小高度和最大宽度:
如果我设置autoSize和autoWidth为False,然后设置autoHeight为True,图像调整仍然以同样的方式,在文本框的大小调整为约50%的浏览器窗口,并在视频显示器用的白色右手边的部分内容:
说实话,我喜欢这个例子中文本框的大小,并且它们起反应作用,但是视频框是错误的,所以它有点烦人.
到目前为止,我已经尝试了以下但没有成功:
- 根据朋友的建议删除
class="hidden"并用内联"display:none"脚本替换它 然后display:inline-block在CSS中,但我意识到它不起作用; - 给隐藏文本div格式设置与HTML的其余部分一致,但这只会导致div调整大小,而不是Fancybox.
- 我可以设置一个静态宽度,但它需要响应,所以这是我的需要不能接受;
那么,我哪里错了？答案可能在于设置autoSize:true,并添加一个em或% width需要它的div？
我也在考虑打开一个只影响我需要的div的脚本,但我不确定这是否可行.我不是日复一日的JavaScript用户,所以我的知识很差.
您尝试过使用 Flexbox 吗？我对这组 CSS 属性的首选参考：https://css-tricks.com/snippets/css/a-guide-to-flexbox/
此外，您还可以使用 JavaScript 设置静态值，并在窗口大小调整时更改它们，以确保响应能力。可能需要超时和间隔来防止调整大小时给浏览器带来压力。
| 归档时间： |
|
| 查看次数： |
1218 次 |
| 最近记录： |