javascript - 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/

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

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