我在fancybox中的弹出图片旁边有一个描述框,但是当从上面重新调整窗口大小时(在jsfiddle中尝试),图像会适应更改并减小大小,但描述框保持不变它的大小。我试图给描述框提供与图像相同的高度,同时当窗口与图像平行重新调整尺寸时减小尺寸。请帮忙。
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');
}
});
答案 0 :(得分:0)
我试着找出你在寻找什么并理解这个问题。 对我来说,最好的解决方案是this one。 我会解释一下: 1.如果您调整大小,窗口将变为小尺寸文本,但不能包含在黑色div中。 2.当你在大窗户中打开它时,底部尺寸的空白空间看起来很奇怪。
以下是我对您的代码所做的更改:
.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;
}
让我知道它是否有帮助:)
修改强>
好的,这里是my edit。 没有 jQuery ,基于其他元素的动态高度是不可能的,所以我添加了一个简单的函数:
$( window ).resize(function() {
imageHeight = $('.fancybox-inner').height();
$('.fancybox-title').height(imageHeight);
});
获取图像高度并根据它设置文本容器高度。 要使其工作,您还需要在 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 */
}
等待您的同意:)