jQuery.fn.mbGallery = function(a) { return this.each(function() { var F = !this.id ? Math.floor(Math.random() * 100) : this.id; var K = this; this.options = { galleryWidth: 300, galleryHeight: 300, galleryMaxWidth: 0, galleryColor: "white", galleryFrameBorder: 30, galleryFrameColor: "white", startFrom: 0, headerOpacity: 0.5, thumbsBorder: 5, thumbHeight: 30, thumbStripColor: "black", thumbStripPos: "right", thumbStripWidth: 250, thumbSelectColor: "black", thumbOverColor: "#cccccc", imageSelector: ".imgFull", thumbnailSelector: ".imgThumb", descSelector: ".imgDesc", descriptionWidth: 300, labelColor: "yellow", labelColorDisactive: "white", labelTextColor: "black", labelTextSize: "9px", labelHeight: 25, iconFolder: "elements/black", fadeTime: 300, autoSlide: true, slideTimer: 100, autoSize: true, startTimer: 0 }; var h; $.extend(this.options, a); var o = this.options; o.thumbsBorder = o.thumbsBorder + "px solid"; var q = { thumbSel: { border: o.thumbsBorder, borderColor: o.thumbSelectColor }, thumbUnsel: { border: o.thumbsBorder, borderColor: o.thumbStripColor }, thumbOver: { border: o.thumbsBorder, borderColor: o.thumbOverColor} }; $.extend(o, q); if (o.slideTimer < 2000) { o.slideTimer = 2000 } var t; var c; var H = o.thumbUnsel; var I = o.thumbOver; $(this).hide(); var A = $(this).find(o.thumbnailSelector); var L = $(this).find(o.imageSelector); var M = $(this).find(o.descSelector); $(this).empty(); if (o.startFrom == "random") { o.startFrom = Math.floor(Math.random() * L.length) } function C(x) { $(l).find("img").attr("src", "" + o.iconFolder + "/loader.gif"); var Q = $(L[x]).attr("src"); var P = new Image(); P.onload = function() { $(l).find("img").attr("src", "" + o.iconFolder + "/loaded.gif"); e(x) }; P.onerror = function() { alert("can't load " + Q) }; P.src = Q } var r = ""; function w(x) { var P = 0; switch (o.thumbStripPos) { case "left": P = 0; break; case "center": P = ((x / 2) - (o.thumbStripWidth / 2)); break; case "right": P = (x - o.thumbStripWidth); break; default: P = 0; break } return P } r = w(o.galleryWidth); $(this).parent().append("<table cellpadding='0' cellspacing='0' height='" + o.galleryHeight + "'><tr><td id ='gallery_" + F + "'></td></tr></table>"); var g = $(this).parent().find("#gallery_" + F); $(g).css({ border: o.galleryFrameBorder + "px solid " + o.galleryFrameColor, background: o.galleryColor }); $(g).append(this); $(this).append("<div class='FullImg'></div>"); var b = $(this).find(" .FullImg"); var k = o.labelHeight > 0 ? o.labelHeight : o.galleryFrameBorder; $(g).prepend("<div class='thumbBox'></div>"); var O = $(g).find(" .thumbBox"); $(O).prepend("<div class='header'><table cellpadding='0' cellspacing='0'><td class='thumbWinBtn pointer' ></td><td class='spacer' ></td><td class='slideShow pointer' ></td><td class='spacer' ></td><td class='prev pointer' ></td><td class='next pointer' ></td><td class='spacer' ></td><td class='loader'></td><td class='indexLabel' nowrap></td></div>"); var f = $(O).find(" .header"); var y = $(f).find(".thumbWinBtn"); $(y).append("<img src='" + o.iconFolder + "/thumb.gif' class='thumbIco'>"); var i = $(f).find(".slideShow"); $(i).append("<img src='" + o.iconFolder + "/play.gif' class='slideIco'>"); var l = $(f).find(".loader"); $(l).append("<img src='" + o.iconFolder + "/loaded.gif'>"); var J = $(f).find(".spacer"); $(J).append("<img src='" + o.iconFolder + "/separator.gif'>"); var d = $(f).find(".next"); $(d).append("<img src='" + o.iconFolder + "/next.gif'>"); var z = $(f).find(".prev"); $(z).append("<img src='" + o.iconFolder + "/prev.gif'>"); var m = $(O).find(" .indexLabel").html((o.startFrom + 1) + ".<b>" + L.length + "</b>"); $(O).append("<div class='ThumbImg'></div>"); var s = $(O).find(" .ThumbImg"); $(s).prepend($(A)); $(O).append("<div class='descriptionBox'></div>"); var j = $(g).find(".descriptionBox"); $(j).css({ position: "absolute", padding: 10, zIndex: 0, width: o.thumbStripWidth - 20 }); $(this).css({ width: o.galleryWidth, height: o.galleryHeight, overflow: "hidden" }); $(A).css({ width: o.thumbHeight, padding: "0px", border: "1px solid " + o.labelColor, cursor: "pointer" }); $(O).css({ textAlign: "left", zindex: 1000, marginTop: "-" + k + "px", position: "absolute", width: o.thumbStripWidth + "px", marginLeft: r + "px", zIndex: 10000 }); $(s).css({ opacity: o.headerOpacity, backgroundColor: o.thumbStripColor, border: "5px solid " + o.labelColor }); $(f).css({ opacity: o.headerOpacity, textAlign: "left", color: o.labelTextColor, padding: "0px", border: "0px", height: k }); $(f).find("td").css({ background: o.labelColorDisactive, padding: "2px", paddingRight: "10px", height: k, color: o.labelTextColor, fontFamily: "Verdana, Arial", fontSize: o.labelTextSize }); $(".pointer").css({ cursor: "pointer" }); jQuery.fn.extend({ getW: function() { var x = $(this).width(); if (o.galleryMaxWidth > 0 && x > o.galleryMaxWidth) { $(this).attr("width", o.galleryMaxWidth); x = o.galleryMaxWidth } return x } }); function e(x) { $(j).fadeTo(o.fadeTime, 0); $(b).fadeTo(o.fadeTime, 0, function() { $(this).html(L[x]); $(j).html(M[x]); setTimeout(function() { $(b).fadeTo(o.fadeTime, 1); $(j).fadeTo(o.fadeTime, 0.8) }, o.fadeTime); if (o.autoSize) { var Q = $(L[x]).getW(); $(K).animate({ height: L[x].offsetHeight, width: Q }, o.fadeTime); if (o.thumbStripWidth == o.galleryWidth) { $(O).animate({ width: L[x].offsetWidth }, o.fadeTime) } else { var P = w($(L[x]).width()); $(O).animate({ marginLeft: P }, o.fadeTime) } } }); $(c).css(H); t = L[x]; c = A[x]; $(c).css(o.thumbSel); $(m).html((x + 1) + ".<b>" + L.length + "</b>") } A.each(function(x) { $(this).click(function() { E = x; u(); C(x); setTimeout(function() { $(s).hide(500) }, 500) }) }); $(this).show(); var D, B, p; $(y).click(function() { if (!B) { $(s).show(500); B = true } else { $(s).hide(500); B = false } u() }); $(b).click(function() { u() }); $(b).bind("dblclick", function() { N() }); $(O).mouseover(function() { clearTimeout(D); clearTimeout(p); $(f).find("td").css({ opacity: o.headerOpacity, background: o.labelColor }); clearTimeout(h) }); $(O).mouseout(function() { p = setTimeout(function() { $(f).find("td").css({ opacity: o.headerOpacity, background: o.labelColor }) }, 100); D = setTimeout(function() { $(s).hide(500); B = false }, 1000) }); $(A).mouseover(function() { if (this != c) { $(this).css(I) } }); $(A).mouseout(function() { if (this != c) { $(this).css(H) } }); $(i).click(function() { G = !G; if (G) { N() } else { u() } }); var v; $(d).click(function() { u(); clearTimeout(v); E += 1; v = setTimeout(function() { if (E >= L.length) { E = 0 } C(E) }, 200) }); $(z).click(function() { u(); clearTimeout(v); E -= 1; v = setTimeout(function() { if (E < 0) { E = L.length - 1 } C(E) }, 200) }); t = L[o.startFrom]; $(A).css(H); c = A[o.startFrom]; $(c).css(q); h = setTimeout(function() { $(s).hide(500) }, 2000); var n, E = o.startFrom, G = o.autoSlide, N = function() { $(i).find("img").attr("src", o.iconFolder + "/stop.gif"); if (E == L.length) { E = 0 } C(E); n = setTimeout(N, o.slideTimer); E++ }; function u() { clearTimeout(n); $(i).find("img").attr("src", o.iconFolder + "/play.gif"); G = false } if (G) { setTimeout(N, o.startTimer) } else { setTimeout(function() { C(o.startFrom) }, o.startTimer) } }) };