Как определить, что изображение находится за пределами экрана (браузера), а затем переместить его?

Question

Я использую эту технику, чтобы всплывающее изображение моих миниатюр. Единственная проблема заключается в том, что если эскиз находится рядом с одним краем экрана, а исходное изображение действительно большое, то оно обрезается по краю экрана.

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

Как я могу это сделать?

Answer 1

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

   $('.thumb').mouseover(function () {  
     if( ( $(window).width() - ($(this).siblings('.popup').position().left + $(this).siblings('.popup').width()) ) < 0) {
        //Change the position here..
        alert("Out of browser");
     }

   });

Имейте в виду, это ТОЛЬКО говорит вам, что изображение находится за пределами браузера, в котором оно находится. Кроме того, это не учитывает наценки. Возможно, вы захотите сделать что-то более похожее на

   $('.thumb').mouseover(function () {  
     if( ( $(window).width() - ($(this).siblings('.popup').position().left + $(this).siblings('.popup').width() + parseInt($(this).siblings('.popup').css("margin-left") + parseInt($(this).siblings('.popup').css("margin-right")) ) < 0) {
        //Change the position here..
        alert("Out of browser");
     }

   });

Обратите внимание, что parseInt используется, поскольку он возвращает xxpx (xx - числовое значение). parseInt это лишит ... Возможно, есть плагин, но если вы хотите сделать это с нуля, это хорошее начало.

Перемещение самого изображения - это еще одна проблема, которую я здесь не решал, но думаю, что это должно дать вам твердое начало.