fancybox image sometimes renders outside box

Go To StackoverFlow.com

0

EDIT: the problem can be seen here: http://school.collegebrain.com/images/university-of-washington/. It only happens maybe 1/15 times, but that's still way too often.

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?

EDIT: a view selection source on a messed up box gives

<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>
2012-04-05 23:25
by Colleen
Instead of all this code. Do a view source on your webpage and post that instead - Valamas 2012-04-05 23:34
what is the relation between this question and this one http://stackoverflow.com/q/10035575/1055987 - JFK 2012-04-08 05:02
the one you posted was "how do I get the right thing to show in the popup?" and this one is "now that I have the right thing in the popup, how do I make the popup consistently load correctly? - Colleen 2012-04-09 16:13


0

My first suggestion with anything regarding images and javascript problems is to make sure javascript knows the size of the image. Set the dimensions ( width and height ) and see if your problems are resolved.

2012-04-09 16:46
by mikevoermans
My concern with setting a specific size is that I don't want smaller images to get stretched - Colleen 2012-04-09 19:04
I'm sorry, wasn't implying you should stretch it, I just want to know if setting the image dimensions to what they should be (when loaded) fixes the problem. If this fixes the render issue we can then discuss what CSS adjustments might need to be taken to fix layout from there - mikevoermans 2012-04-09 19:51
ok. Where should I set the image size? (e.g. via js, as an attr on the image tag itself, as a css property..? - Colleen 2012-04-09 21:27
attr on the image tag itself. that way before the image loads the browser already knows the dimensions of the image - mikevoermans 2012-04-09 21:34
Ok, that works. Thanks! So what css adjustments are you talking about - Colleen 2012-04-10 18:38
Additional adjustments "might" need to be taken - I would say just wrap the image in a container if you need to constrain it in some way. Otherwise does that answer your question - mikevoermans 2012-04-10 18:50
not really... setting a max height on a container div is not going to have the same effect as setting a max height on the image. What I would really like to do is say image.css("max-height", 500) and then image.attr("width", image.width) and have it size properly - Colleen 2012-04-10 19:03
let us continue this discussion in chatmikevoermans 2012-04-10 19:05
I ended up solving that problem by saving the original height and width as attributes and doing my own ratio calculations - Colleen 2012-04-11 00:15
Ads