I have the following django template:

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

and I'm occasionally getting weird display errors where the box will either not render anything at all (so it will show up as just a thin white bar, basically) or it will render only about 30 px wide, and position itself halfway down the page. In both cases, if I inspect element, I can see the "shadow" of the full picture, at the right size, with the right url.

Image source doesnt' seem to make a difference, I'm getting no errors, and this is happening in both chrome and firefox. Does anyone have any ideas?