(function($){ $.fn.extend({ photoModalPanel: function(photoSrc, photoTitle, photoLink) { //Create our overlay object var photoOverlay = $("
"); //Create our modal window var photoModalWindow = $(""); //function showPhotoOverlay() { return this.each(function() { if (typeof document.body.style.maxHeight === "undefined") { //if IE 6 $("body","html").css({height: "100%", width: "100%"}); $("html").css("overflow","hidden"); } //Append the overlay to the document body $("body").append(photoOverlay.click(function() { photoModalHide(); })) //Add a loader to our page $("body").append(""); //Set the css and fade in our overlay photoOverlay.css("opacity", 0.8); photoOverlay.fadeIn(150); //Load the image var img = new Image(); $(img).load(function () { var imageWidth = img.width / 2 ; var imageHeight = img.height / 2; photoModalWindow.css({ "margin-left": -imageWidth, "margin-top": -imageHeight }); $("#photo-modal-load").remove(); photoModalWindow.append(img); $(this).addClass("modal-image"); photoModalWindow.append(""); $("body").append(photoModalWindow); photoModalWindow.fadeIn(150); }) .attr({ src: photoSrc }).click(function() { photoModalHide(); }); }); //Our function for hiding the modalbox function photoModalHide() { var remove = function() { $(this).remove(); }; photoOverlay.fadeOut(remove); photoModalWindow .fadeOut(remove) .empty(); } } }); })(jQuery);