Estoy creando un visor de imágenes bastante bueno, pero estoy atascado en una parte en particular: panorámica de la imagen cuando hice acercamiento. Parece un problema trivial y he probado casi todas las respuestas a preguntas similares en SO, pero cada vez algo no funciona bien Necesito un par de ojos frescos.¿Cómo puedo desplazar una imagen más grande que su contenedor correctamente utilizando jQuery?
He abierto temporalmente una URL en mi servidor de desarrollo. Echar un vistazo a esta página:
[URL cerrada]
A continuación, mover hacia arriba la rueda del ratón para activar el zoom. Aquí estamos. Una vez que haya hecho un acercamiento, haga clic y arrastre para intentar desplazar la imagen. Está haciendo una panorámica correcta, pero algo no está bien. Este es actualmente el código utilizado para el panning:
var clicking = false;
var previousX;
var previousY;
$("#bigimage").mousedown(function(e) {
e.preventDefault();
previousX = e.clientX;
previousY = e.clientY;
clicking = true;
});
$(document).mouseup(function() {
clicking = false;
});
$("#bigimage").mousemove(function(e) {
if (clicking) {
e.preventDefault();
var directionX = (previousX - e.clientX) > 0 ? 1 : -1;
var directionY = (previousY - e.clientY) > 0 ? 1 : -1;
$("#bigimage").scrollLeft($("#bigimage").scrollLeft() + 10 * directionX);
$("#bigimage").scrollTop($("#bigimage").scrollTop() + 10 * directionY);
previousX = e.clientX;
previousY = e.clientY;
}
});
La solución Busco tiene estas características:
- dirección correcta de la panorámica sobre los ejes X e Y
- No debería ser posible desplazarse fuera de los bordes de la imagen
- razonablemente fluido paneo
- Es bueno tener: ventana de cambio de tamaño no debería causar ningún problema
Aunque aprecio cualquier ayuda que pueda obtener, no me señale un plugin genérico, he intentado con muchos de ellos que estoy buscando una respuesta que funcione para mi situación específica. Estoy tan desesperado que incluso estableceré una recompensa monetaria por la solución perfecta que responda a la característica anterior.
PS: Inténtelo el enlace en Firefox o un navegador Webkit
Podría describir lo que no funciona, y proporcionar un violín? Sin zoom, la imagen ya tiene algunos problemas con la panoramización, según yo. Anteriormente, he creado una secuencia de comandos de panorámica de fondo, con solo mover el mouse, vea [esta respuesta] (http://stackoverflow.com/questions/7776843/mouse-on-left-of-screen-move-image-to-left -same-when-mouse-on-right-of-screen/7777153 # 7777153) para inspiración. –
@RobW Gracias, pero el enfoque con la imagen de fondo sería una revisión importante de todo el asunto, demasiadas dependencias, estoy pensando en eliminar esta característica por completo. Esperaba que se pudiera arreglar usando el método de desplazamiento. – Ferdy
Como puede ver en mi violín, la panoramización no es difícil y se puede hacer de manera eficiente. Probablemente, su problema sea causado al escribir código sin pensar cómo implementarlo de manera eficiente de antemano. El zoom se puede hacer fácilmente mediante el uso de la lógica adecuada y la propiedad CSS 'background-size'. Ya he implementado el paneo. Al sumar ambos resultados, se obtiene la funcionalidad deseada. Si ofrece algún código relevante, podría considerar echarle un vistazo. –