Herramientas de Jquery Overlay CSS Conflicto, la Imagen se coloca debajo de la superposición de

Question

Primero he aquí lo estoy usando y tratando de hacer:

la configuración mínima para este efecto:flowplayer.org/tools/demos/overlay/index.html

a continuación, el Apple Leopard vista previa de Efecto:flowplayer.org/tools/demos/overlay/apple.html

Ahora aquí está la página que estoy teniendo el problema con http://gentle-mist-64.heroku.com/pictures

Mi Problema:cuando hago clic en una imagen la imagen se muestra en la plantilla y en el lado derecho,

Esto tiene que ser un conflicto entre mi posicionamiento CSS para el plugin posicionamiento.

cuando yo intente esto en una página en blanco sin ningún diseño, funciona muy bien.

mi diseño css:

body {
  background: url('/images/background.jpg');
}

#image_stage {
  position: relative;
  top: 30px;
  margin: auto;
  margin-top: 75px;
  background-color: white;
  width: 900px;
  height: 520px;
}

#image_inside_stage {
  float: left;
  margin-top: 7px;
  margin-left: 27px;
}

#logo {
  position: absolute;
  left: 725px;
  top: 4px;
}

#see_through_box {
  position: absolute;
  background-color: black;
  opacity: 0.66;
  -moz-opacity: 0.66;
  filter:alpha(opacity=66);
  width: 665px;
  height: 432px;
  margin: 45px;
  z-index: 99;

  -moz-border-radius-topleft: 15px;
  -moz-border-radius-topright: 0;
  -moz-border-radius-bottomleft: 0;
  -moz-border-radius-bottomright: 15px;

  -webkit-border-top-left-radius: 15px;
  -webkit-border-top-right-radius: 0;
  -webkit-border-bottom-left-radius: 0;
  -webkit-border-bottom-right-radius: 15px;
}

.inner_content {
  position: absolute;
  top: 75px;
  left: 75px;
  z-index: 99;
  color: whitesmoke;
}

Alguien por favor ayuda.Quiero que este plugin funcione.Esto es mucho mejor que una caja de luz plugin.He utilizado el plugin a través de toda mi sitio web y desea seguir utilizando.

Agradezco cualquier aporte, gracias.Ami

Answer 1

Descubrí que por completo para la herramienta jquery, es muy importante NO colocar el elemento jquery tools en un elemento padre que esté posicionado de manera absoluta.

simplemente puede poner la ventana, desplazable, o cualquier cosa fuera del padre absoluto.

mejor posición con flotadores donde puedas.

Answer 2

Podría intentar mover photo0 y photo1 para no estar dentro de sus otros divs, pero en lugar de eso así que no van a ser afectados por cualquier padre/madre / los estilos heredados?tal vez hacia abajo justo antes de la clausura </body> etiqueta?

Buena suerte!

Answer 3

¡Gracias por esa pista! Tuve un problema similar y finalmente descubrí que jquery tools estaba escribiendo la imagen superpuesta en la parte inferior del cuerpo, lo que significaba que estaba obteniendo un estilo ligeramente diferente al div, que se estaba creando en un lugar diferente. Mirando el javascript que coloca la imagen allí, hice lo mismo con mi superposición div

$('body').append($('#mortgage_card'));

Answer 4

Si desea mantener sus elementos posicionados, en realidad puede resolverlo moviendo el elemento de superposición, como lo sugiere Funka. Vea esta respuesta:

jquery superpone un posicionamiento incorrecto