Fancybox描述框在窗口重新调整大小时保持大小

Question

我在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'); 
    } 

      }); 

Answer 1

我揣摩你在寻找和未解决这个问题。 对我来说最好的解决方案是this one。 我会解释everthing： 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 */ 
} 

等待你的批准:)