Outils Jquery superposent les conflits CSS, Image placée sous la superposition

Question

D'abord, voici ce que j'utilise et que j'essaie de faire:

la configuration minimale pour cet effet: flowplayer.org/tools/demos/overlay/index.html

puis l'effet de prévisualisation Apple Leopard: flowplayer.org/tools/demos/overlay/apple.html

Maintenant, voici la page qui me pose problème http://gentle-mist-64.heroku.com/pictures

Mon problème: lorsque je clique sur une image, la photo apparaît sous la superposition et sur le côté droit,

Cela doit être un conflit entre mon positionnement CSS et le positionnement du plugin.

quand j'essaie ceci sur une page vierge sans mise en page, cela fonctionne très bien.

mon layout 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;
}

Quelqu'un s'il vous plaît aidez-nous. Je veux que ce plugin fonctionne. C'est tellement mieux qu'un simple plugin light box. J'ai utilisé le plugin sur l'ensemble de mon site Web et j'aimerais continuer à l'utiliser.

J'apprécie toute contribution, merci. Ami

Answer 1

J'ai découvert que, pour jquery tool, il est très important de NE PAS placer l'élément jquery tools dans un élément parent absolument positionné.

vous pouvez simplement mettre la fenêtre en défilement, ou ce que vous voulez en dehors du parent absolu.

Il est préférable de positionner avec des flotteurs où vous le pouvez.

Answer 2

Pourriez-vous essayer de déplacer photo0 et photo1 pour ne pas figurer dans vos autres divisions, mais plutôt pour qu'elles ne soient pas affectées par un style parent / hérité? peut-être en panne juste avant la balise de fermeture </body>?

Bonne chance!

Answer 3

Merci pour cet indice! J'avais un problème similaire et j'ai finalement trouvé que jquery tools écrivait l'image de superposition au bas du corps, ce qui signifiait que son style était légèrement différent de celui de la div, créée à un autre endroit. En regardant le javascript qui place l’image là-bas, j’ai fait la même chose avec ma superposition div

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

Answer 4

Si vous souhaitez conserver vos éléments en position, vous pouvez le résoudre en déplaçant l'élément de superposition, comme suggéré par Funka. Voir cette réponse:

jquery superpose un mauvais positionnement