(function($) { jQuery.fn.mbMaskGallery = function(options) { return this.each(function() { var galleryId = !this.id ? "maskGallery" + Math.floor(Math.random() * 1000) : this.id; var thisGallery = this; this.options = { galleryMask: "mask/monitor.png", galleryLoader: "loader/loader.gif", galleryColor: "white", type: "normal", fadeTime: 500, loader: true, loaderOpacity: 0.3, changeOnClick: false, navId: "", nextPath: "", prevPath: "", slideTimer: 2000 }; $.extend(this.options, options); var loader = "<table id='loader' cellpadding='0' cellspacing='0' width='100%' height='100%'><tr><td valign='middle' align='center'><img src='" + this.options.galleryLoader + "' alt='loading' style='padding-right:50;padding-bottom:90'></td></tr></table>"; var images = $(this).find("img"); $(thisGallery).empty(); var idx = (this.options.type == "random") ? Math.floor(Math.random() * $(images).size()) : 0; $(thisGallery).mouseover(function() { $(this).css({ cursor: $(images[idx]).attr("url") ? "pointer" : "default" }) }); $(thisGallery).append("<div class='container'></div>"); var galleryContainer = $(this).find(".container"); if (thisGallery.options.loader) { $(galleryContainer).append(loader); var galleryloader = $(thisGallery).find("#loader"); $(galleryloader).css({ position: "absolute", top: 0, left: 0 }); if (!$.browser.msie) { $(galleryloader).css({ opacity: thisGallery.options.loaderOpacity }) } } $(galleryContainer).append("<image class='galleryImage' src=''>"); var galleryImage = $(thisGallery).find(".galleryImage"); $(galleryContainer).append("<image class='galleryMask' src='" + this.options.galleryMask + "'>"); var galleryMask = $(thisGallery).find(".galleryMask"); if ($.metadata) { $.metadata.setType("class") } $(galleryMask).click(function() { if ($.metadata) { $.metadata.setType("class"); if ($(images[idx]).metadata().url) { $(images[idx]).attr("url", $(images[idx]).metadata().url) } if ($(images[idx]).metadata().script) { $(images[idx]).attr("script", $(images[idx]).metadata().script) } } if ($(images[idx]).attr("url")) { self.location.href = $(images[idx]).attr("url") } if ($(images[idx]).attr("script")) { eval($(images[idx]).attr("script")) } }); $(galleryContainer).css({ position: "relative", overflow: "hidden", opacity: 0 }); $(galleryImage).css({ position: "absolute", top: 0, left: 0, opacity: 0 }); $(galleryMask).css({ position: "absolute", top: 0, left: 0 }); var changePhoto = function(u) { $(galleryImage).fadeTo(thisGallery.options.fadeTime, 0, function() { $(galleryImage).attr("src", u); setTimeout(function() { $(galleryImage).fadeTo(thisGallery.options.fadeTime, 1) }, (thisGallery.options.fadeTime / 2)) }) }; function preloadImg(u) { var o = new Image(); o.onload = function() { changePhoto(u) }; o.src = u + "?rnd=" + Math.floor(Math.random() * 1000) } function startGallery() { setTimeout(function() { preloadImg($(images[idx]).attr("src")); $(galleryContainer).fadeTo(thisGallery.options.fadeTime, 1); if (!thisGallery.options.changeOnClick) { if ($(images).size() > 1) { setInterval(function() { var rnd = Math.floor(Math.random() * $(images).size()); idx = (thisGallery.options.type == "random") ? rnd : ((idx >= $(images).size() - 1) ? 0 : idx + 1); preloadImg($(images[idx]).attr("src")) }, thisGallery.options.slideTimer) } else { preloadImg($(images[0]).attr("src")) } } else { if ($(images).size() > 1) { var cont = thisGallery.options.navId != "" ? $("#" + thisGallery.options.navId) : ""; if (thisGallery.options.changeOnClick && thisGallery.options.navId == "") { $(thisGallery).append("<div class='cont'></div>"); cont = $(thisGallery).find(".cont"); cont.css({ position: "relative", zIndex: 10000, bottom: 0, textAlign: "center", cursor: "pointer" }).html("<img class='prev' src='" + thisGallery.options.prevPath + "' alt='prev'>&nbsp;<img class='next' src='" + thisGallery.options.nextPath + "' alt='next'>") } if (thisGallery.options.navId != "") { cont.css({ width: $(galleryMask).width(), cursor: "pointer" }) } var next = cont.find(".next"); next.click(function() { var rnd = Math.floor(Math.random() * $(images).size()); idx = (thisGallery.options.type == "random") ? rnd : ((idx >= $(images).size() - 1) ? 0 : idx + 1); preloadImg($(images[idx]).attr("src")) }); var prev = cont.find(".prev"); prev.click(function() { var rnd = Math.floor(Math.random() * $(images).size()); idx = (thisGallery.options.type == "random") ? rnd : (idx < 1 ? $(images).size() - 1 : idx - 1); preloadImg($(images[idx]).attr("src")) }) } } if ($.browser.msie && ($.browser.version.indexOf("6") > -1)) { correctPNG() } }, 200) } function loadMask(u) { var o = new Image(); o.onload = function() { var w = thisGallery.options.galleryWidth ? thisGallery.options.galleryWidth : $(galleryMask).width(); var h = thisGallery.options.galleryHeight ? thisGallery.options.galleryHeight : $(galleryMask).height(); $(thisGallery).css({ width: w, height: h }); $(galleryContainer).css({ width: w, height: h }); startGallery() }; o.onerror = function() { }; o.src = u + "?rnd=" + Math.floor(Math.random() * 1000) } function correctPNG() { for (var i = 0; i < document.images.length; i++) { var img = document.images[i]; var imgName = img.src.toUpperCase(); if (imgName.substring(imgName.length - 3, imgName.length) == "PNG") { var imgID = (img.id) ? "id='" + img.id + "' " : ""; var imgClass = (img.className) ? "class='" + img.className + "' " : ""; var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "; var imgStyle = "display:inline-block;" + img.style.cssText; if (img.align == "left") { imgStyle = "float:left;" + imgStyle } if (img.align == "right") { imgStyle = "float:right;" + imgStyle } if (img.parentElement.href) { imgStyle = "cursor:hand;" + imgStyle } img.outerHTML = "<span " + imgID + imgClass + imgTitle + ' style="width:' + img.width + "px; height:" + img.height + "px;" + imgStyle + ";filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + img.src + "', sizingMethod='scale');\"></span>"; i = i - 1 } } } loadMask(this.options.galleryMask) }) } })(jQuery);