Fancybox描述框在窗口重新调整大小时保持大小 [英] Fancybox description box maintaining size upon window re-size
问题描述
我在fancybox中的弹出图像旁边有一个描述框，但是当从上方重新调整窗口大小（在jsfiddle中尝试它）时，图像适应变化并减小尺寸，但描述框保留它的大小。我试图给描述框与图像相同的高度，同时缩小与图像并行的窗口大小。任何帮助请。
JSFIDDLE： http：// jsfiddle .net / tqnk7e3f / 4 /
HTML：
< a caption =< h2> Image Header< / h2>< p>< p> Lorem ipsum dolor sit amet，consetetur sadipscing elitr，sed diam nonumy eirmod tempor invorunt ut labore et dolore magna aliquyam erat，sed diam voluptua。 < / p>中rel =Soldclass =fancyboxdata-fancybox-group =thumb1href =http://fancyapps.com/fancybox/demo/4_b.jpg>< img src =http：// fancyapps.com/fancybox/demo/4_s.jpgalt =/>< / a>
< a class =fancybox hiddendata-fancybox-group =thumb1href =http://fancyapps.com/fancybox/demo/3_b.jpg>< img src =http://fancyapps.com/fancybox/demo/3_s.jpgalt =/>< / a>
< a class =fancyboxdata-fancybox-group =thumb2href =http://fancyapps.com/fancybox/demo/2_b.jpg>< img src =http://fancyapps.com/fancybox/demo/2_s.jpgalt =/>< / a>
< a class =fancybox hiddendata-fancybox-group =thumb2href =http://fancyapps.com/fancybox/demo/1_b.jpg>< img src =http://fancyapps.com/fancybox/demo/1_s.jpgalt =/>< / a>
CSS：
.hidden {
display：none;
}
.fancybox-title {
right：auto;
height：auto;剩余
：-260px;
margin-bottom：auto;
/ *更改* /
top：0;
}
.fancybox-title .child {
height：auto;
空格：正常;
text-align：left;
height：470px;
padding：0 20px;
max-width：200px;
margin-right：auto;
border-radius：0;
}
.fancybox-title .child h2 {
font-size：140％;
line-height：1.5;
margin-top：20px;
margin-bottom：15px;
}
.fancybox-title .child p {
margin-bottom：30px;
JQUERY：
$（'。fancybox'）。fancybox（{
prevEffect：'fade'，
nextEffect：'fade'，
padding：0，
closeBtn：true，
箭头：true，
nextClick：true，
助手：{
title：{type：'outside'}
}，
helpers：{
thumbs：{
width：80，
height ：80
}
}，
beforeLoad：function（）{
this.title = $（this .ext（'caption'）;
}
}）;
我试图弄清楚你在找什么，了解问题。
对我来说，最好的解决方案是。
我将解释everthing：
1.如果您调整大小，小尺寸文本的窗口将无法包含黑色div内。
2.当您在大窗口中打开它时，底部尺寸上的空白空间会显得很奇怪。
以下是我对代码的更改：
.fancybox-title .child
{
height：auto;
空格：正常;
text-align：left;
/ * height：470px; - 删除静态高度:) * /
padding：0 20px;
max-width：200px;
margin-right：auto;
border-radius：0;
}
让我知道它是否有帮助：）
编辑
好的，这里是我的编辑。
没有 jQuery ，基于其他元素的动态高度是不可能的，所以我添加了一个简单的函数：
$（window）.resize（function（）{
imageHeight = $（'。fancybox-inner'）。height（）;
$（'。fancybox-title'）。height（imageHeight ）;
}）;
获取图像高度并根据它设置文本容器高度。
为了实现它，您还需要在 CSS 中更改以下几项：
.fancybox-title {
right：auto;
height：auto; / *此容器现在将其高度设置为图像高度* /
left：-260px;
margin-bottom：auto;
top：0;
}
.fancybox-title .child {
white-space：normal;
text-align：left;
padding：0 20px;
max-width：200px;
margin-right：auto;
border-radius：0;
身高：100％; / *留在里面，所以它必须有相同的尺寸* /
}
等待您的批准：）
I have a description box next to the pop-up image in fancybox, however when re-sizing the window from above (try it in jsfiddle), the image adapt to the change and reduce in size, but the description box maintains its size. I'm trying to give the description box the same height as the image, and at the same time reduce in size when window re-sizing in parallel with the image. Any help please.
JSFIDDLE: http://jsfiddle.net/tqnk7e3f/4/
HTML:
<a caption="<h2>Image Header</h2><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>" rel="Sold" class="fancybox" data-fancybox-group="thumb1" href="http://fancyapps.com/fancybox/demo/4_b.jpg"><img src="http://fancyapps.com/fancybox/demo/4_s.jpg" alt="" /></a>
<a class="fancybox hidden" data-fancybox-group="thumb1" href="http://fancyapps.com/fancybox/demo/3_b.jpg"><img src="http://fancyapps.com/fancybox/demo/3_s.jpg" alt="" /></a>
<a class="fancybox" data-fancybox-group="thumb2" href="http://fancyapps.com/fancybox/demo/2_b.jpg"><img src="http://fancyapps.com/fancybox/demo/2_s.jpg" alt="" /></a>
<a class="fancybox hidden" data-fancybox-group="thumb2" href="http://fancyapps.com/fancybox/demo/1_b.jpg"><img src="http://fancyapps.com/fancybox/demo/1_s.jpg" alt="" /></a>
CSS:
.hidden {
display: none;
}
.fancybox-title {
right:auto;
height:auto;
left:-260px;
margin-bottom:auto;
/* CHANGES */
top: 0;
}
.fancybox-title .child {
height: auto;
white-space:normal;
text-align:left;
height:470px;
padding:0 20px;
max-width:200px;
margin-right:auto;
border-radius:0;
}
.fancybox-title .child h2 {
font-size:140%;
line-height:1.5;
margin-top:20px;
margin-bottom:15px;
}
.fancybox-title .child p {
margin-bottom:30px;
}
JQUERY:
$('.fancybox').fancybox({
prevEffect : 'fade',
nextEffect : 'fade',
padding:0,
closeBtn : true,
arrows : true,
nextClick : true,
helpers : {
title : { type : 'outside' }
},
helpers : {
thumbs : {
width : 80,
height : 80
}
},
beforeLoad: function() {
this.title = $(this.element).attr('caption');
}
});
I try to figure out what are you looking for and understand the problem. For me the best solution is this one. I will explain everthing : 1. If you resize the window to small size text won't be able to contain inside the black div. 2. When you open it in big window it will look strange with empty space on the bottom size.
Here's my changes to your code :
.fancybox-title .child
{
height: auto;
white-space:normal;
text-align:left;
/* height:470px; - Remove static height :) */
padding:0 20px;
max-width:200px;
margin-right:auto;
border-radius:0;
}
Let me know if it helps :)
EDIT
Ok so here is my edit. Dynamic height based on other element is impossible without jQuery so i add a simple function :
$( window ).resize(function() {
imageHeight = $('.fancybox-inner').height();
$('.fancybox-title').height(imageHeight);
});
Getting image height and set text container height based on it. To get it work you also need to change this few things in CSS :
.fancybox-title {
right:auto;
height:auto; /* This container will now set it height to image height */
left:-260px;
margin-bottom:auto;
top: 0;
}
.fancybox-title .child {
white-space:normal;
text-align:left;
padding:0 20px;
max-width:200px;
margin-right:auto;
border-radius:0;
height:100%; /* Leave it inside so it must have the same size */
}
Waiting for your approval :)
这篇关于Fancybox描述框在窗口重新调整大小时保持大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
