var gallery = { initialize: function(element, options) {
this.setOptions({ showArrows:false, showCarousel:false, showInfopane:false, embedLinks:false, fadeDuration:500, timed:true, delay:8000, preloader:true, preloaderImage:true, preloaderErrorImage:true, manualData: [], populateFrom:false, populateData:true, destroyAfterPopulate:true, elementSelector: "div.imageElement", titleSelector: "h3", subtitleSelector: "p", linkSelector: "a.open", imageSelector: "img.full", thumbnailSelector: "img.thumbnail", defaultTransition: "fade", slideInfoZoneOpacity: 0.7, slideInfoZoneSlide: true, carouselMinimizedOpacity: 0.4, carouselMinimizedHeight: 20, carouselMaximizedOpacity: 0.9, thumbHeight: 75, thumbWidth: 100, thumbSpacing: 10, thumbIdleOpacity: 0.2, textShowCarousel: 'Pictures', showCarouselLabel: true, thumbCloseCarousel: true, useThumbGenerator: false, thumbGenerator: 'resizer.php', useExternalCarousel: false, carouselElement: false, carouselHorizontal: true, activateCarouselScroller: false, carouselPreloader: false, textPreloadingCarousel: 'Loading...', baseClass: 'jdGallery', withArrowsClass: 'withArrows', useHistoryManager: false, customHistoryKey: false }, 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); 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.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 = { image: el.getElement(options.imageSelector).getProperty('src'), number: currentArrayPlace, transition: this.options.defaultTransition }; elementDict.extend = $extend; if ((options.showInfopane) | (options.showCarousel))
elementDict.extend({ title: el.getElement(options.titleSelector).innerHTML, description: el.getElement(options.subtitleSelector).innerHTML }); if (options.embedLinks)
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.remove();
}); return data;
}, constructElements: function() {
el = this.galleryElement; this.maxIter = this.galleryData.length; var currentImg; for (i = 0; i < this.galleryData.length; i++) {
var currentImg = new Fx.Styles(new Element('div').addClass('slideElement').setStyles({ 'position': 'absolute', 'left': '0px', 'right': '0px', 'margin': '0px', 'padding': '0px', 'backgroundPosition': "center center", 'opacity': '0' }).injectInside(el), 'opacity', { duration: this.options.fadeDuration }); if (this.options.preloader) {
currentImg.source = this.galleryData[i].image; currentImg.loaded = false; currentImg.load = function(imageStyle) {
if (!imageStyle.loaded) {
new Asset.image(imageStyle.source, { 'onload': function(img) {
img.element.setStyle('backgroundImage', "url('" + img.source + "')")
img.loaded = true;
} .bind(this, imageStyle)
});} 
} .pass(currentImg, this);
} else { currentImg.element.setStyle('backgroundImage', "url('" + this.galleryData[i].image + "')"); }
this.galleryElements[parseInt(i)] = currentImg;} 
}, destroySlideShow: function(element) { var myClassName = element.className; var newElement = new Element('div').addClass('myClassName'); element.parentNode.replaceChild(newElement, element); }, startSlideShow: function() {
this.fireEvent('onStart'); this.loadingElement.style.display = "none"; this.lastIter = this.maxIter - 1; this.currentIter = 0; this.galleryInit = 0; this.galleryElements[parseInt(this.currentIter)].set({ opacity: 1 }); if (this.options.showInfopane)
this.showInfoSlideShow.delay(1000, this); var textShowCarousel = formatString(this.options.textShowCarousel, this.currentIter + 1, this.maxIter); if (this.options.showCarousel && (!this.options.carouselPreloader))
this.carouselBtn.setHTML(textShowCarousel).setProperty('title', textShowCarousel); this.prepareTimer(); if (this.options.embedLinks)
this.makeLink(this.currentIter);
}, nextItem: function() {
this.fireEvent('onNextCalled'); this.nextIter = this.currentIter + 1; if (this.nextIter >= 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();
}, changeItem: function(num) {
this.fireEvent('onStartChanging'); this.galleryInit = 0; if (this.currentIter != num) {
for (i = 0; i < this.maxIter; i++)
{ if ((i != this.currentIter)) this.galleryElements[i].set({ opacity: 0 }); }
gallery.Transitions[this.galleryData[num].transition].pass([this.galleryElements[this.currentIter], this.galleryElements[num], this.currentIter, num], this)(); this.currentIter = num;}
var textShowCarousel = formatString(this.options.textShowCarousel, num + 1, this.maxIter); if (this.options.showCarousel)
this.carouselBtn.setHTML(textShowCarousel).setProperty('title', textShowCarousel); this.doSlideShow.bind(this)(); this.fireEvent('onChanged');
}, clearTimer: function() {
if (this.options.timed)
$clear(this.timer);
}, prepareTimer: function() {
if (this.options.timed)
this.timer = this.nextItem.delay(this.options.delay, this);
}, doSlideShow: function(position) {
if (this.galleryInit == 1) {
imgPreloader = new Image(); imgPreloader.onload = function() { this.startSlideShow.delay(10, this); } .bind(this); imgPreloader.src = this.galleryData[0].image; if (this.options.preloader)
this.galleryElements[0].load();
} else {
if (this.options.showInfopane) {
if (this.options.showInfopane)
{ this.showInfoSlideShow.delay((500 + this.options.fadeDuration), this); } else
if ((this.options.showCarousel) && (this.options.activateCarouselScroller))
this.centerCarouselOn(position);}}} 
}; gallery = new Class(gallery); gallery.implement(new Events); gallery.implement(new Options); gallery.Transitions = new Abstract({ fade: function(oldFx, newFx, oldPos, newPos) {
oldFx.options.transition = newFx.options.transition = Fx.Transitions.linear; oldFx.options.duration = newFx.options.duration = this.options.fadeDuration; if (newPos > oldPos) newFx.start({ opacity: 1 }); else
{ newFx.set({ opacity: 1 }); oldFx.start({ opacity: 0 }); }} 
}); 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); } }); Preloader.implement(new Events, new Options); 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;}