Fancybox描述框

Question

我试图在弹出图片的左侧创建一个描述框，例如：http://postimg.org/image/4a44hyz71/73ae3809/

现在我使用以下方法来获取某个地方来编写我的描述并拥有缩略图。 JSFIDDLE Demo

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

});

HTML：

<a caption="Early 1900'....." rel="Sold" class="fancybox" data-fancybox-group="thumb1" 
href="http://fancyapps.com/fancybox/demo/4_b.jpg">  <img src=" "alt="" /></a>

这被认为是一种正确的方法，并且标题可以在帖子开头的图像中进行输入。 另外，如何将描述框放在弹出图像的左侧并赋予它相同的高度，同时保持它对窗口重新调整大小的响应？

Answer 1

我希望这接近你想要实现的目标： http://jsfiddle.net/arjbb9xc/1/

缺点是当窗口太小时，描述将会消失。为了解决这个问题，我们必须包含一些令人讨厌的JavaScript，这可能会导致fancybox出现问题。

注意：如果您只想在fancybox图片中添加小标题，只需在title="your description"标记中添加<a>即可。但是，因为您想在描述中使用标题和段落，所以您所采用的方法似乎是合法的。