0

我有 PHP 代码来生成一个图形，它使用 AJAX 运行，然后它会显示在隐藏中并使用 id 我在花哨的框中显示它，它可以工作，但是 PHP 运行需要时间，花哨的框首先显示加载器，然后最终使图像出现在fancybox中，但它的大小保持不变50px x 50px（或其他东西）。我尝试了此链接上的所有解决方案如何在运行时调整 Fancybox 的大小？ 它都不起作用，或者我做错了什么（我只是从整个 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,

    });
4

1 回答 1

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\" />";
?>

见演示

编辑：

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

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

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

我用这个补丁更新了DEMO 。

于 2013-08-08T08:06:39.200 回答