How to call fancybox resize function when fancybox-wrap height changes

1
votes

I have need to show this gallery as http://tympanus.net/Tutorials/ResponsiveImageGallery/ in fancy box. It works fine except one design problem that is fancybox doesn't come in the center for first time as it has to download few image for first time if one open the same album second time it then show correctly in the center as all image are cached. I tried to resolve this issue with following code but it is not work

I cant give fancybox fixed width and height as images are of different dimensions

$(".fancybox-frame").fancybox({
    maxWidth: 740,
    maxHeight: 600,
    fitToView: false,
    width: '70%',
    height: '70%',
    autoSize: true,
    closeClick: true,
    hideOnOverlayClick: true,
    openEffect: 'none',
    closeEffect: 'none',
    onComplete: function () {
        $.fancybox.resize();
        $.fancybox.center();
    }
});

Other solution i can think of is to call fancybox.center() and $.fancybox.center(); function when fancybox wrapper with changes fancybox-wrap.

This i can help me correctly repositioning the fancybox in center.

But i am not sure how to track height change for fancybox-wrap and call the reposition the fancy box.

Fancybox V 1.3.4 Help in this regarding is appreciated.

UPDATE:

Just to give you an idea i face similar problem that is happend on this link.

http://www.picssel.com/playground/jquery/getImageAjax.html

When you click for the first time it small fancy-box and doesn't re-size when image is downloaded. In my case i have to download multiple image and it take time to display the first image in between takes default value but doent resize when first image is download.

5
javascriptjqueryhtmlcssfancybox
I would like to think that you are using fancybox v2.x, aren't you? If so, neither onComplete, $.fancybox.resize() or $.fancybox.center() are valid options or methods (those are for v1.3.4 and not compatible with v2.x). Use afterShow, $.fancybox.update() and $.fancybox.reposition() instead. Check the proper documentation fancyapps.com/fancybox/#docs - JFK
Then maxWidth, maxHeight, fitToView, autoSize, closeClick, openEffect and closeEffect are NOT valid options for v1.3.4. Check the proper documentation fancybox.net/api - JFK
@JKF, but my main issue is still their. - Learning
@Anilkumar, is fancybox 2 free for commercial use... - Learning
@Anilkumar, It say it is not free for commercial use fancyBox licensed under Creative Commons Attribution-NonCommercial 3.0 license. You are free to use fancyBox for your personal or non-profit website projects. You can get the author's permission to use fancyBox for commercial websites by paying a fee. - Learning

5 Answers

2
votes

set autoSize to false in order to set width and height for fancybox. i.e.

$(".fancybox-frame").fancybox({
    maxWidth: 740,
    maxHeight: 600,
    fitToView: false,
    autoSize: false,
    width: '70%',
    height: '70%',
    closeClick: true,
    hideOnOverlayClick: true,
    openEffect: 'none',
    closeEffect: 'none',
    onComplete: function () {
        $.fancybox.resize();
        $.fancybox.center();
    }
});

Hope this helps you.

2
votes

Dynamic Inline Content Loading

  function loadAnswer(id){    
    jQuery.fancybox({       
      'content' : jQuery("#outerFAQ"+id).html(),        
       /*For Auto height and width*/
       'onComplete' : function(){
          jQuery('#fancybox-wrap').css({height:'auto',width:'auto'});
          jQuery.fancybox.resize();
          jQuery.fancybox.center(); 
        }
      }); 
    }

/*Dynamically Set the id and passing it to function*/  
 <a class="fancybox"  href="#" onClick="loadAnswer(<?php echo $data->getId()/*Dynamic id*/ ?>);"> Demo </a>

    <div id="outerFAQ<?php echo $data->getId(); ?>"  style="display:none;"> 
      <div id="ans<?php echo $data->getId();?>">
        demo        
      </div>
    <div>

Single inline content loading

   jQuery( "#demo" ).click(function() {
      jQuery.fancybox({
        'content' : jQuery("#demoContent").html(),
        onComplete: function () {
        /*Static height width*/  
        jQuery("#fancybox-content").css({
          height:'500px',
          overflow:'scroll',
        });
        jQuery("#fancybox-wrap").css("top","10");
        jQuery(".fancybox-wrap").css("position", "absolute");
      }
    });

    <a  id="demo"  href="#">Click me</a>

    <div style="display: none">
      <div id="demoContent">
        demo
      </div>
    </div>
1
votes

if you fancybox is already open and want to resize then below code will helps you.

      $.ajax({
                url: 'YOUR URL',
                data:'DATA WANT TO TRANSFER',
                type: 'post'
                dataType: "text",
                success:function(result){                       
                    //PLAY WITH RESULT SET

                    $.fancybox.toggle();

                },
                error:function(request,error){
                    alert("Error occured : "+error);

                }
            });

Reference from : Resize Fancybox

0
votes

Solution, I managed to make it work by resizing after delay of 3 seconds by that time first image is downloaded completely

    $(".fancybox-iframe").fancybox({
        width: '70%',
        height: '70%',
        hideOnOverlayClick: true,
        centerOnScroll:true,
        onComplete : function(){
            // $.fancybox.resize();
            // $.fancybox.center();
             var resize = setTimeout(function () {
                 $.fancybox.center();
             }, 3000)
             }
    });

I believe more professional approach will be check using jquery when image is downloaded completely and then call $.fancybox.center(); function

Please if this is fine or we can do it some otherway.

-1
votes

Did you try to use <center></center> include of your fancybox? I think so it'll work on your page. and no need to use java, cause you are just trying to use it as center.