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,

    });

Answer 1

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.