图像更改后如何调整 Fancybox 的大小

Question

我有 PHP 代码来生成一个图形，它使用 AJAX 运行，然后它会显示在隐藏中，并使用 id 我在花哨的框中显示它，它可以工作，但 PHP 运行和花哨的框需要时间显示加载器，然后最终使图像出现在fancybox中，但它的大小保持相同的50px x 50px（或其他东西）。我在此链接How do you resize Fancybox at runtime? 上尝试了所有解决方案，但都没有奏效，或者我做错了什么（我只是从整个 JS 开始）。它在调整窗口大小后显示整个图像也许我可以用某些功能模拟某种调整大小，我不知道...提前谢谢！

添加的代码（我认为它不会有帮助）：

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>

花式盒

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

    });

Answer 1

我不知道你的代码到底做了什么，但是如果我将 image 直接拉到fancybox 中而不是填充span 标签（顺便说一下，格式化span 标签有其缺点） ，图像显示正确。

因为您已经在使用 jQuery（带有 fancybox），所以这个 ajax 代码（不需要 onclick 属性）也可以解决问题：

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

当然是这个 html

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

我的 php 文件（用于演示目的）只返回一个图像：

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

见DEMO

编辑：

经过进一步测试（在 Chrome 中）后，图像在fancybox 中显示后仍保持尽可能小的尺寸（100 像素）。

解决方法是稍等片刻（大约半秒）让图片完全加载到 fancybox 容器中，然后在 afterShow 回调中运行 $.fancybox.update() 方法，如下所示：

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

我用这个补丁更新了 DEMO。