Question

I’m having some difficulty with pop up images in JQuery.

Here’s a link to the working code:
http://jsfiddle.net/aETbw/27/

If you hover over the little camera icon a photo pops up.

I’d like the pop up image to stay within the viewport, where the viewport is large enough.

Answer 1

You have to check to make sure the image popup and it’s offset isn’t wider than the content area. If it is then position the image popup right vs left. You can’t get the true width of the image popup until after the actual image is loaded. Once it is loaded then run your width check.

$('#imgPop').css({'left':x+'px','top':y+'px'}).show();
$('#imgPop img').load(function(){
    if($('#imgPop img').width() + x > $('#mainContent').width())
        $('#imgPop').css({'left':'','right':'0px'});
});

See the new fiddle here:

http://jsfiddle.net/iambriansreed/UBpep/

UPDATE

I updated my answer to meet the new requests in the comments. The fiddle link above is updated as well.

var hide_popup_timeout = setTimeout(function(){},0);
function hide_popup(){
    clearTimeout(hide_popup_timeout);
    hide_popup_timeout = setTimeout(function(){
        $('#imgPop').hide();
        $('#imgPop img').attr('src','');
    },500);
}

$('#article_list img').hover(function(event) {

    clearTimeout(hide_popup_timeout);

    var x = 30;//$(this).offset().left + 30;
    var y = 50;//$(this).offset().top + $(this).height();
    $('#imgPop').css({'left':x+'px','top':y+'px'});
    $('#imgPop img').attr('src', $(this).attr('rel'));
    $('#imgPop img').load(function(){
        if($('#imgPop img').width() + x > 
           $('#article_list').width())
            $('#imgPop').css({'left':'','right':'0px'});
    });
    $('#imgPop').show();

},function(){
    hide_popup();         
});

$('#imgPop').hover(function(){
    clearTimeout(hide_popup_timeout );
},function(){
    hide_popup();
});​