Как правильно показать увеличенную версию миниатюры, даже когда я нахожусь близко к краям контейнера или браузера?

Question

У меня есть div, полный изображений 60x60, расположенных в строках по 5. Я хочу показывать увеличенную версию (с максимальным размером 300x300) каждого эскиза при наведении курсора на каждое изображение. У меня есть окружающий div, который скрывает переполнение, поэтому, если вы наведете курсор на изображение в одном из углов, увеличенное изображение будет обрезано, поэтому мне нужно перевернуть изображение на другую сторону. Код, который у меня есть в настоящее время, не решает эту проблему отсечения. Любые идеи, как правильно реализовать это, или есть какие-либо упакованные решения там (предпочтительно с использованием jQuery)?

  $('a.thumb img').live('mouseover', showThumbnail);
  $('a.thumb img').live('mouseout', function() { $('#image-thumbnail').hide(); });
  $('#images a.thumb').live('click', function() { return false; }); /* disable clicks */

  function showThumbnail() {
    var pos = { left: this.offsetLeft, top: this.offsetTop }
    var css = { }

    css['left'] = pos.left + 60 + 5;
    if (css['left'] + 300 > this.offsetParent.offsetWidth)
    {
      css['right'] = pos.left - 5 + 'px';
      delete css['left'];
    } else {
      css['left'] += 'px';
    }

    css['top'] = pos.top + 60 + 5;
    if (css['top'] + 300 > this.offsetParent.offsetHeight+50)
    {
      css['bottom'] = pos.top - 5 + 'px';
      delete css['top'];
    } else {
      css['top'] += 'px';
    }

    $('#image-thumbnail').css(css);

    $('#image-thumbnail').html("<img style='max-width: 300px; max-height: 300px;' src='" + $(this).parent()[0].href + "' />").show();  
  }

Answer 1

Вставьте его в отдельный div, который абсолютно позиционирован, с более высоким z-индексом и вне div, у которого есть отсечение. Я обычно использую что-то вроде

$('#largerImageDiv').html('<img src="path for my larger image" />');
$('#largerImageDiv').show();

затем мышью

$('#largerImageDiv').hide();

В большем div изображения вы назначаете стиль, который делает его абсолютно позиционированным, предпочтительно в другой части страницы, которую они не будут использовать одновременно с областью миниатюр. Вы устанавливаете z-индекс выше, чем любой другой div в этом месте.

Answer 2

Я использую следующее для отображения всплывающих подсказок на графике, сгенерированном Flot, у него есть логика обнаружения краев для окна ...

function showTooltip(x, y, contents){
    $('<div id="tooltip">' + contents + '</div>').appendTo('body');

    var wx=$(window).width();
    var wy=$(window).height();

    var ox=$('#tooltip').width();
    var oy=$('#tooltip').height();

    var t, l, b, a;

    b=x-40; a=wx-x-40;
    if(b<ox && ox>a) l=20;
    else if(ox<a) l=x+20;
    else l=x-ox-20;

    b=y-40; a=wy-y-40;
    if(b<a) t=y+20;
    else t=y-oy-20;

    $('#tooltip').css({top:t,left:l,opacity:0.80}).fadeIn(200);
}