fancybox Bild manchmal rendert außerhalb Feld

Question

EDIT: das Problem kann hier gesehen werden: http://school.collegebrain.com/images/university-of-washington/. Es passiert nur vielleicht 1/15 mal, aber das ist immer noch viel zu oft.

Ich habe folgende django Vorlage:

<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> 

und ich bin gelegentlich seltsamen Anzeigefehler bekommen, wo die Box entweder gar nichts machen (so wird es als nur ein dünne weiß zeigen Bar, im Grunde) oder es wird nur etwa 30 px breit, und positionieren sich auf halber Strecke der Seite. In beiden Fällen, wenn ich das Element inspiziere, kann ich den "Schatten" des ganzen Bildes sehen, rechts Größe, mit der richtigen URL.

Bildquelle scheint nicht zu unterscheiden, ich bekomme keine Fehler, und das passiert sowohl in Chrome und Firefox. Hat jemand irgendwelche Ideen?

EDIT: eine Ansicht Auswahl Quelle auf einem Feld verkorksten gibt

<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

Meinen ersten Vorschlag mit etwas in Bezug auf Bildern und JavaScript-Problemen ist sicher Javascript kennt die Größe des Bildes zu machen. Stellen Sie die Abmessungen (Breite und Höhe) ein und sehen Sie, ob Ihre Probleme gelöst sind.