的fancybox的画廊与自定义的附加元素(fancybox gallery with custom

打开的fancybox画廊i前追加元素注入的fancybox内窗但尺寸dosent变化和appende't元件溢出..，如何resize'it？

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

HTML

    <a class="fancybox" rel="group" href="demo/img1.jpg" >
        <b>title1</b>
        <em>text1</em>
        img1
    </a>
    <a class="fancybox" rel="group" href="demo/img2.jpg" >
        <b>title2</b>
        <em>text2</em>
        img2
    </a>
    <a class="fancybox" rel="group" href="demo/img3.jpg" >
         <b>title3</b>
        <em>text3</em>
        img3
    </a>
    <a class="fancybox" rel="group" href="demo/img4.jpg" >
        <b>title4</b>
        <em>text4</em>
        img4
    </a>

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('<b>'+ title +'</b>');
                $('.fancybox-inner').append('<em>'+ text +'</em>');

                $.fancybox.update();

            }

        });

任何解决方案？ 的fancybox 2版。

Answer 1:

因为的fancybox大小是基于图像大小，而不是即时计算由脚本，您可能不能够做到这一点与图像.fancybox-inner的大小。

您可能需要处理内容为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('<img style="max-width:300px" src="' + this.href + '" alt="" />');
        $('.fancybox-inner').prepend('<b>' + title + '</b>');
        $('.fancybox-inner').append('<em>' + text + '</em>');
        $.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);

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('<b>'+ title +'</b>'); $('.fancybox-inner').append('<em>'+ text +'</em>'); var sum_size = $('.fancybox-inner b').height() + $('.fancybox-inner em').height(); this.attach_size += sum_size; } }); 

作品对我好;）

文章来源: fancybox gallery with custom append elements