Estoy desarrollando una especie de galería fotográfica. La tengo prácticamente terminada pero me falta un último detalle que no logro resolver...
En una de las secciones de la galería, las fotos que se muestran son skylines, unas panorámicas muy anchas. He usado jQuery para que cuando un usuario haga click en la imagen del skyline en miniatura, esta se amplíe en el centro de la pantalla, el fondo se oscurezca y el usuario pueda arrastrarla horizontalmente para navegar por ella.
El detalle que me falta es bien simple de explicar pero no sé por donde empezara programarlo...
Lo que quiero conseguir es que cuando la imagen se acerque a los del contenido esta no pueda moverse más. De la manera que lo tengo programado, uno puede esconder la imagen en los laterales.
Yo deseo que cuando uno de los limites traspase el contenido, esta no pueda arrastrarse más... no sé si me explico.
Os dejo una imagen para ilustrarlo:
Este es el punto en el que quiero que pare de arrastrarse si el movimiento es desde la derecha hasta la izquierda. Y completamente inverso si se arrastra hacia el otro lado.
Aquí tenéis el link donde podéis ver el código fuente sin problema: http://bit.ly/dbXR7A
El script que se encarga del zoom es zoomimage.js. Y la galería donde se aplica es BARCELONA SKYLINES.
Gracias!
