2 This file is part of JonDesign's SmoothGallery v2.1beta1.
4 JonDesign's SmoothGallery is free software; you can redistribute it and/or modify
5 it under the terms of the GNU General Public License as published by
6 the Free Software Foundation; either version 3 of the License, or
7 (at your option) any later version.
9 JonDesign's SmoothGallery is distributed in the hope that it will be useful,
10 but WITHOUT ANY WARRANTY; without even the implied warranty of
11 MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
12 GNU General Public License for more details.
14 You should have received a copy of the GNU General Public License
15 along with JonDesign's SmoothGallery; if not, write to the Free Software
16 Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA
18 Main Developer: Jonathan Schemoul (JonDesign: http://www.jondesign.net/)
20 - Christian Ehret (bugfix)
22 - Valerio from Mad4Milk for his great help with the carousel scrolling and many other things.
23 - Archie Cowan for helping me find a bugfix on carousel inner width problem.
24 - Tomocchino from #mootools for the preloader class
26 - The mootools team for the great mootools lib, and it's help and support throughout the project.
27 - Harald Kirschner (digitarald: http://digitarald.de/) for all his great libs. Some used here as plugins.
30 /* some quirks to circumvent broken stuff in mt1.2 */
31 function isBody(element){
32 return (/^(?:body|html)$/i).test(element.tagName);
35 getPosition: function(relative){
36 if (isBody(this)) return {x: 0, y: 0};
37 var el = this, position = {x: 0, y: 0};
39 position.x += el.offsetLeft;
40 position.y += el.offsetTop;
43 var rpos = (relative) ? $(relative).getPosition() : {x: 0, y: 0};
44 return {x: position.x - rpos.x, y: position.y - rpos.y};
48 // declaring the class
50 Implements: [Events, Options],
61 preloaderErrorImage: true,
66 destroyAfterPopulate: true,
67 elementSelector: "div.imageElement",
69 subtitleSelector: "p",
70 linkSelector: "a.open",
71 imageSelector: "img.full",
72 thumbnailSelector: "img.thumbnail",
73 defaultTransition: "fade",
74 /* InfoPane options */
75 slideInfoZoneOpacity: 0.7,
76 slideInfoZoneSlide: true,
77 /* Carousel options */
78 carouselMinimizedOpacity: 0.4,
79 carouselMinimizedHeight: 20,
80 carouselMaximizedOpacity: 0.9,
84 thumbIdleOpacity: 0.2,
85 textShowCarousel: 'Pictures',
86 showCarouselLabel: true,
87 thumbCloseCarousel: true,
88 useThumbGenerator: false,
89 thumbGenerator: 'resizer.php',
90 useExternalCarousel: false,
91 carouselElement: false,
92 carouselHorizontal: true,
93 activateCarouselScroller: true,
94 carouselPreloader: true,
95 textPreloadingCarousel: 'Loading...',
97 baseClass: 'jdGallery',
98 withArrowsClass: 'withArrows',
99 /* Plugins: HistoryManager */
100 useHistoryManager: false,
101 customHistoryKey: false,
102 /* Plugins: ReMooz */
105 initialize: function(element, options) {
106 this.setOptions(options);
107 this.fireEvent('onInit');
108 this.currentIter = 0;
111 this.galleryElement = element;
112 this.galleryData = this.options.manualData;
113 this.galleryInit = 1;
114 this.galleryElements = Array();
115 this.thumbnailElements = Array();
116 this.galleryElement.addClass(this.options.baseClass);
118 if (this.options.useReMooz&&(this.options.defaultTransition=="fade"))
119 this.options.defaultTransition="crossfade";
121 this.populateFrom = element;
122 if (this.options.populateFrom)
123 this.populateFrom = this.options.populateFrom;
124 if (this.options.populateData)
126 element.style.display="block";
128 if (this.options.useHistoryManager)
131 if ((this.options.embedLinks)|(this.options.useReMooz))
133 this.currentLink = new Element('a').addClass('open').setProperties({
136 }).injectInside(element);
137 if ((!this.options.showArrows) && (!this.options.showCarousel))
138 this.galleryElement = element = this.currentLink;
140 this.currentLink.setStyle('display', 'none');
143 this.constructElements();
144 if ((this.galleryData.length>1)&&(this.options.showArrows))
146 var leftArrow = new Element('a').addClass('left').addEvent(
148 this.prevItem.bind(this)
149 ).injectInside(element);
150 var rightArrow = new Element('a').addClass('right').addEvent(
152 this.nextItem.bind(this)
153 ).injectInside(element);
154 this.galleryElement.addClass(this.options.withArrowsClass);
156 this.loadingElement = new Element('div').addClass('loadingElement').injectInside(element);
157 if (this.options.showInfopane) this.initInfoSlideshow();
158 if (this.options.showCarousel) this.initCarousel();
161 populateData: function() {
162 currentArrayPlace = this.galleryData.length;
163 options = this.options;
164 var data = $A(this.galleryData);
165 data.extend(this.populateGallery(this.populateFrom, currentArrayPlace));
166 this.galleryData = data;
167 this.fireEvent('onPopulated');
169 populateGallery: function(element, startNumber) {
171 options = this.options;
172 currentArrayPlace = startNumber;
173 element.getElements(options.elementSelector).each(function(el) {
175 image: el.getElement(options.imageSelector).getProperty('src'),
176 number: currentArrayPlace,
177 transition: this.options.defaultTransition
179 if ((options.showInfopane) | (options.showCarousel))
181 title: el.getElement(options.titleSelector).innerHTML,
182 description: el.getElement(options.subtitleSelector).innerHTML
184 if ((options.embedLinks) | (options.useReMooz))
186 link: el.getElement(options.linkSelector).href||false,
187 linkTitle: el.getElement(options.linkSelector).title||false,
188 linkTarget: el.getElement(options.linkSelector).getProperty('target')||false
190 if ((!options.useThumbGenerator) && (options.showCarousel))
192 thumbnail: el.getElement(options.thumbnailSelector).getProperty('src')
194 else if (options.useThumbGenerator)
196 thumbnail: options.thumbGenerator + '?imgfile=' + elementDict.image + '&max_width=' + options.thumbWidth + '&max_height=' + options.thumbHeight
199 data.extend([elementDict]);
201 if (this.options.destroyAfterPopulate)
206 constructElements: function() {
207 el = this.galleryElement;
208 if (this.options.embedLinks && (!this.options.showArrows))
209 el = this.currentLink;
210 this.maxIter = this.galleryData.length;
212 for(i=0;i<this.galleryData.length;i++)
214 var currentImg = new Fx.Morph(
215 new Element('div').addClass('slideElement').setStyles({
216 'position':'absolute',
221 'backgroundPosition':"center center",
224 {duration: this.options.fadeDuration}
226 if (this.options.preloader)
228 currentImg.source = this.galleryData[i].image;
229 currentImg.loaded = false;
230 currentImg.load = function(imageStyle, i) {
231 if (!imageStyle.loaded) {
232 this.galleryData[i].imgloader = new Asset.image(imageStyle.source, {
233 'onload' : function(img, i){
234 img.element.setStyle(
236 "url('" + img.source + "')")
238 img.width = this.galleryData[i].imgloader.width;
239 img.height = this.galleryData[i].imgloader.height;
240 }.pass([imageStyle, i], this)
243 }.pass([currentImg, i], this);
245 currentImg.element.setStyle('backgroundImage',
246 "url('" + this.galleryData[i].image + "')");
248 this.galleryElements[parseInt(i)] = currentImg;
251 destroySlideShow: function(element) {
252 var myClassName = element.className;
253 var newElement = new Element('div').addClass('myClassName');
254 element.parentNode.replaceChild(newElement, element);
256 startSlideShow: function() {
257 this.fireEvent('onStart');
258 this.loadingElement.style.display = "none";
259 this.lastIter = this.maxIter - 1;
260 this.currentIter = 0;
261 this.galleryInit = 0;
262 this.galleryElements[parseInt(this.currentIter)].set({opacity: 1});
263 if (this.options.showInfopane)
264 this.showInfoSlideShow.delay(1000, this);
265 if (this.options.useReMooz)
266 this.makeReMooz.delay(1000, this);
267 var textShowCarousel = formatString(this.options.textShowCarousel, this.currentIter+1, this.maxIter);
268 if (this.options.showCarousel&&(!this.options.carouselPreloader)&&(!this.options.useExternalCarousel))
269 this.carouselBtn.set('html', textShowCarousel).setProperty('title', textShowCarousel);
271 if (this.options.embedLinks)
272 this.makeLink(this.currentIter);
274 nextItem: function() {
275 this.fireEvent('onNextCalled');
276 this.nextIter = this.currentIter+1;
277 if (this.nextIter >= this.maxIter)
279 this.galleryInit = 0;
280 this.goTo(this.nextIter);
282 prevItem: function() {
283 this.fireEvent('onPreviousCalled');
284 this.nextIter = this.currentIter-1;
285 if (this.nextIter <= -1)
286 this.nextIter = this.maxIter - 1;
287 this.galleryInit = 0;
288 this.goTo(this.nextIter);
290 goTo: function(num) {
292 if(this.options.preloader)
294 this.galleryElements[num].load();
296 this.galleryElements[this.maxIter - 1].load();
298 this.galleryElements[num - 1].load();
299 if (num==(this.maxIter - 1))
300 this.galleryElements[0].load();
302 this.galleryElements[num + 1].load();
305 if (this.options.embedLinks)
307 if (this.options.showInfopane)
309 this.slideInfoZone.clearChain();
310 this.hideInfoSlideShow().chain(this.changeItem.pass(num, this));
312 this.currentChangeDelay = this.changeItem.delay(500, this, num);
313 if (this.options.embedLinks)
316 /*if (this.options.showCarousel)
317 this.clearThumbnailsHighlights();*/
319 changeItem: function(num) {
320 this.fireEvent('onStartChanging');
321 this.galleryInit = 0;
322 if (this.currentIter != num)
324 for(i=0;i<this.maxIter;i++)
326 if ((i != this.currentIter)) this.galleryElements[i].set({opacity: 0});
328 gallery.Transitions[this.galleryData[num].transition].pass([
329 this.galleryElements[this.currentIter],
330 this.galleryElements[num],
333 this.currentIter = num;
334 if (this.options.useReMooz)
337 var textShowCarousel = formatString(this.options.textShowCarousel, num+1, this.maxIter);
338 if ((this.options.showCarousel)&&(!this.options.useExternalCarousel))
339 this.carouselBtn.set('html', textShowCarousel).setProperty('title', textShowCarousel);
340 this.doSlideShow.bind(this)();
341 this.fireEvent('onChanged');
343 clearTimer: function() {
344 if (this.options.timed)
347 prepareTimer: function() {
348 if (this.options.timed)
349 this.timer = this.nextItem.delay(this.options.delay, this);
351 doSlideShow: function(position) {
352 if (this.galleryInit == 1)
354 imgPreloader = new Image();
355 imgPreloader.onload=function(){
356 this.startSlideShow.delay(10, this);
358 imgPreloader.src = this.galleryData[0].image;
359 if(this.options.preloader)
360 this.galleryElements[0].load();
362 if (this.options.showInfopane)
364 if (this.options.showInfopane)
366 this.showInfoSlideShow.delay((500 + this.options.fadeDuration), this);
368 if ((this.options.showCarousel)&&(this.options.activateCarouselScroller))
369 this.centerCarouselOn(position);
373 createCarousel: function() {
375 if (!this.options.useExternalCarousel)
377 var carouselContainerElement = new Element('div').addClass('carouselContainer').injectInside(this.galleryElement);
378 this.carouselContainer = new Fx.Morph(carouselContainerElement, {transition: Fx.Transitions.Expo.easeOut});
379 this.carouselContainer.normalHeight = carouselContainerElement.offsetHeight;
380 this.carouselContainer.set({'opacity': this.options.carouselMinimizedOpacity, 'top': (this.options.carouselMinimizedHeight - this.carouselContainer.normalHeight)});
381 this.carouselBtn = new Element('a').addClass('carouselBtn').setProperties({
382 title: this.options.textShowCarousel
383 }).injectInside(carouselContainerElement);
384 if(this.options.carouselPreloader)
385 this.carouselBtn.set('html', this.options.textPreloadingCarousel);
387 this.carouselBtn.set('html', this.options.textShowCarousel);
388 this.carouselBtn.addEvent(
391 this.carouselContainer.cancel();
392 this.toggleCarousel();
395 this.carouselActive = false;
397 carouselElement = new Element('div').addClass('carousel').injectInside(carouselContainerElement);
398 this.carousel = new Fx.Morph(carouselElement);
400 carouselElement = $(this.options.carouselElement).addClass('jdExtCarousel');
402 this.carouselElement = new Fx.Morph(carouselElement, {transition: Fx.Transitions.Expo.easeOut});
403 this.carouselElement.normalHeight = carouselElement.offsetHeight;
404 if (this.options.showCarouselLabel)
405 this.carouselLabel = new Element('p').addClass('label').injectInside(carouselElement);
406 carouselWrapper = new Element('div').addClass('carouselWrapper').injectInside(carouselElement);
407 this.carouselWrapper = new Fx.Morph(carouselWrapper, {transition: Fx.Transitions.Expo.easeOut});
408 this.carouselWrapper.normalHeight = carouselWrapper.offsetHeight;
409 this.carouselInner = new Element('div').addClass('carouselInner').injectInside(carouselWrapper);
410 if (this.options.activateCarouselScroller)
412 this.carouselWrapper.scroller = new Scroller(carouselWrapper, {
417 this.carouselWrapper.elementScroller = new Fx.Scroll(carouselWrapper, {
419 onStart: this.carouselWrapper.scroller.stop.bind(this.carouselWrapper.scroller),
420 onComplete: this.carouselWrapper.scroller.start.bind(this.carouselWrapper.scroller)
424 fillCarousel: function() {
425 this.constructThumbnails();
426 this.carouselInner.normalWidth = ((this.maxIter * (this.options.thumbWidth + this.options.thumbSpacing + 2))+this.options.thumbSpacing) + "px";
427 if (this.options.carouselHorizontal)
428 this.carouselInner.style.width = this.carouselInner.normalWidth;
430 initCarousel: function () {
431 this.createCarousel();
433 if (this.options.carouselPreloader)
434 this.preloadThumbnails();
436 flushCarousel: function() {
437 this.thumbnailElements.each(function(myFx) {
438 myFx.element.dispose();
439 myFx = myFx.element = null;
441 this.thumbnailElements = [];
443 toggleCarousel: function() {
444 if (this.carouselActive)
447 this.showCarousel();
\r
449 showCarousel: function () {
450 this.fireEvent('onShowCarousel');
451 this.carouselContainer.start({
452 'opacity': this.options.carouselMaximizedOpacity,
454 }).chain(function() {
455 this.carouselActive = true;
456 this.carouselWrapper.scroller.start();
457 this.fireEvent('onCarouselShown');
458 this.carouselContainer.options.onComplete = null;
461 hideCarousel: function () {
462 this.fireEvent('onHideCarousel');
463 var targetTop = this.options.carouselMinimizedHeight - this.carouselContainer.normalHeight;
464 this.carouselContainer.start({
465 'opacity': this.options.carouselMinimizedOpacity,
467 }).chain(function() {
468 this.carouselActive = false;
469 this.carouselWrapper.scroller.stop();
470 this.fireEvent('onCarouselHidden');
471 this.carouselContainer.options.onComplete = null;
474 constructThumbnails: function () {
475 element = this.carouselInner;
476 for(i=0;i<this.galleryData.length;i++)
478 var currentImg = new Fx.Morph(new Element ('div').addClass("thumbnail").setStyles({
479 backgroundImage: "url('" + this.galleryData[i].thumbnail + "')",
480 backgroundPosition: "center center",
481 backgroundRepeat: 'no-repeat',
482 marginLeft: this.options.thumbSpacing + "px",
483 width: this.options.thumbWidth + "px",
484 height: this.options.thumbHeight + "px"
485 }).injectInside(element), {duration: 200}).start({
486 'opacity': this.options.thumbIdleOpacity
488 currentImg.element.addEvents({
489 'mouseover': function (myself) {
491 myself.start({'opacity': 0.99});
492 if (this.options.showCarouselLabel)
493 $(this.carouselLabel).set('html', '<span class="number">' + (myself.relatedImage.number + 1) + "/" + this.maxIter + ":</span> " + myself.relatedImage.title);
494 }.pass(currentImg, this),
495 'mouseout': function (myself) {
497 myself.start({'opacity': this.options.thumbIdleOpacity});
498 }.pass(currentImg, this),
499 'click': function (myself) {
500 this.goTo(myself.relatedImage.number);
501 if (this.options.thumbCloseCarousel&&(!this.options.useExternalCarousel))
503 }.pass(currentImg, this)
\r
506 currentImg.relatedImage = this.galleryData[i];
507 this.thumbnailElements[parseInt(i)] = currentImg;
510 log: function(value) {
514 preloadThumbnails: function() {
516 for(i=0;i<this.galleryData.length;i++)
518 thumbnails[parseInt(i)] = this.galleryData[i].thumbnail;
520 this.thumbnailPreloader = new Preloader();
521 if (!this.options.useExternalCarousel)
522 this.thumbnailPreloader.addEvent('onComplete', function() {
523 var textShowCarousel = formatString(this.options.textShowCarousel, this.currentIter+1, this.maxIter);
524 this.carouselBtn.set('html', textShowCarousel).setProperty('title', textShowCarousel);
526 this.thumbnailPreloader.load(thumbnails);
528 clearThumbnailsHighlights: function()
530 for(i=0;i<this.galleryData.length;i++)
532 this.thumbnailElements[i].cancel();
533 this.thumbnailElements[i].start(0.2);
536 changeThumbnailsSize: function(width, height)
538 for(i=0;i<this.galleryData.length;i++)
540 this.thumbnailElements[i].cancel();
541 this.thumbnailElements[i].element.setStyles({
542 'width': width + "px",
543 'height': height + "px"
547 centerCarouselOn: function(num) {
548 if (!this.carouselWallMode)
550 var carouselElement = this.thumbnailElements[num];
551 var position = carouselElement.element.offsetLeft + (carouselElement.element.offsetWidth / 2);
552 var carouselWidth = this.carouselWrapper.element.offsetWidth;
553 var carouselInnerWidth = this.carouselInner.offsetWidth;
554 var diffWidth = carouselWidth / 2;
555 var scrollPos = position-diffWidth;
556 this.carouselWrapper.elementScroller.start(scrollPos,0);
559 initInfoSlideshow: function() {
560 /*if (this.slideInfoZone.element)
561 this.slideInfoZone.element.remove();*/
562 this.slideInfoZone = new Fx.Morph(new Element('div').addClass('slideInfoZone').injectInside($(this.galleryElement))).set({'opacity':0});
563 var slideInfoZoneTitle = new Element('h2').injectInside(this.slideInfoZone.element);
564 var slideInfoZoneDescription = new Element('p').injectInside(this.slideInfoZone.element);
565 this.slideInfoZone.normalHeight = this.slideInfoZone.element.offsetHeight;
566 this.slideInfoZone.element.setStyle('opacity',0);
568 changeInfoSlideShow: function()
570 this.hideInfoSlideShow.delay(10, this);
571 this.showInfoSlideShow.delay(500, this);
573 showInfoSlideShow: function() {
574 this.fireEvent('onShowInfopane');
575 this.slideInfoZone.cancel();
576 element = this.slideInfoZone.element;
577 element.getElement('h2').set('html', this.galleryData[this.currentIter].title);
578 element.getElement('p').set('html', this.galleryData[this.currentIter].description);
579 if(this.options.slideInfoZoneSlide)
580 this.slideInfoZone.start({'opacity': [0, this.options.slideInfoZoneOpacity], 'height': [0, this.slideInfoZone.normalHeight]});
582 this.slideInfoZone.start({'opacity': [0, this.options.slideInfoZoneOpacity]});
583 if (this.options.showCarousel)
584 this.slideInfoZone.chain(this.centerCarouselOn.pass(this.currentIter, this));
585 return this.slideInfoZone;
587 hideInfoSlideShow: function() {
588 this.fireEvent('onHideInfopane');
589 this.slideInfoZone.cancel();
590 if(this.options.slideInfoZoneSlide)
591 this.slideInfoZone.start({'opacity': 0, 'height': 0});
593 this.slideInfoZone.start({'opacity': 0});
594 return this.slideInfoZone;
596 makeLink: function(num) {
597 this.currentLink.setProperties({
598 href: this.galleryData[num].link,
599 title: this.galleryData[num].linkTitle
601 if (!((this.options.embedLinks) && (!this.options.showArrows) && (!this.options.showCarousel)))
602 this.currentLink.setStyle('display', 'block');
604 clearLink: function() {
605 this.currentLink.setProperties({href: '', title: ''});
606 if (!((this.options.embedLinks) && (!this.options.showArrows) && (!this.options.showCarousel)))
607 this.currentLink.setStyle('display', 'none');
609 makeReMooz: function() {
610 this.currentLink.setProperties({
613 this.currentLink.setStyles({
617 this.galleryElements[this.currentIter].element.set('title', this.galleryData[this.currentIter].title + ' :: ' + this.galleryData[this.currentIter].description);
618 this.ReMooz = new ReMooz(this.galleryElements[this.currentIter].element, {
619 link: this.galleryData[this.currentIter].link,
625 var img = this.galleryElements[this.currentIter];
626 var coords = img.element.getCoordinates();
628 delete coords.bottom;
630 widthDiff = coords.width - img.width;
631 heightDiff = coords.height - img.height;
633 coords.width = img.width;
634 coords.height = img.height;
636 coords.left += Math.ceil(widthDiff/2)+1;
637 coords.top += Math.ceil(heightDiff/2)+1;
639 this.ReMooz.getOriginCoordinates = function(coords) {
641 }.bind(this, coords);
642 this.currentLink.onclick = function () {
643 this.ReMooz.open.bind(this.ReMooz)();
647 /* To change the gallery data, those two functions : */
648 flushGallery: function() {
649 this.galleryElements.each(function(myFx) {
650 myFx.element.dispose();
651 myFx = myFx.element = null;
653 this.galleryElements = [];
655 changeData: function(data) {
656 this.galleryData = data;
659 if (this.options.showCarousel) this.flushCarousel();
660 this.constructElements();
661 if (this.options.showCarousel) this.fillCarousel();
662 if (this.options.showInfopane) this.hideInfoSlideShow();
668 /* Plugins: HistoryManager */
669 initHistory: function() {
670 this.fireEvent('onHistoryInit');
671 this.historyKey = this.galleryElement.id + '-picture';
672 if (this.options.customHistoryKey)
673 this.historyKey = this.options.customHistoryKey;
675 this.history = new History.Route({
677 pattern: this.historyKey + '\\((\\d+)\\)',
678 generate: function(values) {
679 return [this.historyKey, '(', values[0], ')'].join('')
681 onMatch: function(values, defaults) {
682 if (parseInt(values[0])-1 < this.maxIter)
683 this.goTo(parseInt(values[0])-1);
686 this.addEvent('onChanged', function(){
687 this.history.setValue(0, this.currentIter+1);
688 this.history.defaults=[this.currentIter+1];
690 this.fireEvent('onHistoryInited');
693 gallery = new Class(gallery);
695 gallery.Transitions = new Hash ({
696 fade: function(oldFx, newFx, oldPos, newPos){
697 oldFx.options.transition = newFx.options.transition = Fx.Transitions.linear;
698 oldFx.options.duration = newFx.options.duration = this.options.fadeDuration;
699 if (newPos > oldPos) newFx.start({opacity: 1});
702 newFx.set({opacity: 1});
703 oldFx.start({opacity: 0});
706 crossfade: function(oldFx, newFx, oldPos, newPos){
707 oldFx.options.transition = newFx.options.transition = Fx.Transitions.linear;
708 oldFx.options.duration = newFx.options.duration = this.options.fadeDuration;
709 newFx.start({opacity: 1});
710 oldFx.start({opacity: 0});
712 fadebg: function(oldFx, newFx, oldPos, newPos){
713 oldFx.options.transition = newFx.options.transition = Fx.Transitions.linear;
714 oldFx.options.duration = newFx.options.duration = this.options.fadeDuration / 2;
715 oldFx.start({opacity: 0}).chain(newFx.start.pass([{opacity: 1}], newFx));
719 /* All code copyright 2007 Jonathan Schemoul */
721 /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
722 * Follows: Preloader (class)
723 * Simple class for preloading images with support for progress reporting
724 * Copyright 2007 Tomocchino.
725 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
727 var Preloader = new Class({
729 Implements: [Events, Options],
736 initialize: function(options){
737 this.setOptions(options);
740 load: function(sources) {
743 this.sources = this.temps = sources;
744 this.total = this. sources.length;
746 this.fireEvent('onStart', [this.index, this.total]);
747 this.timer = this.progress.periodical(this.options.period, this);
749 this.sources.each(function(source, index){
750 this.images[index] = new Asset.image(this.options.root + source, {
751 'onload' : function(){ this.index++; if(this.images[index]) this.fireEvent('onLoad', [this.images[index], index, source]); }.bind(this),
752 'onerror' : function(){ this.index++; this.fireEvent('onError', [this.images.splice(index, 1), index, source]); }.bind(this),
753 'onabort' : function(){ this.index++; this.fireEvent('onError', [this.images.splice(index, 1), index, source]); }.bind(this)
758 progress: function() {
759 this.fireEvent('onProgress', [Math.min(this.index, this.total), this.total]);
760 if(this.index >= this.total) this.complete();
763 complete: function(){
765 this.fireEvent('onComplete', [this.images]);
774 /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
775 * Follows: formatString (function)
776 * Original name: Yahoo.Tools.printf
778 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
780 function formatString() {
781 var num = arguments.length;
782 var oStr = arguments[0];
783 for (var i = 1; i < num; i++) {
784 var pattern = "\\{" + (i-1) + "\\}";
785 var re = new RegExp(pattern, "g");
786 oStr = oStr.replace(re, arguments[i]);