$(document).ready(function(){ // add a click event $(".lightbox").click(function(){ overlayLink = $(this).attr("href"); window.startOverlay(overlayLink); return false; }); $(".close").click(function(){ $(".container, .overlay").animate({"opacity":"0"}, 200, "linear", function(){ $(".container, .overlay").remove(); }); }); });
function startOverlay(overlayLink) { //add the elements to the dom $("body") .append('
') .css({"overflow-y":"hidden"});
//animate the semitransparant layer $(".overlay").animate({"opacity":"0.6"}, 400, "linear");
//add the lightbox image to the DOM $(".container").html('
Your browser does not support iframes.
');
//position it correctly after downloading $(".container iframe").load(function() { var imgWidth = $(".container iframe").width(); var imgHeight = $(".container iframe").height(); $(".container") .css({ "top": "50%", "left": "50%", "width": imgWidth, "height": imgHeight, "margin-top": -(imgHeight/2), "margin-left":-(imgWidth/2) //to position it in the middle
}) .animate({"opacity":"1"}, 400, "linear");
// you need to initiate the removeoverlay function here, otherwise it will not execute. window.removeOverlay(); }); } function removeOverlay() { // allow users to be able to close the lightbox $(".overlay").click(function(){ $(".container, .overlay").animate({"opacity":"0"}, 200, "linear", function(){ $ (".container, .overlay").remove(); }); }); } document.write("This is a test only")