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に表示されると、可能な限り最小のサイズ（100px）のままでした。

回避策は、画像が fancybox コンテナーに完全にロードされるまで少し (約 0.5 秒) 待ってから、次のようにコールバック$.fancybox.update()内でメソッドを実行することです。afterShow

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

このパッチでDEMOを更新しました。

于 2013-08-08T08:06:39.200 に答える