Fancybox说明框

Question

i'm trying to create a description box to the left of the pop-up image such as this: http://postimg.org/image/4a44hyz71/73ae3809/

now i used the following method to get someplace to write my description and have thumbnails. 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>

Is this considered a correct method, and can the caption take such input as in the image at the beginning of the post. Also how can i place the description box to the left of the pop-up image and give it the same height whilst keeping it responsive to window re-sizing?

Answer 1

I hope this is getting close to what you want to achieve: http://jsfiddle.net/arjbb9xc/1/

The downside is the description will go out of view when the window is too small. In order to take care of that issue we would have to include some nasty javascript that could possible cause problems with fancybox.

Note: If you ever want to just add a small title to your fancybox images, just add a title="your description" to the <a> tag. However, because you want to use headers and paragraphs in your description the approach you made seems legit.