javascript - 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 .我会解释一切: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 */
}

等待您的批准:)