fancybox gallery with custom append elements

问题

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 ?

my problem - 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();

            }

        });

any solution ? fancybox version 2.

回答1:

You may not be able to do that with images because the fancybox size is calculated on the fly by the script based on the image size, not the .fancybox-inner size.

You may need to handle the content as html, something like :

$(".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();
    }
});

See JSFIDDLE

回答2:

I found good solution editing main fancybox library.

1. In defaults define new attach_size: 0

2. 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);

3. 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;
   
               }
   
           });
   

works good for me ;)

来源：https://stackoverflow.com/questions/25414720/fancybox-gallery-with-custom-append-elements