带自定义追加元素的fancybox画廊 [英] fancybox gallery with custom append elements

问题描述

在打开fancybox画廊之前，我将元素追加到fancybox内窗口中，但是大小剂量更改和appende't元素溢出了..，如何调整大小?

before opening fancybox gallery i append elements into fancybox inner window but size dosent change and appende't element are overflowed.. , how to 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

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.

any solution ? fancybox version 2.

推荐答案

我发现编辑主fancybox库的好方法.

I found good solution editing main fancybox library.

1. 在defaults中定义新的attach_size: 0

在功能_setDimension中找到F.inner.width(width - padding2).height(height - padding2);，并将其替换为F.inner.width(width - padding2).height(height - padding2 + current.attach_size);

In function _setDimension find F.inner.width(width - padding2).height(height - padding2); and replace it with F.inner.width(width - padding2).height(height - padding2 + current.attach_size);

将fancybox元素句柄更改为

Change fancybox element handle to

            $(".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画廊的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！