Fancybox 描述框

Question

我正在尝试在 pop-up 图像左侧创建一个描述框，例如：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>

这是否被认为是一种正确的方法，标题是否可以像 post 开头的图像中那样输入。另外，我如何将描述框放置在 pop-up 图像的左侧并赋予它相同的高度，同时保持它响应 window re-sizing?

Answer 1

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

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

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

Fancybox 描述框

Fancybox description box

html

javascript

css

jquery

fancybox