How to resize Fancybox after the image changes

Question

I have PHP code to generate a graph, it runs with AJAX, and then it would show up in hidden and using id I show it in fancy box, it works but it takes time for PHP to run and fancy box at first shows loader, then an image is finnally made it would apear in fancybox but it's size stays the same 50px x 50px (or something). I tryed every solution on this link How do you resize Fancybox at runtime? none of it worked or I was donig something wrong(I'm just starting with whole JS). It shows whole image after the window is resized maybe I could simulate some kind of resizing with some function, I don't know...Thanks in advance!

Added code (I don't think it will help):

JS

function graph2() 
{

  var ajax = getRequest();
  ajax.onreadystatechange = function()
  {
      if(ajax.readyState == 4)
      {
          document.getElementById('graph').innerHTML = ajax.responseText;
      }

  }
  document.getElementById('graph').innerHTML = "<br/><img src=img/ajax-loader.gif><br/><br/>";
  ajax.open("GET", "graph_2.php?", true);
  ajax.send(null);
}

HTML

<a class="graph" rel="group" onclick='graph2(); return false;' id="menu_button" href="#graph">Skambučiai per diena</a>
<span id="graph" display="none"></span>

Fancybox

$(document).ready(function() 
{
    $(".graph").fancybox(
    {
          helpers: 
          {
              title : 
              {
                  type : 'float'
              }
          },
          autoSize : true,

    });

that normally happens when the versions of fancybox js and css files don't mach ;) (for instance js is v2.1.5 and css is v2.0.6) ... check http://stackoverflow.com/a/12258702/1055987 — JFK, Aug 07 '13 at 16:35
possible duplicate of [After upgrading fancybox to 2.1 the images get a default of 100px height](http://stackoverflow.com/questions/12258357/after-upgrading-fancybox-to-2-1-the-images-get-a-default-of-100px-height) — JFK, Aug 07 '13 at 16:36
Well thats not the case, becouse I just downloaded it yesterday from official site. And I checked all versions they are the same - 2.1.5 — Ignas, Aug 08 '13 at 06:46
the site with the issue ... you are not posting any code or providing any element we can use to figure out what you might be doing wrong — JFK, Aug 08 '13 at 06:50
have you tried adding `type:"image"` to your API options? (the graph is an image, isn't it?) — JFK, Aug 08 '13 at 07:07
Yes it is an image, but now it says that the content cannot be loaded. — Ignas, Aug 08 '13 at 07:15
`Added code (I don't think it will help):` ... you are so optimistic — JFK, Aug 08 '13 at 07:36
It's for AJAX so that I could run php script without reloading page, it creates XMLHttpRequest object. (Atleast thats how I understand it.) So it's not related. Problem is that the image is created after the Fancybox is opened thats why it stays in default small size, I need to resize it or open it after a few seconds. — Ignas, Aug 08 '13 at 07:44

JFK · Accepted Answer · 2013-08-08T18:56:27.120

I don't know exactly what your code does but if I pull the image directly into fancybox instead of populating a span tag (formatting span tags has its drawbacks by the way), the image is displayed correctly.

Since you are already using jQuery (with fancybox) this ajax code (without needing the onclick attribute) does the trick too :

jQuery(function($) {
  $(".fancybox").on("click", function(){
    $.ajax({
      type: "GET",
      cache: false,
      url: "returnImage.php",
      success: function(data) {
        $.fancybox(data,{
          helpers: {
            title:  {
              type: 'float'
            }
          },
          autoSize: true
        });
      }
    }); // ajax
    return false;
  }); // on
}); // ready

with this html of course

<a class="fancybox" href="#test">get image via ajax in fancybox</a>

My php file (for demo purposes) only returns an image :

<?php 
echo "<img src=\"images/01.jpg\" alt=\"test\" />";
?>

See DEMO

EDIT :

After further testing (in Chrome) the image remained in the smallest possible size (100px) once shown in fancybox.

The workaround is to wait a bit (around half a second) for the image to be fully loaded in the fancybox container and then to run the method $.fancybox.update() inside the afterShow callback like :

  afterShow: function(){
    var resize = setTimeout(function(){
      $.fancybox.update();
    },500);
  }

I updated the DEMO with this patch.

How to resize Fancybox after the image changes

1 Answers1