outils Jquery Overlay CSS Conflit, Image placé sous le revêtement

Question

Tout d'abord, voici ce que je suis en utilisant et en essayant de le faire:

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

puis l'aperçu Leopard d'Apple Effect: flowplayer.org/tools/demos/overlay/apple.html

maintenant, voici la page que je vais avoir le problème avec http://gentle-mist-64.heroku.com/pictures

Mon numéro: lorsque je clique sur une image que l'image montre sous la superposition et sur le côté droit,

Cela doit être un conflit entre mon positionnement CSS et le positionnement du plugin. Lorsque j'essaie ceci sur une page blanche sans mise en page, cela fonctionne très bien.

ma mise en page 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; 
} 

Toute personne s'il vous plaît aider. Je veux que ce plugin fonctionne. C'est tellement mieux que juste un plugin de boîte à lumière. J'ai utilisé le plugin sur l'ensemble de mon site et j'aimerais continuer à l'utiliser.

J'apprécie toute contribution, merci. Ami

Answer 1

J'ai découvert que tout pour l'outil jquery, il est très important de ne pas placer l'élément d'outils jquery dans un élément parent c'est absolument positionné.

vous pouvez simplement mettre la fenêtre, scrollable, ou quel que soit le côté du parent absolu.

meilleure position avec des flotteurs que vous pouvez.

Answer 2

Pourriez-vous essayer de déplacer photo0 et photo1 de ne pas être dans vos autres divs, mais ils ne vont pas être affectés par les parents/styles hérités? peut-être en baisse juste avant la fermeture </body> tag?

Bonne chance!

Answer 3

Merci pour cet indice! J'ai eu un problème similaire et j'ai fini par trouver que les outils de jquery étaient en train d'écrire l'image superposée au bas du corps, ce qui signifiait qu'il obtenait un style légèrement différent de celui du div, qui était créé à un endroit différent. En regardant le javascript qui place l'image là-bas, je l'ai fait la même chose avec ma superposition div

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

Answer 4

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

jquery overlay wrong positioning