Fancybox說明框

Question

我正在嘗試在彈出圖像的左側創建一個描述框，例如： http : //postimg.org/image/4a44hyz71/73ae3809/

現在，我使用以下方法在某個地方寫我的描述並有縮略圖。 JSFIDDLE 演示

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>標記中添加title="your description" 。 但是，由於要在描述中使用標題和段落，因此您采取的方法似乎合法。