2011-11-03 21 views
8

JQzoom ventana de zoom Cuando utilizo el plugin JQZoom Tengo un montón de imágenes en una cuadrícula 960.gs ....debajo de la columna siguiente imagen

He aquí un ejemplo: http://madlov.com/vintage-sunglasses

(Nota: en el enlace de arriba im usando 'innerzoom', pero si tuviera que usar la vista estándar, la ventana ampliada aparece detrás de la imagen en lugar de en la parte superior)

He inspeccionado el div ZoomWindow y tiene un

z-index: 5001

pero eso no parece ayudar.

¿Por qué mis imágenes ampliadas aparecen detrás de otras imágenes

+2

tiene una referencia en 'http: // tjkdesign.com/articles/z-index/teach_yourself_how_elements_stack.asp', aprenda más' position' y 'z-index'. –

+1

Gracias por ese consejo ... es def. un problema de apilamiento con índice Z y posición ... Necesito modificar JQzoom javascript de alguna manera para hacer que los elementos se acumulen correctamente, no estoy seguro de cómo hacerlo. – hagope

+1

no estoy seguro de si esto es lo que quiere o no 'http: // i42.tinypic.com/6nt7c2.jpg' al pasar la imagen, el zoom de la imagen de escape y salir de todos los divs, delante de la parte superior de la pantalla. pero son demasiado grandes, saldrán del ancho y la altura de la pantalla. – Giberno

Respuesta

3

Es definitivamente un problema de apilamiento. Aquí hay algunos detalles más sobre cómo funciona el contexto de apilamiento: https://developer.mozilla.org/en/Understanding_CSS_z-index/The_stacking_context

He creado un violín también en http://jsfiddle.net/aAMH2/1/ que puede ayudar.

Tenga en cuenta las etiquetas de estilo en la parte inferior del HTML: este estilo anula el problema de apilamiento especificado en el CSS. Si usted está teniendo problemas para modificar el Javascript, o si desea una solución rápida, esto puede hacerlo (Sólo cambia el nombre de la clase a

Otra opción sería la de ejecutar algunos jQuery después de que la página se ha cargado:.

$(document).ready(function() { 
$('.zoomPad').css('z-index','auto'); 
}); 

esperanza esto ayuda

2

En su archivo css aplicación que parece estar en caché o algo, intente establecer el valor .zoompad z-index para automóviles o deshacerse del índice z por completo. Y si estás tratando de que las imágenes ampliadas aparezcan sobre todo, establezca la propiedad de desbordamiento de .zoomWrapperImage en visible o elimine el desbordamiento: oculto

Cuestiones relacionadas