Question

我有PHP代码生成图形，它使用AJAX运行，然后它将显示在隐藏和使用id我在精美框中显示它，它工作但PHP需要时间运行和花哨框首先显示装载机，然后一个图像最终制作它将在fancybox apear但它的大小保持相同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>

的fancybox

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

    });

Answer 1

我不确切知道你的代码是做什么的，但如果我将图像直接拉到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中显示的最小尺寸（100px）。

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

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

我使用此修补程序更新了 DEMO 。

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

1 个答案: