I have need to show this gallery as / in fancy box. It works fine except one design problem that is fancybox doesn't e 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.

.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.

I have need to show this gallery as http://tympanus/Tutorials/ResponsiveImageGallery/ in fancy box. It works fine except one design problem that is fancybox doesn't e 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./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.

• javascript
• jquery
• html
• css
• fancybox

• 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 patible with v2.x). Use afterShow, $.fancybox.update() and $.fancybox.reposition() instead. Check the proper documentation fancyapps./fancybox/#docs – JFK Commented Oct 1, 2013 at 6:29
• 1 Then maxWidth, maxHeight, fitToView, autoSize, closeClick, openEffect and closeEffect are NOT valid options for v1.3.4. Check the proper documentation fancybox/api – JFK Commented Oct 1, 2013 at 6:39
• @JKF, but my main issue is still their. – Learning Commented Oct 1, 2013 at 6:43
• @Anilkumar, is fancybox 2 free for mercial use... – Learning Commented Oct 1, 2013 at 7:04
• @Anilkumar, It say it is not free for mercial 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 mercial websites by paying a fee. – Learning Commented Oct 1, 2013 at 7:44

5 Answers 5

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.

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> 

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

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

    $(".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 pletely and then call $.fancybox.center(); function

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

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.