首先,这是我正在使用和尝试做的事情:
此效果的最小设置: flowplayer.org/tools/demos/overlay/index.html
然后是Apple Leopard预览效果: flowplayer.org/tools/demos/overlay/apple.html现在这是我遇到问题的页面 http://gentle-mist-64.heroku.com/pictures
我的问题: 当我点击图像时,图片显示在叠加层和右侧,
这必须是我的CSS定位与插件定位之间的冲突。
当我在没有布局的空白页面上尝试此操作时,它可以正常工作。
我的布局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;
}
任何人都请帮忙。我想要这个插件工作。这比仅仅一个灯箱插件好得多。我在整个网站上使用过这个插件,并希望继续使用它。
感谢任何意见,谢谢。 阿美
答案 0 :(得分:0)
您是否可以尝试将photo0
和photo1
移动到不在其他div中,但是它们不会受到任何父/继承样式的影响?也许在结束</body>
标签之前下来?
答案 1 :(得分:0)
感谢您的线索!我有一个类似的问题,并最终发现jquery工具正在底部写出叠加图像,这意味着它的样式与div相比略有不同,div正在不同的位置创建。看看将图像放在那里的javascript,我用叠加div做了同样的事情
$('body').append($('#mortgage_card'));
答案 2 :(得分:0)
我完全发现jquery工具,非常重要的是不要将jquery工具元素放在绝对定位的父元素中。
你可以简单地把窗口,可滚动或任何一边放在绝对父母身边。
你最好能用漂浮物定位。
答案 3 :(得分:0)
如果你想保持你的元素定位,你可以通过移动覆盖元素来实际解决它,如Funka所建议的那样。看到这个答案: