Estoy buscando un plugin de JavaScript (preferiblemente jQuery) para poder desplazarme por una imagen, de la misma manera que funciona Google Maps.Estilo de Google Maps desplazando a cualquiera?
Puedo hacer que la imagen se pueda arrastrar pero luego veo toda la imagen mientras la arrastro, incluso si el elemento principal es overflow:hidden.
¡Cualquier ayuda sería muy apreciada!
Puede llegar un poco tarde a la fiesta, pero solo estaba buscando lo mismo. Lo que encontré es scrollview para jquery, funciona perfecto y hace exactamente esto drag-to-scroll similar a google maps para divs desbordados.
Puede utilizar la API de google api ... le permiten usarla con imágenes personalizadas. Y puede elegir si los controles aparecen o no.
EDIT: encontré un tutorial decente sobre cómo hacer esto. http://mapki.com/wiki/Add_Your_Own_Custom_Map
Aunque esta es la respuesta aceptada, yo estaba esperando una respuesta jQuery, y sin embargo no otro guión completamente diferente a incluir. – Moak
Sé que esta respuesta se hace hace 3 años. Sin embargo, debo mencionar que Google va a ser un modelo pago para Google Maps API; por lo tanto, si usa sus propias imágenes, la peor alternativa para usar es Google Maps. – Lashae
Echa un vistazo a Google Maps Image Cutter Puede tomar cualquier imagen o foto digital y cortarla en mosaicos que se muestran en un mapa de Google. Puede ser una manera rápida de hacer lo que necesita ...
Esto tiene menos que ver con javascript y más con el CSS coding.
Pruebe algunos experimentos con solo HTML y CSS para hacer que la imagen se recorta correctamente, luego agregue el javascript para moverla.
Si no puede conseguir que clip con HTML, o muévase con la publicación de javascript la demostración más simple del problema aquí para que podamos depurar.
Sin el código estamos filmando en la oscuridad.
el html y el css parecen ser el problema, cuando no se arrastra, la imagen se recorta en el div principal, pero el complemento que se puede arrastrar (jquery.interface) luego vuelve a mostrar toda la imagen – sydlawrence
Para una buena descripción de la tecnología subyacente, eche un vistazo al Capítulo 4 (si no recuerdo mal) del libro de los Programadores Pragmáticos Pragmatic Ajax.
Verá cómo funciona el corte y el recorte de imágenes bajo las cubiertas. Y el zoom.
¡se oculta bajo las sábanas! Siempre pensé que eran duendes dentro del monitor que movían las imágenes cuando arrastras ... – Coxy
Google Maps utiliza imágenes divididas en bloques que se cargan dinámicamente a medida que el usuario avanza en diferentes direcciones. El Google Maps Image Cutter que menciona Paul Dixon es la herramienta que desea para esto.
Si solo desea formar una imagen grande, en lugar de tener la complejidad adicional de dividir la imagen en bloques, en lugar de usar la propiedad de desbordamiento CSS, debe usar la propiedad clip. Esto es compatible con todos los navegadores que vale la pena pensar, hasta IE4 si no recuerdo mal.
Un punto a tener en cuenta: la especificación CSS2.1 muestra ejemplos con los valores rect separados por comas. Sin embargo, esto no es compatible con IE6 (quizás tampoco con IE7). Sin embargo, todos los demás navegadores entienden la versión sin comas. Así que en lugar de
clip: rect(5px, 40px, 45px, 5px);
se debe utilizar
clip: rect(5px 40px 45px 5px);
para la compatibilidad.
Se necesita un contenedor div < > conjunto a la posición: relativa alrededor del elemento img > <, que luego se ajusta a la posición: absoluta.
Así que la técnica básica es actualizar los valores superiores e izquierdos mientras el usuario arrastra, utilícelos junto con el ancho y alto definidos de la vista en la imagen para crear la cadena rect() adecuada y actualice la parte superior. izquierda, y propiedades de clip de la propiedad de estilo del elemento <img>.
No haga lo que hice y omita el "px" después de los valores en la cadena rect(). Me llevó años darme cuenta de por qué no estaba funcionando :-)
(Estoy muy tarde a este partido ahora muerto, pero bueno, he encontrado esta página a través de una búsqueda así que ...)
ScrollView complemento sugerido por mooware no funcionó para mí.
Sin embargo Dragscrollable hicieron: http://plugins.jquery.com/project/Dragscrollable
gracias, eso es exactamente lo que necesitaba, lo he tenido en cuenta para el futuro – sydlawrence