具有自定义附加元素的fancybox库

在打开fancybox画廊之前，我将元素附加到fancybox内部窗口但是大小剂量变化并且appende’t元素溢出..，如何resize？

我的问题 – http://prntscr.com/4esnpq

HTML

 title1 text1 img1   title2 text2 img2   title3 text3 img3   title4 text4 img4  

JavaScript的

  $(".fancybox").fancybox({ padding: 35, titleShow: false, beforeShow:function() { var title = $(this.element).find('b').text(); var text = $(this.element).find('em').text(); $('.fancybox-inner').prepend(''+ title +''); $('.fancybox-inner').append(''+ text +''); $.fancybox.update(); } }); 

任何解决方案 fancybox版本2。

Answer 1

您可能无法对图像执行此操作，因为根据图像大小而不是.fancybox-inner大小，脚本会动态计算fancybox大小。

您可能需要将内容处理为html ，例如：

 $(".fancybox").fancybox({ fitToView: false, type: "html", beforeShow: function () { var title = $(this.element).find('b').text(); var text = $(this.element).find('em').text(); $('.fancybox-inner').html(''); $('.fancybox-inner').prepend('' + title + ''); $('.fancybox-inner').append('' + text + ''); $.fancybox.update(); } }); 

请参阅JSFIDDLE

Answer 2

我找到了很好的解决方案来编辑​​主要的fancybox库。

1. 在defaults定义新的attach_size: 0

2. 在函数_setDimension找到F.inner.width(width - padding2).height(height - padding2); 并用F.inner.width(width - padding2).height(height - padding2 + current.attach_size);替换它。 F.inner.width(width - padding2).height(height - padding2 + current.attach_size);

3. 将fancybox元素句柄更改为

     $(".fancybox").fancybox({ padding: 35, titleShow: false, beforeShow:function() { var title = $(this.element).find('b').text(); var text = $(this.element).find('em').text(); $('.fancybox-inner').prepend(''+ title +''); $('.fancybox-inner').append(''+ text +''); var sum_size = $('.fancybox-inner b').height() + $('.fancybox-inner em').height(); this.attach_size += sum_size; } }); 

对我有用;）