First, let me explain what I am currently using and attempting to achieve:
I started with the basic setup for this effect found at flowplayer.org/tools/demos/overlay/index.html
Then, I implemented the Apple Leopard Preview Effect from flowplayer.org/tools/demos/overlay/apple.html
However, I am encountering an issue on the following page:
The Problem: When I click on an image, it appears under the overlay and to the right side.
This seems to be a conflict between my CSS positioning and the plugin's positioning.
Interestingly, when I test this on a blank page without any layout, it functions properly.
Here is a snippet of my 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;
}
I would greatly appreciate any assistance. I really want this plugin to function correctly as it offers many advantages over a traditional lightbox plugin. It is already integrated throughout my website, and I would like to continue using it.
Thank you in advance for your help. Sincerely, Ami