Question

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

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-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('<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库。

在defaults中定义新的attach_size: 0
在功能_setDimension中找到F.inner.width(width - padding2).height(height - padding2);并将其替换为F.inner.width(width - padding2).height(height - padding2 + current.attach_size);

将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图库

2 个答案: