#lightbox{
background-color:#eee;
padding: 10px;
border-bottom: 2px solid #666;
border-right: 2px solid #666;
}
#lightboxDetails{
font-size: 0.8em;
padding-top: 0.4em;
}
#lightboxCaption{ float: left; }
#keyboardMsg{ float: right; }
#closeButton{ top: 5px; right: 5px; }
#lightbox img{ border: none; clear: both;}
#overlay img{ border: none; }
#overlay{ background-image: url(overlay.png); }
* html #overlay{
background-color: #333;
back\ground-color: transparent;
background-image: url(overlay.png);
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="overlay.png", sizingMethod="scale");
}
/*How to Use:
Include lightbox.js in your header.
Add rel="lightbox" attribute to any link tag to activate the lightbox. For example: image #1
Optional: Use the title attribute if you want to show a caption.
It doesn't work at all. The image opens up in a new window.
This is commonly caused by a conflict between JS scripts. Check your body tag and look for an onload attribute. Example:
A quick fix to this problem is to append the initLightbox() to the onload attribute as so:
The shadow overlay doesn't show up in IE.
Find the filter: progid:DXI… line that you added to your stylesheet.
There is a reference to the overlay.png in this line. Make sure that it is set relative to the current webpage, not relative to the CSS file. /*