/* This file is part of JonDesign's SmoothGallery v2.1beta1. JonDesign's SmoothGallery is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation; either version 3 of the License, or (at your option) any later version. JonDesign's SmoothGallery is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details. You should have received a copy of the GNU General Public License along with JonDesign's SmoothGallery; if not, write to the Free Software Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA Main Developer: Jonathan Schemoul (JonDesign: http://www.jondesign.net/) Contributed code by: - Christian Ehret (bugfix) - Nitrix (bugfix) - Valerio from Mad4Milk for his great help with the carousel scrolling and many other things. - Archie Cowan for helping me find a bugfix on carousel inner width problem. - Tomocchino from #mootools for the preloader class Many thanks to: - The mootools team for the great mootools lib, and it's help and support throughout the project. - Harald Kirschner (digitarald: http://digitarald.de/) for all his great libs. Some used here as plugins. */ /* some quirks to circumvent broken stuff in mt1.2 */ function isBody(element){ return (/^(?:body|html)$/i).test(element.tagName); }; Element.implement({ getPosition: function(relative){ if (isBody(this)) return {x: 0, y: 0}; var el = this, position = {x: 0, y: 0}; while (el){ position.x += el.offsetLeft; position.y += el.offsetTop; el = el.offsetParent; } var rpos = (relative) ? $(relative).getPosition() : {x: 0, y: 0}; return {x: position.x - rpos.x, y: position.y - rpos.y}; } }); // declaring the class var gallery = { Implements: [Events, Options], options: { showArrows: false, showCarousel: false, showInfopane: false, embedLinks: false, fadeDuration: 500, timed: false, delay: 9000, preloader: true, preloaderImage: true, preloaderErrorImage: true, /* Data retrieval */ manualData: [], populateFrom: false, populateData: true, destroyAfterPopulate: true, elementSelector: "div.imageElement", titleSelector: "h2", subtitleSelector: "p", linkSelector: "a.open", imageSelector: "img.full", thumbnailSelector: "img.thumbnail", defaultTransition: 'fade', /* InfoPane options */ slideInfoZoneOpacity: 0.7, slideInfoZoneSlide: true, /* Carousel options */ carouselMinimizedOpacity: 0.7, carouselMinimizedHeight: 20, carouselMaximizedOpacity: 0.9, thumbHeight: 75, thumbWidth: 100, thumbSpacing: 10, thumbIdleOpacity: 0.7, textShowCarousel: 'Gallery', showCarouselLabel: true, thumbCloseCarousel: true, useThumbGenerator: false, thumbGenerator: 'resizer.php', useExternalCarousel: false, carouselElement: false, carouselHorizontal: true, activateCarouselScroller: true, carouselPreloader: true, textPreloadingCarousel: 'Loading...', /* CSS Classes */ baseClass: 'jdGallery', withArrowsClass: 'withArrows', /* Plugins: HistoryManager */ useHistoryManager: false, customHistoryKey: false, /* Plugins: ReMooz */ useReMooz: false }, initialize: function(element, options) { this.setOptions(options); this.fireEvent('onInit'); this.currentIter = 0; this.lastIter = 0; this.maxIter = 0; this.galleryElement = element; this.galleryData = this.options.manualData; this.galleryInit = 1; this.galleryElements = Array(); this.thumbnailElements = Array(); this.galleryElement.addClass(this.options.baseClass); if (this.options.useReMooz&&(this.options.defaultTransition=="fade")) this.options.defaultTransition="crossfade"; this.populateFrom = element; if (this.options.populateFrom) this.populateFrom = this.options.populateFrom; if (this.options.populateData) this.populateData(); element.style.display="block"; if (this.options.useHistoryManager) this.initHistory(); if ((this.options.embedLinks)|(this.options.useReMooz)) { this.currentLink = new Element('a').addClass('open').setProperties({ href: '#', title: '' }).injectInside(element); if ((!this.options.showArrows) && (!this.options.showCarousel)) this.galleryElement = element = this.currentLink; else this.currentLink.setStyle('display', 'none'); } this.constructElements(); if ((this.galleryData.length>1)&&(this.options.showArrows)) { var leftArrow = new Element('a').addClass('left').addEvent( 'click', this.prevItem.bind(this) ).injectInside(element); var rightArrow = new Element('a').addClass('right').addEvent( 'click', this.nextItem.bind(this) ).injectInside(element); this.galleryElement.addClass(this.options.withArrowsClass); } this.loadingElement = new Element('div').addClass('loadingElement').injectInside(element); if (this.options.showInfopane) this.initInfoSlideshow(); if (this.options.showCarousel) this.initCarousel(); this.doSlideShow(1); }, populateData: function() { currentArrayPlace = this.galleryData.length; options = this.options; var data = $A(this.galleryData); data.extend(this.populateGallery(this.populateFrom, currentArrayPlace)); this.galleryData = data; this.fireEvent('onPopulated'); }, populateGallery: function(element, startNumber) { var data = []; options = this.options; currentArrayPlace = startNumber; element.getElements(options.elementSelector).each(function(el) { elementDict = $H({ image: el.getElement(options.imageSelector).getProperty('src'), number: currentArrayPlace, transition: this.options.defaultTransition }); if ((options.showInfopane) | (options.showCarousel)) elementDict.extend({ title: el.getElement(options.titleSelector).innerHTML, description: el.getElement(options.subtitleSelector).innerHTML }); if ((options.embedLinks) | (options.useReMooz)) elementDict.extend({ link: el.getElement(options.linkSelector).href||false, linkTitle: el.getElement(options.linkSelector).title||false, linkTarget: el.getElement(options.linkSelector).getProperty('target')||false }); if ((!options.useThumbGenerator) && (options.showCarousel)) elementDict.extend({ thumbnail: el.getElement(options.thumbnailSelector).getProperty('src') }); else if (options.useThumbGenerator) elementDict.extend({ thumbnail: options.thumbGenerator + '?imgfile=' + elementDict.image + '&max_width=' + options.thumbWidth + '&max_height=' + options.thumbHeight }); data.extend([elementDict]); currentArrayPlace++; if (this.options.destroyAfterPopulate) el.dispose(); }); return data; }, constructElements: function() { el = this.galleryElement; if (this.options.embedLinks && (!this.options.showArrows)) el = this.currentLink; this.maxIter = this.galleryData.length; var currentImg; for(i=0;i= this.maxIter) this.nextIter = 0; this.galleryInit = 0; this.goTo(this.nextIter); }, prevItem: function() { this.fireEvent('onPreviousCalled'); this.nextIter = this.currentIter-1; if (this.nextIter <= -1) this.nextIter = this.maxIter - 1; this.galleryInit = 0; this.goTo(this.nextIter); }, goTo: function(num) { this.clearTimer(); if(this.options.preloader) { this.galleryElements[num].load(); if (num==0) this.galleryElements[this.maxIter - 1].load(); else this.galleryElements[num - 1].load(); if (num==(this.maxIter - 1)) this.galleryElements[0].load(); else this.galleryElements[num + 1].load(); } if (this.options.embedLinks) this.clearLink(); if (this.options.showInfopane) { this.slideInfoZone.clearChain(); this.hideInfoSlideShow().chain(this.changeItem.pass(num, this)); } else this.currentChangeDelay = this.changeItem.delay(500, this, num); if (this.options.embedLinks) this.makeLink(num); this.prepareTimer(); /*if (this.options.showCarousel) this.clearThumbnailsHighlights();*/ }, changeItem: function(num) { this.fireEvent('onStartChanging'); this.galleryInit = 0; if (this.currentIter != num) { for(i=0;i' + (myself.relatedImage.number + 1) + "/" + this.maxIter + ": " + myself.relatedImage.title); }.pass(currentImg, this), 'mouseout': function (myself) { myself.cancel(); myself.start({'opacity': this.options.thumbIdleOpacity}); }.pass(currentImg, this), 'click': function (myself) { this.goTo(myself.relatedImage.number); if (this.options.thumbCloseCarousel&&(!this.options.useExternalCarousel)) this.hideCarousel(); }.pass(currentImg, this) }); currentImg.relatedImage = this.galleryData[i]; this.thumbnailElements[parseInt(i)] = currentImg; } }, log: function(value) { if(console.log) console.log(value); }, preloadThumbnails: function() { var thumbnails = []; for(i=0;i oldPos) newFx.start({opacity: 1}); else { newFx.set({opacity: 1}); oldFx.start({opacity: 0}); } }, crossfade: function(oldFx, newFx, oldPos, newPos){ oldFx.options.transition = newFx.options.transition = Fx.Transitions.linear; oldFx.options.duration = newFx.options.duration = this.options.fadeDuration; newFx.start({opacity: 1}); oldFx.start({opacity: 0}); }, fadebg: function(oldFx, newFx, oldPos, newPos){ oldFx.options.transition = newFx.options.transition = Fx.Transitions.linear; oldFx.options.duration = newFx.options.duration = this.options.fadeDuration / 2; oldFx.start({opacity: 0}).chain(newFx.start.pass([{opacity: 1}], newFx)); } }); /* All code copyright 2007 Jonathan Schemoul */ /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * Follows: Preloader (class) * Simple class for preloading images with support for progress reporting * Copyright 2007 Tomocchino. * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ var Preloader = new Class({ Implements: [Events, Options], options: { root : '', period : 100 }, initialize: function(options){ this.setOptions(options); }, load: function(sources) { this.index = 0; this.images = []; this.sources = this.temps = sources; this.total = this. sources.length; this.fireEvent('onStart', [this.index, this.total]); this.timer = this.progress.periodical(this.options.period, this); this.sources.each(function(source, index){ this.images[index] = new Asset.image(this.options.root + source, { 'onload' : function(){ this.index++; if(this.images[index]) this.fireEvent('onLoad', [this.images[index], index, source]); }.bind(this), 'onerror' : function(){ this.index++; this.fireEvent('onError', [this.images.splice(index, 1), index, source]); }.bind(this), 'onabort' : function(){ this.index++; this.fireEvent('onError', [this.images.splice(index, 1), index, source]); }.bind(this) }); }, this); }, progress: function() { this.fireEvent('onProgress', [Math.min(this.index, this.total), this.total]); if(this.index >= this.total) this.complete(); }, complete: function(){ $clear(this.timer); this.fireEvent('onComplete', [this.images]); }, cancel: function(){ $clear(this.timer); } }); /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * Follows: formatString (function) * Original name: Yahoo.Tools.printf * Copyright Yahoo. * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ function formatString() { var num = arguments.length; var oStr = arguments[0]; for (var i = 1; i < num; i++) { var pattern = "\\{" + (i-1) + "\\}"; var re = new RegExp(pattern, "g"); oStr = oStr.replace(re, arguments[i]); } return oStr; } //////////////////////////////////////////////////////////////////////// /** * ReMooz - Zoomer * * Inspired by so many boxes and zooms * * @version 1.0 * * @license MIT-style license * @author Harald Kirschner * @copyright Author */ var ReMooz = new Class({ Implements: [Events, Options, Chain], options: { link: null, type: 'image', container: null, className: null, centered: false, dragging: true, closeOnClick: true, shadow: (Browser.Engine.trident) ? 'onOpenEnd' : 'onOpen', // performance resize: true, margin: 20, resizeFactor: 0.95, resizeLimit: false, // {x: 640, y: 640} fixedSize: false, cutOut: true, addClick: true, opacityLoad: 0.6, opacityResize: 1, opacityTitle: 1, resizeOptions: {}, fxOptions: {}, closer: true, parse: false, // 'rel' parseSecure: false, temporary: false, onBuild: $empty, onLoad: $empty, onOpen: $empty, onOpenEnd: $empty, onClose: $empty, onCloseEnd: $empty, generateTitle: function(el) { var text = el.get('title'); if (!text) return false; var title = text.split(' :: '); var head = new Element('h6', {'html': title[0]}); return (title[1]) ? [head, new Element('p', {'html': title[1]})] : head; } }, initialize: function(element, options) { this.element = $(element); this.setOptions(options); if (this.options.parse) { var obj = this.element.getProperty(this.options.parse); if (obj && (obj = JSON.decode(obj, this.options.parseSecure))) this.setOptions(obj); } var origin = this.options.origin; this.origin = ((origin) ? $(origin) || this.element.getElement(origin) : null) || this.element; this.link = this.options.link || this.element.get('href') || this.element.get('src'); this.container = $(this.options.container) || this.element.getDocument(); this.bound = { 'click': function(e) { this.open.delay(1, this); return false; }.bind(this), 'close': this.close.bind(this), 'dragClose': function(e) { if (e.rightClick) return; this.close(); }.bind(this) }; if (this.options.addClick) this.bindToElement(); }, destroy: function() { if (this.box) this.box.destroy(); this.box = this.tweens = this.body = this.content = null; }, bindToElement: function(element) { ($(element) || this.element).addClass('remooz-element').addEvent('click', this.bound.click); return this; }, getOriginCoordinates: function() { var coords = this.origin.getCoordinates(); delete coords.right; delete coords.bottom; return coords; }, open: function(e) { if (this.opened) return (e) ? this.close() : this; this.opened = this.loading = true; if (!this.box) this.build(); this.coords = this.getOriginCoordinates(); this.coords.opacity = this.options.opacityLoad; this.coords.display = ''; this.tweens.box.set(this.coords); this.box.addClass('remooz-loading'); ReMooz.open(this.fireEvent('onLoad')); this['open' + this.options.type.capitalize()](); return this; }, finishOpen: function() { this.tweens.fade.start(0, 1); this.drag.attach(); this.fireEvent('onOpenEnd').callChain(); }, close: function() { if (!this.opened) return this; this.opened = false; ReMooz.close(this.fireEvent('onClose')); if (this.loading) { this.box.setStyle('display', 'none'); return this; } this.drag.detach(); this.tweens.fade.cancel().set(0).fireEvent('onComplete'); if (this.tweens.box.timer) this.tweens.box.clearChain(); var vars = this.getOriginCoordinates(); if (this.options.opacityResize != 1) vars.opacity = this.options.opacityResize; this.tweens.box.start(vars).chain(this.closeEnd.bind(this)); return this; }, closeEnd: function() { if (this.options.cutOut) this.element.setStyle('visibility', 'visible'); this.box.setStyle('display', 'none'); this.fireEvent('onCloseEnd').callChain(); if (this.options.temporary) this.destroy(); }, openImage: function() { var tmp = new Image(); tmp.onload = tmp.onabort = tmp.onerror = function(fast) { this.loading = tmp.onload = tmp.onabort = tmp.onerror = null; if (!tmp.width || !this.opened) { this.fireEvent('onError').close(); return; } var to = {x: tmp.width, y: tmp.height}; if (!this.content) this.content = $(tmp).inject(this.body); else tmp = null; this[(this.options.resize) ? 'zoomRelativeTo' : 'zoomTo'].create({ 'delay': (tmp && fast !== true) ? 1 : null, 'arguments': [to], 'bind': this })(); }.bind(this); tmp.src = this.link; if (tmp && tmp.complete && tmp.onload) tmp.onload(true); }, /** * @todo Test implementation */ openElement: function() { this.content = this.content || $(this.link) || $E(this.link); if (!this.content) { this.fireEvent('onError').close(); return; } this.content.inject(this.body); this.zoomTo({x: this.content.scrollWidth, y: this.content.scrollHeight}); }, zoomRelativeTo: function(to) { var scale = this.options.resizeLimit; if (!scale) { scale = this.container.getSize(); scale.x *= this.options.resizeFactor; scale.y *= this.options.resizeFactor; } for (var i = 2; i--;) { if (to.x > scale.x) { to.y *= scale.x / to.x; to.x = scale.x; } else if (to.y > scale.y) { to.x *= scale.y / to.y; to.y = scale.y; } } return this.zoomTo({x: to.x.toInt(), y: to.y.toInt()}); }, zoomTo: function(to) { to = this.options.fixedSize || to; var box = this.container.getSize(), scroll = this.container.getScroll(); var pos = (!this.options.centered) ? { x: (this.coords.left + (this.coords.width / 2) - to.x / 2).toInt() .limit(scroll.x + this.options.margin, scroll.x + box.x - this.options.margin - to.x), y: (this.coords.top + (this.coords.height / 2) - to.y / 2).toInt() .limit(scroll.y + this.options.margin, scroll.y + box.y - this.options.margin - to.y) } : { x: scroll.x + ((box.x - to.x) / 2).toInt(), y: scroll.y + ((box.y - to.y) / 2).toInt() }; if (this.options.cutOut) this.element.setStyle('visibility', 'hidden'); this.box.removeClass('remooz-loading'); var vars = {left: pos.x, top: pos.y, width: to.x, height: to.y}; if (this.options.opacityResize != 1) vars.opacity = [this.options.opacityResize, 1]; else this.box.set('opacity', 1); this.tweens.box.start(vars).chain(this.finishOpen.bind(this)); this.fireEvent('onOpen'); }, build: function() { this.addEvent('onBlur', function() { this.focused = false; this.box.removeClass('remooz-box-focus').setStyle('z-index', ReMooz.options.zIndex); }, true); this.addEvent('onFocus', function() { this.focused = true; this.box.addClass('remooz-box-focus').setStyle('z-index', ReMooz.options.zIndexFocus); }, true); var classes = ['remooz-box', 'remooz-type-' + this.options.type, 'remooz-engine-' + Browser.Engine.name + Browser.Engine.version]; if (this.options.className) classes.push(this.options.className); this.box = new Element('div', { 'class': classes.join(' '), 'styles': { 'display': 'none', 'top': 0, 'left': 0, 'zIndex': ReMooz.options.zIndex } }); this.tweens = { 'box': new Fx.Morph(this.box, $merge({ 'duration': 400, 'unit': 'px', 'transition': Fx.Transitions.Quart.easeOut, 'chain': 'cancel' }, this.options.resizeOptions) ), 'fade': new Fx.Tween(null, $merge({ 'property': 'opacity', 'duration': (Browser.Engine.trident) ? 0 : 300, 'chain': 'cancel' }, this.options.fxOptions)).addEvents({ 'onComplete': function() { if (!this.element.get('opacity')) this.element.setStyle('display', 'none'); }, 'onStart': function() { if (!this.element.get('opacity')) this.element.setStyle('display', ''); } } ) }; this.tweens.fade.element = $$(); if (this.options.shadow) { if (Browser.Engine.webkit420) { this.box.setStyle('-webkit-box-shadow', '0 0 10px rgba(0, 0, 0, 0.7)'); } else if (!Browser.Engine.trident4) { var shadow = new Element('div', {'class': 'remooz-bg-wrap'}).inject(this.box); ['n', 'ne', 'e', 'se', 's', 'sw', 'w', 'nw'].each(function(dir) { new Element('div', {'class': 'remooz-bg remooz-bg-' + dir}).inject(shadow); }); this.tweens.bg = new Fx.Tween(shadow, { 'property': 'opacity', 'chain': 'cancel' }).set(0); this.addEvent(this.options.shadow, this.tweens.bg.set.bind(this.tweens.bg, 1), true); this.addEvent('onClose', this.tweens.bg.set.bind(this.tweens.bg, 0), true); } } if (this.options.closer) { var closer = new Element('a', { 'class': 'remooz-btn-close', 'events': {'click': this.bound.close} }).inject(this.box); this.tweens.fade.element.push(closer); } this.body = new Element('div', {'class': 'remooz-body'}).inject(this.box); var title = this.options.title || this.options.generateTitle.call(this, this.element); if (title) { // thx ie6 var title = new Element('div', {'class': 'remooz-title'}).adopt( new Element('div', {'class': 'remooz-title-bg', 'opacity': this.options.opacityTitle}), new Element('div', {'class': 'remooz-title-content'}).adopt(title) ).inject(this.box); this.tweens.fade.element.push(title); } this.tweens.fade.set(0).fireEvent('onComplete'); this.drag = new Drag.Move(this.box, { 'snap': 15, 'preventDefault': true, 'onBeforeStart': function() { if (!this.focused && !this.loading) ReMooz.focus(this); else if (this.loading || this.options.closeOnClick) this.box.addEvent('mouseup', this.bound.dragClose); }.bind(this), 'onSnap': function() { this.box.removeEvent('mouseup', this.bound.dragClose); if (!this.options.dragging) this.drag.stop(); else this.box.addClass('remooz-box-dragging'); }.bind(this), 'onComplete': function() { this.box.removeClass('remooz-box-dragging'); }.bind(this) }); this.drag.detach(); this.fireEvent('onBuild', this.box, this.element); this.box.inject(this.element.getDocument().body); } }); ReMooz.factory = function(extended) { return $extend(this, extended); }; ReMooz.factory(new Options).factory({ options: { zIndex: 41, zIndexFocus: 42, query: 'a.remooz', modal: false }, assign: function(elements, options) { return $$(elements).map(function(element) { return new ReMooz(element, options); }, this); }, stack: [], open: function(obj) { var last = this.stack.getLast(); this.focus(obj); if (last && this.options.modal) last.close(); }, close: function(obj) { var length = this.stack.length - 1; if (length > 1 && this.stack[length] == obj) this.focus(this.stack[length - 1]); this.stack.erase(obj); }, focus: function(obj) { var last = this.stack.getLast(); obj.fireEvent('onFocus', [obj]); if (last == obj) return; if (last) last.fireEvent('onBlur', [last]); this.stack.erase(obj).push(obj); } });