/**
* Copyright (c) 2010 Anders Ekdahl (http://coffeescripter.com/)
* Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
* and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
*
* Version: 1.2.4
*
* Demo and documentation: http://coffeescripter.com/code/ad-gallery/
*/
(function (a) { function h(a, b) { this.init(a, b) } function g(a, b) { this.init(a, b) } function f(a, b, c) { a.css("opacity", 0); return { old_image: { opacity: 0 }, new_image: { opacity: 1 }, speed: 0} } function e(a, b, c) { a.css("opacity", 0); return { old_image: { opacity: 0 }, new_image: { opacity: 1}} } function d(a, b, c) { var d = a.width(); var e = a.height(); var f = parseInt(a.css("left"), 10); var g = parseInt(a.css("top"), 10); a.css({ width: 0, height: 0, top: this.image_wrapper_height / 2, left: this.image_wrapper_width / 2 }); return { old_image: { width: 0, height: 0, top: this.image_wrapper_height / 2, left: this.image_wrapper_width / 2 }, new_image: { width: d, height: e, top: g, left: f}} } function c(a, b, c) { var d = parseInt(a.css("left"), 10); if (b == "left") { var e = "-" + this.image_wrapper_width + "px"; a.css("left", this.image_wrapper_width + "px") } else { var e = this.image_wrapper_width + "px"; a.css("left", "-" + this.image_wrapper_width + "px") } if (c) { c.css("bottom", "-" + c[0].offsetHeight + "px"); c.animate({ bottom: 0 }, this.settings.animation_speed * 2) } if (this.current_description) { this.current_description.animate({ bottom: "-" + this.current_description[0].offsetHeight + "px" }, this.settings.animation_speed * 2) } return { old_image: { left: e }, new_image: { left: d}} } function b(a, b, c) { var d = parseInt(a.css("top"), 10); if (b == "left") { var e = "-" + this.image_wrapper_height + "px"; a.css("top", this.image_wrapper_height + "px") } else { var e = this.image_wrapper_height + "px"; a.css("top", "-" + this.image_wrapper_height + "px") } if (c) { c.css("bottom", "-" + c[0].offsetHeight + "px"); c.animate({ bottom: 0 }, this.settings.animation_speed * 2) } if (this.current_description) { this.current_description.animate({ bottom: "-" + this.current_description[0].offsetHeight + "px" }, this.settings.animation_speed * 2) } return { old_image: { top: e }, new_image: { top: d}} } a.fn.adGallery = function (b) { var c = { loader_image: "loader.gif", start_at_index: 0, description_wrapper: false, thumb_opacity: .7, animate_first_image: false, animation_speed: 400, width: false, height: false, display_next_and_prev: true, display_back_and_forward: true, scroll_jump: 0, slideshow: { enable: true, autostart: false, speed: 5e3, start_label: "Start", stop_label: "Stop", stop_on_scroll: true, countdown_prefix: "(", countdown_sufix: ")", onStart: false, onStop: false }, effect: "slide-hori", enable_keyboard_move: true, cycle: true, callbacks: { init: false, afterImageVisible: false, beforeImageVisible: false} }; var d = a.extend(false, c, b); if (b && b.slideshow) { d.slideshow = a.extend(false, c.slideshow, b.slideshow) } if (!d.slideshow.enable) { d.slideshow.autostart = false } var e = []; a(this).each(function () { var a = new g(this, d); e[e.length] = a }); return e }; g.prototype = { wrapper: false, image_wrapper: false, gallery_info: false, nav: false, loader: false, preloads: false, thumbs_wrapper: false, scroll_back: false, scroll_forward: false, next_link: false, prev_link: false, slideshow: false, image_wrapper_width: 0, image_wrapper_height: 0, current_index: 0, current_image: false, current_description: false, nav_display_width: 0, settings: false, images: false, in_transition: false, animations: false, init: function (b, c) { var d = this; this.wrapper = a(b); this.settings = c; this.setupElements(); this.setupAnimations(); if (this.settings.width) { this.image_wrapper_width = this.settings.width; this.image_wrapper.width(this.settings.width); this.wrapper.width(this.settings.width) } else { this.image_wrapper_width = this.image_wrapper.width() } if (this.settings.height) { this.image_wrapper_height = this.settings.height; this.image_wrapper.height(this.settings.height) } else { this.image_wrapper_height = this.image_wrapper.height() } this.nav_display_width = this.nav.width(); this.current_index = 0; this.current_image = false; this.current_description = false; this.in_transition = false; this.findImages(); if (this.settings.display_next_and_prev) { this.initNextAndPrev() } var e = function (a) { return d.nextImage(a) }; this.slideshow = new h(e, this.settings.slideshow); this.controls.append(this.slideshow.create()); if (this.settings.slideshow.enable) { this.slideshow.enable() } else { this.slideshow.disable() } if (this.settings.display_back_and_forward) { this.initBackAndForward() } if (this.settings.enable_keyboard_move) { this.initKeyEvents() } var f = parseInt(this.settings.start_at_index, 10); if (window.location.hash && window.location.hash.indexOf("#ad-image") === 0) { f = window.location.hash.replace(/[^0-9]+/g, ""); if (f * 1 != f) { f = this.settings.start_at_index } } this.loading(true); this.showImage(f, function () { if (d.settings.slideshow.autostart) { d.preloadImage(f + 1); d.slideshow.start() } }); this.fireCallback(this.settings.callbacks.init) }, setupAnimations: function () { this.animations = { "slide-vert": b, "slide-hori": c, resize: d, fade: e, none: f} }, setupElements: function () { this.controls = this.wrapper.find(".ad-controls"); this.gallery_info = a('<p class="ad-info"></p>'); this.controls.append(this.gallery_info); this.image_wrapper = this.wrapper.find(".ad-image-wrapper"); this.image_wrapper.empty(); this.nav = this.wrapper.find(".ad-nav"); this.thumbs_wrapper = this.nav.find(".ad-thumbs"); this.preloads = a('<div class="ad-preloads"></div>'); this.loader = a('<img class="ad-loader" src="' + this.settings.loader_image + '">'); this.image_wrapper.append(this.loader); this.loader.hide(); a(document.body).append(this.preloads) }, loading: function (a) { if (a) { this.loader.show() } else { this.loader.hide() } }, addAnimation: function (b, c) { if (a.isFunction(c)) { this.animations[b] = c } }, findImages: function () { var b = this; this.images = []; var c = 0; var d = 0; var e = this.thumbs_wrapper.find("a"); var f = e.length; if (this.settings.thumb_opacity < 1) { e.find("img").css("opacity", this.settings.thumb_opacity) } e.each(function (e) { var f = a(this); var g = f.attr("href"); var h = f.find("img"); if (!b.isImageLoaded(h[0])) { h.load(function () { c += this.parentNode.parentNode.offsetWidth; d++ }) } else { c += h[0].parentNode.parentNode.offsetWidth; d++ } f.addClass("ad-thumb" + e); f.click(function () { b.showImage(e); b.slideshow.stop(); return false }).hover(function () { if (!a(this).is(".ad-active") && b.settings.thumb_opacity < 1) { a(this).find("img").fadeTo(300, 1) } b.preloadImage(e) }, function () { if (!a(this).is(".ad-active") && b.settings.thumb_opacity < 1) { a(this).find("img").fadeTo(300, b.settings.thumb_opacity) } }); var f = false; if (h.data("ad-link")) { f = h.data("ad-link") } else if (h.attr("longdesc") && h.attr("longdesc").length) { f = h.attr("longdesc") } var i = false; if (h.data("ad-desc")) { i = h.data("ad-desc") } else if (h.attr("alt") && h.attr("alt").length) { i = h.attr("alt") } var j = false; if (h.data("ad-title")) { j = h.data("ad-title") } else if (h.attr("title") && h.attr("title").length) { j = h.attr("title") } b.images[e] = { thumb: h.attr("src"), image: g, error: false, preloaded: false, desc: i, title: j, size: false, link: f} }); var g = setInterval(function () { if (f == d) { c -= 100; var a = b.nav.find(".ad-thumb-list"); a.css("width", c + "px"); var e = 1; var h = a.height(); while (e < 201) { a.css("width", c + e + "px"); if (h != a.height()) { break } h = a.height(); e++ } clearInterval(g) } }, 100) }, initKeyEvents: function () { var b = this; a(document).keydown(function (a) { if (a.keyCode == 39) { b.nextImage(); b.slideshow.stop() } else if (a.keyCode == 37) { b.prevImage(); b.slideshow.stop() } }) }, initNextAndPrev: function () { this.next_link = a('<div class="ad-next"><div class="ad-next-image"></div></div>'); this.prev_link = a('<div class="ad-prev"><div class="ad-prev-image"></div></div>'); this.image_wrapper.append(this.next_link); this.image_wrapper.append(this.prev_link); var b = this; this.prev_link.add(this.next_link).mouseover(function (c) { a(this).css("height", b.image_wrapper_height); a(this).find("div").show() }).mouseout(function (b) { a(this).find("div").hide() }).click(function () { if (a(this).is(".ad-next")) { b.nextImage(); b.slideshow.stop() } else { b.prevImage(); b.slideshow.stop() } }).find("div").css("opacity", .7) }, initBackAndForward: function () { var b = this; this.scroll_forward = a('<div class="ad-forward"></div>'); this.scroll_back = a('<div class="ad-back"></div>'); this.nav.append(this.scroll_forward); this.nav.prepend(this.scroll_back); var c = 0; var d = false; a(this.scroll_back).add(this.scroll_forward).click(function () { var c = b.nav_display_width - 50; if (b.settings.scroll_jump > 0) { var c = b.settings.scroll_jump } if (a(this).is(".ad-forward")) { var d = b.thumbs_wrapper.scrollLeft() + c } else { var d = b.thumbs_wrapper.scrollLeft() - c } if (b.settings.slideshow.stop_on_scroll) { b.slideshow.stop() } b.thumbs_wrapper.animate({ scrollLeft: d + "px" }); return false }).css("opacity", .6).hover(function () { var e = "left"; if (a(this).is(".ad-forward")) { e = "right" } d = setInterval(function () { c++; if (c > 30 && b.settings.slideshow.stop_on_scroll) { b.slideshow.stop() } var a = b.thumbs_wrapper.scrollLeft() + 1; if (e == "left") { a = b.thumbs_wrapper.scrollLeft() - 1 } b.thumbs_wrapper.scrollLeft(a) }, 10); a(this).css("opacity", 1) }, function () { c = 0; clearInterval(d); a(this).css("opacity", .6) }) }, _afterShow: function () { this.gallery_info.html(this.current_index + 1 + " / " + this.images.length); if (!this.settings.cycle) { this.prev_link.show().css("height", this.image_wrapper_height); this.next_link.show().css("height", this.image_wrapper_height); if (this.current_index == this.images.length - 1) { this.next_link.hide() } if (this.current_index == 0) { this.prev_link.hide() } } this.fireCallback(this.settings.callbacks.afterImageVisible) }, _getContainedImageSize: function (a, b) { if (b > this.image_wrapper_height) { var c = a / b; b = this.image_wrapper_height; a = this.image_wrapper_height * c } if (a > this.image_wrapper_width) { var c = b / a; a = this.image_wrapper_width; b = this.image_wrapper_width * c } return { width: a, height: b} }, _centerImage: function (a, b, c) { a.css("top", "0px"); if (c < this.image_wrapper_height) { var d = this.image_wrapper_height - c; a.css("top", d / 2 + "px") } a.css("left", "0px"); if (b < this.image_wrapper_width) { var d = this.image_wrapper_width - b; a.css("left", d / 2 + "px") } }, _getDescription: function (b) { var c = false; if (b.desc.length || b.title.length) { var d = ""; if (b.title.length) { d = '<strong class="ad-description-title">' + b.title + "</strong>" } var c = ""; if (b.desc.length) { c = "<span>" + b.desc + "</span>" } c = a('<p class="ad-image-description">' + d + c + "</p>") } return c }, showImage: function (a, b) { if (this.images[a] && !this.in_transition) { var c = this; var d = this.images[a]; this.in_transition = true; if (!d.preloaded) { this.loading(true); this.preloadImage(a, function () { c.loading(false); c._showWhenLoaded(a, b) }) } else { this._showWhenLoaded(a, b) } } }, _showWhenLoaded: function (b, c) { if (this.images[b]) { var d = this; var e = this.images[b]; var f = a(document.createElement("div")).addClass("ad-image"); var g = a(new Image).attr("src", e.image); if (e.link) { var h = a('<a href="' + e.link + '" target="_blank"></a>'); h.append(g); f.append(h) } else { f.append(g) } this.image_wrapper.prepend(f); var i = this._getContainedImageSize(e.size.width, e.size.height); g.attr("width", i.width); g.attr("height", i.height); f.css({ width: i.width + "px", height: i.height + "px" }); this._centerImage(f, i.width, i.height); var j = this._getDescription(e, f); if (j) { if (!this.settings.description_wrapper) { f.append(j); var k = i.width - parseInt(j.css("padding-left"), 10) - parseInt(j.css("padding-right"), 10); j.css("width", k + "px") } else { this.settings.description_wrapper.append(j) } } this.highLightThumb(this.nav.find(".ad-thumb" + b)); var l = "right"; if (this.current_index < b) { l = "left" } this.fireCallback(this.settings.callbacks.beforeImageVisible); if (this.current_image || this.settings.animate_first_image) { var m = this.settings.animation_speed; var n = "swing"; var o = this.animations[this.settings.effect].call(this, f, l, j); if (typeof o.speed != "undefined") { m = o.speed } if (typeof o.easing != "undefined") { n = o.easing } if (this.current_image) { var p = this.current_image; var q = this.current_description; p.animate(o.old_image, m, n, function () { p.remove(); if (q) q.remove() }) } f.animate(o.new_image, m, n, function () { d.current_index = b; d.current_image = f; d.current_description = j; d.in_transition = false; d._afterShow(); d.fireCallback(c) }) } else { this.current_index = b; this.current_image = f; d.current_description = j; this.in_transition = false; d._afterShow(); this.fireCallback(c) } } }, nextIndex: function () { if (this.current_index == this.images.length - 1) { if (!this.settings.cycle) { return false } var a = 0 } else { var a = this.current_index + 1 } return a }, nextImage: function (a) { var b = this.nextIndex(); if (b === false) return false; this.preloadImage(b + 1); this.showImage(b, a); return true }, prevIndex: function () { if (this.current_index == 0) { if (!this.settings.cycle) { return false } var a = this.images.length - 1 } else { var a = this.current_index - 1 } return a }, prevImage: function (a) { var b = this.prevIndex(); if (b === false) return false; this.preloadImage(b - 1); this.showImage(b, a); return true }, preloadAll: function () { function c() { if (b < a.images.length) { b++; a.preloadImage(b, c) } } var a = this; var b = 0; a.preloadImage(b, c) }, preloadImage: function (b, c) { if (this.images[b]) { var d = this.images[b]; if (!this.images[b].preloaded) { var e = a(new Image); e.attr("src", d.image); if (!this.isImageLoaded(e[0])) { this.preloads.append(e); var f = this; e.load(function () { d.preloaded = true; d.size = { width: this.width, height: this.height }; f.fireCallback(c) }).error(function () { d.error = true; d.preloaded = false; d.size = false }) } else { d.preloaded = true; d.size = { width: e[0].width, height: e[0].height }; this.fireCallback(c) } } else { this.fireCallback(c) } } }, isImageLoaded: function (a) { if (typeof a.complete != "undefined" && !a.complete) { return false } if (typeof a.naturalWidth != "undefined" && a.naturalWidth == 0) { return false } return true }, highLightThumb: function (a) { this.thumbs_wrapper.find(".ad-active").removeClass("ad-active"); a.addClass("ad-active"); if (this.settings.thumb_opacity < 1) { this.thumbs_wrapper.find("a:not(.ad-active) img").fadeTo(300, this.settings.thumb_opacity); a.find("img").fadeTo(300, 1) } var b = a[0].parentNode.offsetLeft; b -= this.nav_display_width / 2 - a[0].offsetWidth / 2; this.thumbs_wrapper.animate({ scrollLeft: b + "px" }) }, fireCallback: function (b) { if (a.isFunction(b)) { b.call(this) } } }; h.prototype = { start_link: false, stop_link: false, countdown: false, controls: false, settings: false, nextimage_callback: false, enabled: false, running: false, countdown_interval: false, init: function (a, b) { var c = this; this.nextimage_callback = a; this.settings = b }, create: function () { this.start_link = a('<span class="ad-slideshow-start">' + this.settings.start_label + "</span>"); this.stop_link = a('<span class="ad-slideshow-stop">' + this.settings.stop_label + "</span>"); this.countdown = a('<span class="ad-slideshow-countdown"></span>'); this.controls = a('<div class="ad-slideshow-controls"></div>'); this.controls.append(this.start_link).append(this.stop_link).append(this.countdown); this.countdown.hide(); var b = this; this.start_link.click(function () { b.start() }); this.stop_link.click(function () { b.stop() }); a(document).keydown(function (a) { if (a.keyCode == 83) { if (b.running) { b.stop() } else { b.start() } } }); return this.controls }, disable: function () { this.enabled = false; this.stop(); this.controls.hide() }, enable: function () { this.enabled = true; this.controls.show() }, toggle: function () { if (this.enabled) { this.disable() } else { this.enable() } }, start: function () { if (this.running || !this.enabled) return false; var a = this; this.running = true; this.controls.addClass("ad-slideshow-running"); this._next(); this.fireCallback(this.settings.onStart); return true }, stop: function () { if (!this.running) return false; this.running = false; this.countdown.hide(); this.controls.removeClass("ad-slideshow-running"); clearInterval(this.countdown_interval); this.fireCallback(this.settings.onStop); return true }, _next: function () { var a = this; var b = this.settings.countdown_prefix; var c = this.settings.countdown_sufix; clearInterval(a.countdown_interval); this.countdown.show().html(b + this.settings.speed / 1e3 + c); var d = 0; this.countdown_interval = setInterval(function () { d += 1e3; if (d >= a.settings.speed) { var e = function () { if (a.running) { a._next() } d = 0 }; if (!a.nextimage_callback(e)) { a.stop() } d = 0 } var f = parseInt(a.countdown.text().replace(/[^0-9]/g, ""), 10); f--; if (f > 0) { a.countdown.html(b + f + c) } }, 1e3) }, fireCallback: function (b) { if (a.isFunction(b)) { b.call(this) } } } })(jQuery)