So I have a webpage that I'm working on and am having a problem with a "lightbox" effect showing a picture gallery overlayed on top of the site after clicking on the image representing that gallery.
http://themeanseasonband.com/media
It works as intended in all the browsers on my Mac computer (Safari, Chrome and Firefox) and another Mac that I tested it on. But for some reason, on any Windows computer in the same browsers (also in IE 8 and 9), the videos at the bottom of the screen sit on top of the lightbox.
I've experimented with z-index and included in the embedded video object:
<param name="wmode" value="opaque" />
which I've seen suggested other times to correct z-index issues with embedded video, but it does not work.
I'm not sure what I am missing here and and why it's working on Mac, but not Windows.
Below is some of the relevant code. The link above goes to that specific page so you can see it. Sorry, I tried to keep this as short as possible.
HTML
<div id="med_photos">
<h4 class="col_header">Photo Albums</h4>
<ul>
<li>
<img src="img/photo/dec_07_11_blackcat.jpg" alt="Photos" />
<div class="image_title">
<h5 class="img_title">12/7/2011 @ Black Cat</h5>
</div>
</li>
</ul>
</div>
<div id="med_videos">
<h4 class="col_header">Videos</h4>
<object class="video" width="300" height="169">
<param name="movie" value="http://www.youtube.com/v/TCN1vYMfEls?hl=en_US&version=3" />
<param name="allowFullScreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="wmode" value="opaque" />
<embed src="http://www.youtube.com/v/TCN1vYMfEls?hl=en_US&version=3" type="application/x-shockwave-flash" width="300" height="169" allowscriptaccess="always" allowfullscreen="true"></embed>
</object>
</div>
CSS
#med_photos {
width: 1000px;
margin: 0 0 20px 0;
padding: 0;
overflow: hidden;
border-top: 1px solid #fff;
}
#med_videos {
width: 1000px;
margin: 0 0 20px 0;
padding: 0;
border-top: 1px solid #fff;
overflow: hidden;
}
#med_photos ul {
overflow: hidden;
}
#med_photos ul li {
float: left;
list-style-type: none;
position: relative;
cursor: pointer;
display: inline;
padding: 10px;
margin: 0 25px 25px 0;
}
/*Lightbox*/
.lb_backdrop {
background: rgba(0, 0, 0, 0.9);
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
}
.lb_dimmer {
background: rgba(50, 50, 50, 0.7);
position: fixed;
top: 0; left: 0; bottom: 0; right: 0;/*Will be centered later by Jquery*/
}
.lb_canvas {
background: rgba(0, 0, 0, 0.9);
width: 50px; height: 50px;
position: fixed;
top: 0; left: 0; /*Will be centered later by Jquery*/
box-shadow: 0 0 20px 5px black;
z-index: 1;
padding: 25px;
}
/*Lightbox Controls*/
.lb_controls {
width: 400px;
background: rgba(0, 0, 0, 0.75);
position: fixed;
bottom: 10px;
color: #fff;
z-index: 5;
left: 0; right: 0; margin: 0 auto;
}
.lb_credit {
width: 280px;
background: rgba(0, 0, 0, 0.75);
position: fixed;
bottom: 50px;
color: #fff;
z-index: 5;
left: 0; right: 0; margin: 0 auto;
}
.lb_credit span {
line-height: 20px;
height: 20px;
}
.lb_controls span {
line-height: 30px;
height: 30px;
}
.lb_controls span.inactive {
opacity: 0.25;
}
.lb_previous, .lb_next {
position: absolute;
top: 0;
padding: 5px 12px;
font-family: websymbols;
font-size: 14px;
background: black;
cursor: pointer;
z-index: 5;
}
.lb_previous {
left: 0;
border-right: 1px solid rgba(255, 255, 255, 0.1);
}
.lb_next {
right: 0;
border-left: 1px solid rgba(255, 255, 255, 0.1);
}
.lb_title {
text-align: center;
display: block;
font-size: 14px;
text-transform: uppercase;
padding: 5px 0;
font-weight: bold;
}
Javascript portion that loads the lightbox
function loadphoto(photonum)
{
if(lb_loading) return false;
lb_loading= true;
//The large image
large_img = new Image();
//Use data-large or the src itself if large image url is not available
large_img.src = (gallery_dir+photonum+'.jpg');
//Adding additional HTML - only if it hasn't been added before
if($(".lb_backdrop").length < 1)
{
var lb_backdrop = '<div class="lb_backdrop"></div>';
var lb_dimmer = '<div class="lb_dimmer"></div>';
var lb_canvas = '<div class="lb_canvas"></div>';
var lb_previous = '<span class="lb_previous"><</span>';
var lb_title = '<span class="lb_title"></span>';
var lb_next = '<span class="lb_next">></span>';
var lb_controls = '<div class="lb_controls">'+lb_previous+lb_title+lb_next+'</div>';
var total_html = lb_backdrop+lb_dimmer+lb_canvas+lb_controls;
$(total_html).appendTo("body");
}
//Fade in lightbox elements if they are hidden due to a previous exit
if($(".lb_backdrop:visible").length == 0)
{
$(".lb_backdrop, .lb_dimmer, .lb_canvas, .lb_controls, .lb_credit").fadeIn("slow");
}
//Display preloader till the large image loads and make the previous image translucent so that the loader in the BG is visible
if(!large_img.complete)
$(".lb_canvas").addClass("loading").children().css("opacity", "0.5")
//Disabling left/right controls on first/last items
if(currPhoto == 1)
$(".lb_previous").addClass("inactive");
else
$(".lb_previous").removeClass("inactive");
if(currPhoto == gallery_size)
$(".lb_next").addClass("inactive");
else
$(".lb_next").removeClass("inactive");
//Centering .lb_canvas
CW = $(".lb_canvas").outerWidth();
CH = $(".lb_canvas").outerHeight();
//top and left coordinates
CL = ($(window).width() - CW)/2;
CT = ($(window).height() - CH)/2;
$(".lb_canvas").css({top: CT, left: CL});
//Inserting the large image into .lb_canvas once it's loaded
$(large_img).load(function(){
//Recentering .lb_canvas with new dimensions
CW = large_img.width;
CH = large_img.height;
//.lb_canvas padding to be added to image width/height to get the total dimensions
hpadding = parseInt($(".lb_canvas").css("paddingLeft")) + parseInt($(".lb_canvas").css("paddingRight"));
vpadding = parseInt($(".lb_canvas").css("paddingTop")) + parseInt($(".lb_canvas").css("paddingBottom"));
CL = ($(window).width() - CW - hpadding)/2;
CT = ($(window).height() - CH - vpadding)/2;
//Animating .lb_canvas to new dimentions and position
$(".lb_canvas").html("").animate({width: CW, height: CH, top: CT, left: CL}, 500, function(){
//Inserting the image but keeping it hidden
imgtag = '<img src="'+large_img.src+'" style="opacity: 0;" />';
$(".lb_canvas").html(imgtag);
$(".lb_canvas img").fadeTo("slow", 1);
//Displaying the image title
title = gallery_title+" - "+currPhoto+" of "+gallery_size
$(".lb_title").html(title);
lb_loading= false;
$(".lb_canvas").removeClass("loading");
})
})
}
