¿Cómo puedo detectar que la imagen está fuera de la pantalla (navegador) y luego muevo?

Question

Estoy utilizando esta técnica tener una imagen emergente de mis miniaturas. El único problema es que si la miniatura está cerca de uno de los bordes de la pantalla, y la imagen original es muy grande, entonces se corta por el borde de la pantalla.

Sé que requiere Javascript, pero no estoy del todo seguro de cómo detectar que la imagen está fuera de la pantalla visible y luego lo hace conmutar al otro lado de la uña del pulgar.

¿Cómo puedo hacer esto?

Answer 1

Es necesario hacer algunos cálculos, pero es posible. Usando el plugin por encima de hacer algo como esto ...:

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

   });

Tenga en cuenta que esto sólo le dice que la imagen está fuera del navegador eso es todo. Además, esto no toma en cuenta los márgenes. Es posible que desee hacer algo más como

   $('.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");
     }

   });

Nota parseInt se utiliza como it'l volver xxpx (XX es el valor numérico). parseInt que se tira ... Puede haber un tapón en pero si desea hacerlo desde cero este es un buen comienzo.

Traslado de la imagen en sí es otro tema que no he abordado aquí, pero creo que esto debe darle un comienzo sólido.