/***********************************************************************************************	jModal - written by Eric Rolnicki*		- lightbox style modal box for displaying various content**	useage:	$("#listOfContentLinks").jModal*	*	dependencies: jquery-latest.js(currently 1.4.2)***	10/26/2010 - v. 1.0.1***********************************************************************************************/(function ($) { $.fn.jModal = function (options) { var opts = $.extend({}, $.fn.jModal.defaults, options); var slides = $(this).find("a"); var $overlay = $("<div id=\"overlay\"></div>").css({ "position": "absolute", "top": "0px", "left": "0px", "width": $(document).width() + "px", "height": $(document).height() + "px", "padding": "0", "margin": "0", "z-index": opts.zIndex }).hide(); $("body").append($overlay); var $centeringHack = $("<div style=\"position:absolute;width:100%;text-align:center;top:20%;\"></div>"); var $modalContainer = $("<div id=\"modalContainer\"></div>"); var $modal = $("<div id=\"" + opts.modalId + "\"></div>").hide(); $modal.css({ 'position': 'relative', 'z-index': opts.zIndex + 15 }); $centeringHack.html($modalContainer); $modalContainer.append($modal); var $leftArea = $("<div id=\"leftArea\"></div>"); var $rightArea = $("<div id=\"rightArea\"></div>"); var $exitButton = $("<div id=\"exitButton\">" + opts.exitButton + "</div>"); var $leftButton = $(opts.leftButton).hide(); var $rightButton = $(opts.rightButton).hide(); $("body").append($centeringHack); $(slides).click(function (e) { e.preventDefault(); changeImage($(slides).index($(this))); }); var closeModal = function () { $modalContainer.hide(); $overlay.hide(); }; var updateRegions = function (pos) { $leftButton.unbind(); $rightButton.unbind(); $leftArea.unbind(); $rightArea.unbind(); if (pos > 0) { $modalContainer.append($leftButton); $leftButton.css({ 'position': 'absolute', 'z-index': opts.zIndex + 30, 'top': $modal.position().top + ($modal.height() / 2) + 'px', 'left': ($modal.position().left - 10) + 'px' }); $modalContainer.append($leftArea); $leftArea.css({ 'position': 'absolute', 'z-index': opts.zIndex + 25, 'top': $modal.position().top + 'px', 'left': $modal.position().left + 'px', 'width': ($modal.innerWidth() / 2) + 'px', 'height': $modal.innerHeight() + 'px' }); $leftArea.show(); $leftButton.show(); $leftArea.hover(opts.leftHoverIn, opts.leftHoverOut); $leftArea.click(function () { changeImage(pos - 1); }); $leftButton.hover(opts.leftHoverIn, opts.leftHoverOut); $leftButton.click(function () { changeImage(pos - 1); }); } if (pos < slides.length - 1) { $rightArea.css({ 'position': 'absolute', 'z-index': opts.zIndex + 25, 'top': $modal.position().top + 'px', 'left': ($modal.position().left + ($modal.innerWidth() / 2)) + 'px', 'width': ($modal.innerWidth() / 2) + 'px', 'height': $modal.innerHeight() + 'px' }); $rightButton.css({ 'position': 'absolute', 'z-index': opts.zIndex + 30, 'top': $modal.position().top + ($modal.height() / 2) + 'px', 'left': ($modal.position().left + $modal.innerWidth() - 10) + 'px' }); $modalContainer.append($rightButton); $modalContainer.append($rightArea); $rightArea.show(); $rightButton.show(); $rightArea.hover(opts.rightHoverIn, opts.rightHoverOut); $rightArea.click(function () { changeImage(pos + 1); }); $rightButton.hover(opts.rightHoverIn, opts.rightHoverOut); $rightButton.click(function () { changeImage(pos + 1); }); } $exitButton.css({ 'position': 'absolute', 'z-index': opts.zIndex + 30, 'top': ($modal.position().top - 15) + 'px', 'left': ($modal.position().left + ($modal.innerWidth() - 10)) + 'px' }); $modalContainer.append($exitButton); $exitButton.show(); $exitButton.click(function () { closeModal(); }); $($overlay).click(function (evt) { if ($(evt.target).closest("div#modalContainer").length == 0) closeModal(); }); $($centeringHack).click(function (evt) { if ($(evt.target).closest("div#modalContainer").length == 0) closeModal(); }); $(window).keydown(function (event) { if (event.keyCode == '27') { closeModal(); } }); $modal.show(); }; var changeImage = function (pos) { var url = $(slides[pos]).children("a").attr("href"); if (url == undefined) url = $(slides[pos]).closest("a").attr("href"); if (url) { $overlay.css({ "width": $(document).width() + "px", "height": $(document).height() + "px" }).show(); $modalContainer.show(); $rightButton.hide(); $leftButton.hide(); $exitButton.hide(); $leftArea.hide(); $rightArea.hide(); $modal.html(""); $modal.removeClass('modalbg'); $modal.addClass('loading'); var payload = ""; var off = url.indexOf(" "); if (off >= 0) { payload = url.slice(off, url.length); url = url.slice(0, off); } var isImage = false; var per = url.lastIndexOf("."); if (per >= 0) { var file = url.slice(per + 1, url.length); var lookup = "|jpg|png|gif|jpeg|"; isImage = (lookup.indexOf(file) > 0); } if (isImage) { var img = new Image(); var w; var h; $(img).css({ 'position': 'relative', 'z-index': opts.zIndex + 20 }); $(img).load(function () { w = img.width; h = img.height; var ratio = w / h; w = (w > opts.maxWidth) ? opts.maxWidth : w; h = w / ratio; $(img).css({ 'width': w + 'px', 'height': h + 'px' }); $modalContainer.css({ 'width': w + 'px', 'height': h + 'px', 'margin': '0 auto' }); $modal.animate({ width: w, height: h }, 600, function () { $modal.html(img); $modal.children("img:first").css({ 'float': 'right' }); $modal.children("img:first").fadeIn(700, function () { $modal.addClass('modalbg'); $modal.removeClass('loading'); updateRegions(pos); }); }); }).attr("src", url); var src = img.src; img.src = ""; img.src = src; } else { var $temp = $("<div></div>"); $.ajax({ url: url, success: function (html) { var $data = $("<div>" + html.replace(/<script(.|\s)*?\/script>/gi, "") + "</div>"); $($temp).html(payload ? $(payload, $data).html() : $data); }, complete: function (XMLHttpRequest, textStatus) { var newWidth = opts.contentWidth; var newHeight = opts.contentHeight; $($modal).animate({ width: newWidth, height: newHeight }, 600, function () { $temp.hide(); $modal.html($temp); $modal.children("div:first").fadeIn(700, function () { $modal.removeClass('loading'); updateRegions(pos); }); }); } }); } } }; }; $.fn.jModal.defaults = { modalId: "jModal", maxWidth: 500, zIndex: 1000, leftButton: "<div id=\"leftButton\"><</div>", rightButton: "<div id=\"rightButton\">></div>", exitButton: "X", contentWidth: "500px", contentHeight: "300px", leftHoverIn: function () { $("#leftButton").css({ 'background': '#f00', 'color': '#fff' }); }, leftHoverOut: function () { $("#leftButton").css({ 'background': '#fff', 'color': '#f00' }); }, rightHoverIn: function () { $("#rightButton").css({ 'background': '#f00', 'color': '#fff' }); }, rightHoverOut: function () { $("#rightButton").css({ 'background': '#fff', 'color': '#f00' }); } }; })(jQuery);