fancybox画像が外箱にレンダリングされることがあります

Question

EDIT：問題はここに表示されます：http://school.collegebrain.com/images/university-of-washington/。たぶん1/15に過ぎないかもしれませんが、それでもやりすぎです。

私は次のDjangoのテンプレートがあります。

<script type="text/javascript" src="{{ STATIC_URL }}js/ 
jquery.fancybox-1.3.4.pack.js"></script> 
<link rel="stylesheet" href="{{ STATIC_URL }}css/ 
jquery.fancybox-1.3.4.css" type="text/css" media="screen" /> 
{% include "submission-form.html" with section="photos" %} 
<div class="commentables"> 
     {% load thumbnail %} 
    {% for story in objects %} 
      <div class="image {% if forloop.counter|add:"-1"| 
divisibleby:picsinrow %}left{% else %}{% if forloop.counter| 
divisibleby:picsinrow %}right{% else %}middle{% endif %}{% endif %}"> 
       {% if story.image %} 
        {% thumbnail story.image size crop="center" as full_im %} 
           <a rel="gallery" href="{% url post slug=story.slug %}"> 
           <img class="preview" {% if story.title %} 
alt="{{ story.title }}" {% endif %} src="{{ full_im.url }}" full- 
image="{% if story.image_url %}{{ story.image_url }}{% else %} 
{{ story.image.url }}{% endif %}"> 
             </a> 
        {% endthumbnail %} 
       {% else %} 
         {% if story.image_url %} 
          {% thumbnail story.image_url size crop="center" as 
full_im %} 
           <a rel="gallery" href="{% url post slug=story.slug %}"> 
             <img class="preview" {% if story.title %} 
alt="{{ story.title }}" {% endif %} src="{{ full_im.url }}" full- 
image="{{ story.image_url }}"> 
               </a> 
          {% endthumbnail %} 
         {% endif %} 
       {% endif %} 
     </div> 
    {% endfor %} 
     {% if rowid != "last" %} 
     <br style="clear: both" /> 
     {% endif %} 
    {% if not no_more_button %} 
    <p style="text-align: right;" class="more-results"><a href="{% url 
images school_slug tag_slug %}">more...</a></p> 
    {% endif %} 
</div> 
<script> 
    $(document).ready(function(){ 
     function changeattr(e){ 
      var f = $(e.clone()); 
      $(f.children()[0]).attr('src', $(f.children() 
[0]).attr("full-image")); 
      $(f.children()[0]).attr('height', '500px'); 
      return f[0].outerHTML; 
     } 
     $('.image a').each(function(idx, elem) { 
      var e = $(elem); 
      e.fancybox({ 
       title: $(e.children()[0]).attr('alt'), 
      content: changeattr(e) 
      }); 
     }); 
    }); 
</script> 

と私は時折ボックスが が全く何も表示されませんどちらか（それは同じくらい白い薄い 表示されます奇妙な表示エラーを取得していますがバー、基本的に）、またはそれは約30px幅にのみレンダリングされ、 はページの途中に位置します。どちらの場合でも、 要素を調べると、右側の サイズの右の画像に、完全な画像の「影」が表示されます。

画像ソースには違いがあるようですが、私は エラーが発生していません。これはchromeとfirefoxの両方で発生しています。 誰にもアイデアはありますか？

EDIT：めちゃめちゃボックスのビュー選択ソースは、画像に関するものとJavaScriptの問題と

<div id="fancybox-outer"><div class="fancybox-bg" id="fancybox-bg-n"></div><div class="fancybox-bg" id="fancybox-bg-ne"></div><div class="fancybox-bg" id="fancybox-bg-e"></div><div class="fancybox-bg" id="fancybox-bg-se"></div><div class="fancybox-bg" id="fancybox-bg-s"></div><div class="fancybox-bg" id="fancybox-bg-sw"></div><div class="fancybox-bg" id="fancybox-bg-w"></div><div class="fancybox-bg" id="fancybox-bg-nw"></div><div style="border-width: 10px; width: 165px; height: auto; opacity: 1;" id="fancybox-content"><div style="width: auto; height: auto; overflow: auto; position: relative;"><a rel="gallery" href="/post/shit-is-about-to-get-real/"> 
          <img class="preview" alt="shit IS about to get real" src="http://i.imgur.com/Le8Kv.jpg" full-image="http://i.imgur.com/Le8Kv.jpg" height="500px"> 
         </a></div></div><a style="display: inline;" id="fancybox-close"></a><a style="display: inline;" href="javascript:;" id="fancybox-left"><span class="fancy-ico" id="fancybox-left-ico"></span></a><a style="display: inline;" href="javascript:;" id="fancybox-right"><span class="fancy-ico" id="fancybox-right-ico"></span></a></div> 

Answer 1

私の最初の提案はJavaScriptを画像のサイズを知っていることを確認することです提供します。寸法（幅と高さ）を設定し、問題が解決したかどうかを確認します。