|
1 /* |
|
2 This file is part of JonDesign's SmoothGallery v2.0. |
|
3 |
|
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. |
|
8 |
|
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. |
|
13 |
|
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 |
|
17 |
|
18 Main Developer: Jonathan Schemoul (JonDesign: http://www.jondesign.net/) |
|
19 Contributed code by: |
|
20 - Christian Ehret (bugfix) |
|
21 - Nitrix (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 |
|
25 Many thanks to: |
|
26 - The mootools team for the great mootools lib, and it's help and support throughout the project. |
|
27 */ |
|
28 |
|
29 // declaring the class |
|
30 var gallery = { |
|
31 initialize: function(element, options) { |
|
32 this.setOptions({ |
|
33 showArrows: true, |
|
34 showCarousel: true, |
|
35 showInfopane: true, |
|
36 embedLinks: true, |
|
37 fadeDuration: 500, |
|
38 timed: false, |
|
39 delay: 9000, |
|
40 preloader: true, |
|
41 preloaderImage: true, |
|
42 preloaderErrorImage: true, |
|
43 /* Data retrieval */ |
|
44 manualData: [], |
|
45 populateFrom: false, |
|
46 populateData: true, |
|
47 destroyAfterPopulate: true, |
|
48 elementSelector: "div.imageElement", |
|
49 titleSelector: "h3", |
|
50 subtitleSelector: "p", |
|
51 linkSelector: "a.open", |
|
52 imageSelector: "img.full", |
|
53 thumbnailSelector: "img.thumbnail", |
|
54 defaultTransition: "fade", |
|
55 /* InfoPane options */ |
|
56 slideInfoZoneOpacity: 1.0, |
|
57 slideInfoZoneSlide: true, |
|
58 /* Carousel options */ |
|
59 carouselMinimizedOpacity: 0.4, |
|
60 carouselMinimizedHeight: 20, |
|
61 carouselMaximizedOpacity: 0.9, |
|
62 thumbHeight: 75, |
|
63 thumbWidth: 100, |
|
64 thumbSpacing: 13, |
|
65 thumbIdleOpacity: 0.2, |
|
66 |
|
67 showCarouselLabel: true, |
|
68 thumbCloseCarousel: true, |
|
69 useThumbGenerator: false, |
|
70 thumbGenerator: 'resizer.php', |
|
71 useExternalCarousel: false, |
|
72 carouselElement: false, |
|
73 carouselHorizontal: true, |
|
74 activateCarouselScroller: true, |
|
75 carouselPreloader: true, |
|
76 textPreloadingCarousel: 'Loading...', |
|
77 /* CSS Classes */ |
|
78 baseClass: 'jdGallery', |
|
79 withArrowsClass: 'withArrows', |
|
80 /* Plugins: HistoryManager */ |
|
81 useHistoryManager: false, |
|
82 customHistoryKey: false |
|
83 }, options); |
|
84 this.fireEvent('onInit'); |
|
85 this.currentIter = 0; |
|
86 this.lastIter = 0; |
|
87 this.maxIter = 0; |
|
88 this.galleryElement = element; |
|
89 this.galleryData = this.options.manualData; |
|
90 this.galleryInit = 1; |
|
91 this.galleryElements = Array(); |
|
92 this.thumbnailElements = Array(); |
|
93 this.galleryElement.addClass(this.options.baseClass); |
|
94 |
|
95 this.populateFrom = element; |
|
96 if (this.options.populateFrom) |
|
97 this.populateFrom = this.options.populateFrom; |
|
98 if (this.options.populateData) |
|
99 this.populateData(); |
|
100 element.style.display="block"; |
|
101 |
|
102 if (this.options.useHistoryManager) |
|
103 this.initHistory(); |
|
104 |
|
105 if (this.options.embedLinks) |
|
106 { |
|
107 this.currentLink = new Element('a').addClass('open').setProperties({ |
|
108 href: '#', |
|
109 title: '' |
|
110 }).injectInside(element); |
|
111 if ((!this.options.showArrows) && (!this.options.showCarousel)) |
|
112 this.galleryElement = element = this.currentLink; |
|
113 else |
|
114 this.currentLink.setStyle('display', 'none'); |
|
115 } |
|
116 |
|
117 this.constructElements(); |
|
118 if ((this.galleryData.length>1)&&(this.options.showArrows)) |
|
119 { |
|
120 var leftArrow = new Element('a').addClass('left').addEvent( |
|
121 'click', |
|
122 this.prevItem.bind(this) |
|
123 ).injectInside(element); |
|
124 var rightArrow = new Element('a').addClass('right').addEvent( |
|
125 'click', |
|
126 this.nextItem.bind(this) |
|
127 ).injectInside(element); |
|
128 this.galleryElement.addClass(this.options.withArrowsClass); |
|
129 } |
|
130 this.loadingElement = new Element('div').addClass('loadingElement').injectInside(element); |
|
131 if (this.options.showInfopane) this.initInfoSlideshow(); |
|
132 if (this.options.showCarousel) this.initCarousel(); |
|
133 this.doSlideShow(1); |
|
134 }, |
|
135 populateData: function() { |
|
136 currentArrayPlace = this.galleryData.length; |
|
137 options = this.options; |
|
138 var data = $A(this.galleryData); |
|
139 data.extend(this.populateGallery(this.populateFrom, currentArrayPlace)); |
|
140 this.galleryData = data; |
|
141 this.fireEvent('onPopulated'); |
|
142 }, |
|
143 populateGallery: function(element, startNumber) { |
|
144 var data = []; |
|
145 options = this.options; |
|
146 currentArrayPlace = startNumber; |
|
147 element.getElements(options.elementSelector).each(function(el) { |
|
148 elementDict = { |
|
149 image: el.getElement(options.imageSelector).getProperty('src'), |
|
150 number: currentArrayPlace, |
|
151 transition: this.options.defaultTransition |
|
152 }; |
|
153 elementDict.extend = $extend; |
|
154 if ((options.showInfopane) | (options.showCarousel)) |
|
155 elementDict.extend({ |
|
156 title: el.getElement(options.titleSelector).innerHTML, |
|
157 description: el.getElement(options.subtitleSelector).innerHTML |
|
158 }); |
|
159 if (options.embedLinks) |
|
160 elementDict.extend({ |
|
161 link: el.getElement(options.linkSelector).href||false, |
|
162 linkTitle: el.getElement(options.linkSelector).title||false, |
|
163 linkTarget: el.getElement(options.linkSelector).getProperty('target')||false |
|
164 }); |
|
165 if ((!options.useThumbGenerator) && (options.showCarousel)) |
|
166 elementDict.extend({ |
|
167 thumbnail: el.getElement(options.thumbnailSelector).getProperty('src') |
|
168 }); |
|
169 else if (options.useThumbGenerator) |
|
170 elementDict.extend({ |
|
171 thumbnail: options.thumbGenerator + '?imgfile=' + elementDict.image + '&max_width=' + options.thumbWidth + '&max_height=' + options.thumbHeight |
|
172 }); |
|
173 |
|
174 data.extend([elementDict]); |
|
175 currentArrayPlace++; |
|
176 if (this.options.destroyAfterPopulate) |
|
177 el.remove(); |
|
178 }); |
|
179 return data; |
|
180 }, |
|
181 constructElements: function() { |
|
182 el = this.galleryElement; |
|
183 this.maxIter = this.galleryData.length; |
|
184 var currentImg; |
|
185 for(i=0;i<this.galleryData.length;i++) |
|
186 { |
|
187 var currentImg = new Fx.Styles( |
|
188 new Element('div').addClass('slideElement').setStyles({ |
|
189 'position':'absolute', |
|
190 'left':'0px', |
|
191 'right':'0px', |
|
192 'margin':'0px', |
|
193 'padding':'0px', |
|
194 'backgroundPosition':"center center", |
|
195 'opacity':'0' |
|
196 }).injectInside(el), |
|
197 'opacity', |
|
198 {duration: this.options.fadeDuration} |
|
199 ); |
|
200 if (this.options.preloader) |
|
201 { |
|
202 currentImg.source = this.galleryData[i].image; |
|
203 currentImg.loaded = false; |
|
204 currentImg.load = function(imageStyle) { |
|
205 if (!imageStyle.loaded) { |
|
206 new Asset.image(imageStyle.source, { |
|
207 'onload' : function(img){ |
|
208 img.element.setStyle( |
|
209 'backgroundImage', |
|
210 "url('" + img.source + "')") |
|
211 img.loaded = true; |
|
212 }.bind(this, imageStyle) |
|
213 }); |
|
214 } |
|
215 }.pass(currentImg, this); |
|
216 } else { |
|
217 currentImg.element.setStyle('backgroundImage', |
|
218 "url('" + this.galleryData[i].image + "')"); |
|
219 } |
|
220 this.galleryElements[parseInt(i)] = currentImg; |
|
221 } |
|
222 }, |
|
223 destroySlideShow: function(element) { |
|
224 var myClassName = element.className; |
|
225 var newElement = new Element('div').addClass('myClassName'); |
|
226 element.parentNode.replaceChild(newElement, element); |
|
227 }, |
|
228 startSlideShow: function() { |
|
229 this.fireEvent('onStart'); |
|
230 this.loadingElement.style.display = "none"; |
|
231 this.lastIter = this.maxIter - 1; |
|
232 this.currentIter = 0; |
|
233 this.galleryInit = 0; |
|
234 this.galleryElements[parseInt(this.currentIter)].set({opacity: 1}); |
|
235 if (this.options.showInfopane) |
|
236 this.showInfoSlideShow.delay(1000, this); |
|
237 var textShowCarousel = formatString(this.options.textShowCarousel, this.currentIter+1, this.maxIter); |
|
238 if (this.options.showCarousel&&(!this.options.carouselPreloader)) |
|
239 this.carouselBtn.setHTML(textShowCarousel).setProperty('title', textShowCarousel); |
|
240 this.prepareTimer(); |
|
241 if (this.options.embedLinks) |
|
242 this.makeLink(this.currentIter); |
|
243 }, |
|
244 nextItem: function() { |
|
245 this.fireEvent('onNextCalled'); |
|
246 this.nextIter = this.currentIter+1; |
|
247 if (this.nextIter >= this.maxIter) |
|
248 this.nextIter = 0; |
|
249 this.galleryInit = 0; |
|
250 this.goTo(this.nextIter); |
|
251 }, |
|
252 prevItem: function() { |
|
253 this.fireEvent('onPreviousCalled'); |
|
254 this.nextIter = this.currentIter-1; |
|
255 if (this.nextIter <= -1) |
|
256 this.nextIter = this.maxIter - 1; |
|
257 this.galleryInit = 0; |
|
258 this.goTo(this.nextIter); |
|
259 }, |
|
260 goTo: function(num) { |
|
261 this.clearTimer(); |
|
262 if(this.options.preloader) |
|
263 { |
|
264 this.galleryElements[num].load(); |
|
265 if (num==0) |
|
266 this.galleryElements[this.maxIter - 1].load(); |
|
267 else |
|
268 this.galleryElements[num - 1].load(); |
|
269 if (num==(this.maxIter - 1)) |
|
270 this.galleryElements[0].load(); |
|
271 else |
|
272 this.galleryElements[num + 1].load(); |
|
273 |
|
274 } |
|
275 if (this.options.embedLinks) |
|
276 this.clearLink(); |
|
277 if (this.options.showInfopane) |
|
278 { |
|
279 this.slideInfoZone.clearChain(); |
|
280 this.hideInfoSlideShow().chain(this.changeItem.pass(num, this)); |
|
281 } else |
|
282 this.currentChangeDelay = this.changeItem.delay(500, this, num); |
|
283 if (this.options.embedLinks) |
|
284 this.makeLink(num); |
|
285 this.prepareTimer(); |
|
286 /*if (this.options.showCarousel) |
|
287 this.clearThumbnailsHighlights();*/ |
|
288 }, |
|
289 changeItem: function(num) { |
|
290 this.fireEvent('onStartChanging'); |
|
291 this.galleryInit = 0; |
|
292 if (this.currentIter != num) |
|
293 { |
|
294 for(i=0;i<this.maxIter;i++) |
|
295 { |
|
296 if ((i != this.currentIter)) this.galleryElements[i].set({opacity: 0}); |
|
297 } |
|
298 gallery.Transitions[this.galleryData[num].transition].pass([ |
|
299 this.galleryElements[this.currentIter], |
|
300 this.galleryElements[num], |
|
301 this.currentIter, |
|
302 num], this)(); |
|
303 this.currentIter = num; |
|
304 } |
|
305 var textShowCarousel = formatString(this.options.textShowCarousel, num+1, this.maxIter); |
|
306 if (this.options.showCarousel) |
|
307 this.carouselBtn.setHTML(textShowCarousel).setProperty('title', textShowCarousel); |
|
308 this.doSlideShow.bind(this)(); |
|
309 this.fireEvent('onChanged'); |
|
310 }, |
|
311 clearTimer: function() { |
|
312 if (this.options.timed) |
|
313 $clear(this.timer); |
|
314 }, |
|
315 prepareTimer: function() { |
|
316 if (this.options.timed) |
|
317 this.timer = this.nextItem.delay(this.options.delay, this); |
|
318 }, |
|
319 doSlideShow: function(position) { |
|
320 if (this.galleryInit == 1) |
|
321 { |
|
322 imgPreloader = new Image(); |
|
323 imgPreloader.onload=function(){ |
|
324 this.startSlideShow.delay(10, this); |
|
325 }.bind(this); |
|
326 imgPreloader.src = this.galleryData[0].image; |
|
327 if(this.options.preloader) |
|
328 this.galleryElements[0].load(); |
|
329 } else { |
|
330 if (this.options.showInfopane) |
|
331 { |
|
332 if (this.options.showInfopane) |
|
333 { |
|
334 this.showInfoSlideShow.delay((500 + this.options.fadeDuration), this); |
|
335 } else |
|
336 if ((this.options.showCarousel)&&(this.options.activateCarouselScroller)) |
|
337 this.centerCarouselOn(position); |
|
338 } |
|
339 } |
|
340 }, |
|
341 createCarousel: function() { |
|
342 var carouselElement; |
|
343 if (!this.options.useExternalCarousel) |
|
344 { |
|
345 var carouselContainerElement = new Element('div').addClass('carouselContainer').injectInside(this.galleryElement); |
|
346 this.carouselContainer = new Fx.Styles(carouselContainerElement, {transition: Fx.Transitions.expoOut}); |
|
347 this.carouselContainer.normalHeight = carouselContainerElement.offsetHeight; |
|
348 this.carouselContainer.set({'opacity': this.options.carouselMinimizedOpacity, 'top': (this.options.carouselMinimizedHeight - this.carouselContainer.normalHeight)}); |
|
349 this.carouselBtn = new Element('a').addClass('carouselBtn').setProperties({ |
|
350 title: this.options.textShowCarousel |
|
351 }).injectInside(carouselContainerElement); |
|
352 if(this.options.carouselPreloader) |
|
353 this.carouselBtn.setHTML(this.options.textPreloadingCarousel); |
|
354 else |
|
355 this.carouselBtn.setHTML(this.options.textShowCarousel); |
|
356 this.carouselBtn.addEvent( |
|
357 'click', |
|
358 function () { |
|
359 this.carouselContainer.clearTimer(); |
|
360 this.toggleCarousel(); |
|
361 }.bind(this) |
|
362 ); |
|
363 this.carouselActive = false; |
|
364 |
|
365 carouselElement = new Element('div').addClass('carousel').injectInside(carouselContainerElement); |
|
366 this.carousel = new Fx.Styles(carouselElement); |
|
367 } else { |
|
368 carouselElement = $(this.options.carouselElement).addClass('jdExtCarousel'); |
|
369 } |
|
370 this.carouselElement = new Fx.Styles(carouselElement, {transition: Fx.Transitions.expoOut}); |
|
371 this.carouselElement.normalHeight = carouselElement.offsetHeight; |
|
372 if (this.options.showCarouselLabel) |
|
373 this.carouselLabel = new Element('p').addClass('label').injectInside(carouselElement); |
|
374 carouselWrapper = new Element('div').addClass('carouselWrapper').injectInside(carouselElement); |
|
375 this.carouselWrapper = new Fx.Styles(carouselWrapper, {transition: Fx.Transitions.expoOut}); |
|
376 this.carouselWrapper.normalHeight = carouselWrapper.offsetHeight; |
|
377 this.carouselInner = new Element('div').addClass('carouselInner').injectInside(carouselWrapper); |
|
378 if (this.options.activateCarouselScroller) |
|
379 { |
|
380 this.carouselWrapper.scroller = new Scroller(carouselWrapper, { |
|
381 area: 100, |
|
382 velocity: 0.2 |
|
383 }) |
|
384 |
|
385 this.carouselWrapper.elementScroller = new Fx.Scroll(carouselWrapper, { |
|
386 duration: 400, |
|
387 onStart: this.carouselWrapper.scroller.stop.bind(this.carouselWrapper.scroller), |
|
388 onComplete: this.carouselWrapper.scroller.start.bind(this.carouselWrapper.scroller) |
|
389 }); |
|
390 } |
|
391 }, |
|
392 fillCarousel: function() { |
|
393 this.constructThumbnails(); |
|
394 this.carouselInner.normalWidth = ((this.maxIter * (this.options.thumbWidth + this.options.thumbSpacing + 2))+this.options.thumbSpacing) + "px"; |
|
395 this.carouselInner.style.width = this.carouselInner.normalWidth; |
|
396 }, |
|
397 initCarousel: function () { |
|
398 this.createCarousel(); |
|
399 this.fillCarousel(); |
|
400 if (this.options.carouselPreloader) |
|
401 this.preloadThumbnails(); |
|
402 }, |
|
403 flushCarousel: function() { |
|
404 this.thumbnailElements.each(function(myFx) { |
|
405 myFx.element.remove(); |
|
406 myFx = myFx.element = null; |
|
407 }); |
|
408 this.thumbnailElements = []; |
|
409 }, |
|
410 toggleCarousel: function() { |
|
411 if (this.carouselActive) |
|
412 this.hideCarousel(); |
|
413 else |
|
414 this.showCarousel(); |
|
415 }, |
|
416 showCarousel: function () { |
|
417 this.fireEvent('onShowCarousel'); |
|
418 this.carouselContainer.start({ |
|
419 'opacity': this.options.carouselMaximizedOpacity, |
|
420 'top': 0 |
|
421 }).chain(function() { |
|
422 this.carouselActive = true; |
|
423 this.carouselWrapper.scroller.start(); |
|
424 this.fireEvent('onCarouselShown'); |
|
425 this.carouselContainer.options.onComplete = null; |
|
426 }.bind(this)); |
|
427 }, |
|
428 hideCarousel: function () { |
|
429 this.fireEvent('onHideCarousel'); |
|
430 var targetTop = this.options.carouselMinimizedHeight - this.carouselContainer.normalHeight; |
|
431 this.carouselContainer.start({ |
|
432 'opacity': this.options.carouselMinimizedOpacity, |
|
433 'top': targetTop |
|
434 }).chain(function() { |
|
435 this.carouselActive = false; |
|
436 this.carouselWrapper.scroller.stop(); |
|
437 this.fireEvent('onCarouselHidden'); |
|
438 this.carouselContainer.options.onComplete = null; |
|
439 }.bind(this)); |
|
440 }, |
|
441 constructThumbnails: function () { |
|
442 element = this.carouselInner; |
|
443 for(i=0;i<this.galleryData.length;i++) |
|
444 { |
|
445 var currentImg = new Fx.Style(new Element ('div').addClass("thumbnail").setStyles({ |
|
446 backgroundImage: "url('" + this.galleryData[i].thumbnail + "')", |
|
447 backgroundPosition: "center center", |
|
448 backgroundRepeat: 'no-repeat', |
|
449 marginLeft: this.options.thumbSpacing + "px", |
|
450 width: this.options.thumbWidth + "px", |
|
451 height: this.options.thumbHeight + "px" |
|
452 }).injectInside(element), "opacity", {duration: 200}).set(this.options.thumbIdleOpacity); |
|
453 currentImg.element.addEvents({ |
|
454 'mouseover': function (myself) { |
|
455 myself.clearTimer(); |
|
456 myself.start(0.99); |
|
457 if (this.options.showCarouselLabel) |
|
458 $(this.carouselLabel).setHTML('<span class="number">' + (myself.relatedImage.number + 1) + "/" + this.maxIter + ":</span> " + myself.relatedImage.title); |
|
459 }.pass(currentImg, this), |
|
460 'mouseout': function (myself) { |
|
461 myself.clearTimer(); |
|
462 myself.start(this.options.thumbIdleOpacity); |
|
463 }.pass(currentImg, this), |
|
464 'click': function (myself) { |
|
465 this.goTo(myself.relatedImage.number); |
|
466 if (this.options.thumbCloseCarousel) |
|
467 this.hideCarousel(); |
|
468 }.pass(currentImg, this) |
|
469 }); |
|
470 |
|
471 currentImg.relatedImage = this.galleryData[i]; |
|
472 this.thumbnailElements[parseInt(i)] = currentImg; |
|
473 } |
|
474 }, |
|
475 log: function(value) { |
|
476 if(console.log) |
|
477 console.log(value); |
|
478 }, |
|
479 preloadThumbnails: function() { |
|
480 var thumbnails = []; |
|
481 for(i=0;i<this.galleryData.length;i++) |
|
482 { |
|
483 thumbnails[parseInt(i)] = this.galleryData[i].thumbnail; |
|
484 } |
|
485 this.thumbnailPreloader = new Preloader(); |
|
486 this.thumbnailPreloader.addEvent('onComplete', function() { |
|
487 var textShowCarousel = formatString(this.options.textShowCarousel, this.currentIter+1, this.maxIter); |
|
488 this.carouselBtn.setHTML(textShowCarousel).setProperty('title', textShowCarousel); |
|
489 }.bind(this)); |
|
490 this.thumbnailPreloader.load(thumbnails); |
|
491 }, |
|
492 clearThumbnailsHighlights: function() |
|
493 { |
|
494 for(i=0;i<this.galleryData.length;i++) |
|
495 { |
|
496 this.thumbnailElements[i].clearTimer(); |
|
497 this.thumbnailElements[i].start(0.2); |
|
498 } |
|
499 }, |
|
500 changeThumbnailsSize: function(width, height) |
|
501 { |
|
502 for(i=0;i<this.galleryData.length;i++) |
|
503 { |
|
504 this.thumbnailElements[i].clearTimer(); |
|
505 this.thumbnailElements[i].element.setStyles({ |
|
506 'width': width + "px", |
|
507 'height': height + "px" |
|
508 }); |
|
509 } |
|
510 }, |
|
511 centerCarouselOn: function(num) { |
|
512 if (!this.carouselWallMode) |
|
513 { |
|
514 var carouselElement = this.thumbnailElements[num]; |
|
515 var position = carouselElement.element.offsetLeft + (carouselElement.element.offsetWidth / 2); |
|
516 var carouselWidth = this.carouselWrapper.element.offsetWidth; |
|
517 var carouselInnerWidth = this.carouselInner.offsetWidth; |
|
518 var diffWidth = carouselWidth / 2; |
|
519 var scrollPos = position-diffWidth; |
|
520 this.carouselWrapper.elementScroller.scrollTo(scrollPos,0); |
|
521 } |
|
522 }, |
|
523 initInfoSlideshow: function() { |
|
524 /*if (this.slideInfoZone.element) |
|
525 this.slideInfoZone.element.remove();*/ |
|
526 this.slideInfoZone = new Fx.Styles(new Element('div').addClass('slideInfoZone').injectInside($(this.galleryElement))).set({'opacity':0}); |
|
527 var slideInfoZoneTitle = new Element('h2').injectInside(this.slideInfoZone.element); |
|
528 var slideInfoZoneDescription = new Element('p').injectInside(this.slideInfoZone.element); |
|
529 this.slideInfoZone.normalHeight = this.slideInfoZone.element.offsetHeight; |
|
530 this.slideInfoZone.element.setStyle('opacity',0); |
|
531 }, |
|
532 changeInfoSlideShow: function() |
|
533 { |
|
534 this.hideInfoSlideShow.delay(10, this); |
|
535 this.showInfoSlideShow.delay(500, this); |
|
536 }, |
|
537 showInfoSlideShow: function() { |
|
538 this.fireEvent('onShowInfopane'); |
|
539 this.slideInfoZone.clearTimer(); |
|
540 element = this.slideInfoZone.element; |
|
541 element.getElement('h2').setHTML(this.galleryData[this.currentIter].title); |
|
542 element.getElement('p').setHTML(this.galleryData[this.currentIter].description); |
|
543 if(this.options.slideInfoZoneSlide) |
|
544 this.slideInfoZone.start({'opacity': [0, this.options.slideInfoZoneOpacity], 'height': [0, this.slideInfoZone.normalHeight]}); |
|
545 else |
|
546 this.slideInfoZone.start({'opacity': [0, this.options.slideInfoZoneOpacity]}); |
|
547 if (this.options.showCarousel) |
|
548 this.slideInfoZone.chain(this.centerCarouselOn.pass(this.currentIter, this)); |
|
549 return this.slideInfoZone; |
|
550 }, |
|
551 hideInfoSlideShow: function() { |
|
552 this.fireEvent('onHideInfopane'); |
|
553 this.slideInfoZone.clearTimer(); |
|
554 if(this.options.slideInfoZoneSlide) |
|
555 this.slideInfoZone.start({'opacity': 0, 'height': 0}); |
|
556 else |
|
557 this.slideInfoZone.start({'opacity': 0}); |
|
558 return this.slideInfoZone; |
|
559 }, |
|
560 makeLink: function(num) { |
|
561 this.currentLink.setProperties({ |
|
562 href: this.galleryData[num].link, |
|
563 title: this.galleryData[num].linkTitle |
|
564 }) |
|
565 if (!((this.options.embedLinks) && (!this.options.showArrows) && (!this.options.showCarousel))) |
|
566 this.currentLink.setStyle('display', 'block'); |
|
567 }, |
|
568 clearLink: function() { |
|
569 this.currentLink.setProperties({href: '', title: ''}); |
|
570 if (!((this.options.embedLinks) && (!this.options.showArrows) && (!this.options.showCarousel))) |
|
571 this.currentLink.setStyle('display', 'none'); |
|
572 }, |
|
573 /* To change the gallery data, those two functions : */ |
|
574 flushGallery: function() { |
|
575 this.galleryElements.each(function(myFx) { |
|
576 myFx.element.remove(); |
|
577 myFx = myFx.element = null; |
|
578 }); |
|
579 this.galleryElements = []; |
|
580 }, |
|
581 changeData: function(data) { |
|
582 this.galleryData = data; |
|
583 this.clearTimer(); |
|
584 this.flushGallery(); |
|
585 if (this.options.showCarousel) this.flushCarousel(); |
|
586 this.constructElements(); |
|
587 if (this.options.showCarousel) this.fillCarousel(); |
|
588 if (this.options.showInfopane) this.hideInfoSlideShow(); |
|
589 this.galleryInit=1; |
|
590 this.lastIter=0; |
|
591 this.currentIter=0; |
|
592 this.doSlideShow(1); |
|
593 }, |
|
594 /* Plugins: HistoryManager */ |
|
595 initHistory: function() { |
|
596 this.fireEvent('onHistoryInit'); |
|
597 this.historyKey = this.galleryElement.id + '-picture'; |
|
598 if (this.options.customHistoryKey) |
|
599 this.historyKey = this.options.customHistoryKey(); |
|
600 this.history = HistoryManager.register( |
|
601 this.historyKey, |
|
602 [1], |
|
603 function(values) { |
|
604 if (parseInt(values[0])-1 < this.maxIter) |
|
605 this.goTo(parseInt(values[0])-1); |
|
606 }.bind(this), |
|
607 function(values) { |
|
608 return [this.historyKey, '(', values[0], ')'].join(''); |
|
609 }.bind(this), |
|
610 this.historyKey + '\\((\\d+)\\)'); |
|
611 this.addEvent('onChanged', function(){ |
|
612 this.history.setValue(0, this.currentIter+1); |
|
613 }.bind(this)); |
|
614 this.fireEvent('onHistoryInited'); |
|
615 } |
|
616 }; |
|
617 gallery = new Class(gallery); |
|
618 gallery.implement(new Events); |
|
619 gallery.implement(new Options); |
|
620 |
|
621 gallery.Transitions = new Abstract ({ |
|
622 fade: function(oldFx, newFx, oldPos, newPos){ |
|
623 oldFx.options.transition = newFx.options.transition = Fx.Transitions.linear; |
|
624 oldFx.options.duration = newFx.options.duration = this.options.fadeDuration; |
|
625 if (newPos > oldPos) newFx.start({opacity: 1}); |
|
626 else |
|
627 { |
|
628 newFx.set({opacity: 1}); |
|
629 oldFx.start({opacity: 0}); |
|
630 } |
|
631 }, |
|
632 crossfade: function(oldFx, newFx, oldPos, newPos){ |
|
633 oldFx.options.transition = newFx.options.transition = Fx.Transitions.linear; |
|
634 oldFx.options.duration = newFx.options.duration = this.options.fadeDuration; |
|
635 newFx.start({opacity: 1}); |
|
636 oldFx.start({opacity: 0}); |
|
637 }, |
|
638 fadebg: function(oldFx, newFx, oldPos, newPos){ |
|
639 oldFx.options.transition = newFx.options.transition = Fx.Transitions.linear; |
|
640 oldFx.options.duration = newFx.options.duration = this.options.fadeDuration / 2; |
|
641 oldFx.start({opacity: 0}).chain(newFx.start.pass([{opacity: 1}], newFx)); |
|
642 } |
|
643 }); |
|
644 |
|
645 /* All code copyright 2007 Jonathan Schemoul */ |
|
646 |
|
647 /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * |
|
648 * Follows: Preloader (class) |
|
649 * Simple class for preloading images with support for progress reporting |
|
650 * Copyright 2007 Tomocchino. |
|
651 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ |
|
652 |
|
653 var Preloader = new Class({ |
|
654 |
|
655 Implements: [Events, Options], |
|
656 |
|
657 options: { |
|
658 root : '', |
|
659 period : 100 |
|
660 }, |
|
661 |
|
662 initialize: function(options){ |
|
663 this.setOptions(options); |
|
664 }, |
|
665 |
|
666 load: function(sources) { |
|
667 this.index = 0; |
|
668 this.images = []; |
|
669 this.sources = this.temps = sources; |
|
670 this.total = this. sources.length; |
|
671 |
|
672 this.fireEvent('onStart', [this.index, this.total]); |
|
673 this.timer = this.progress.periodical(this.options.period, this); |
|
674 |
|
675 this.sources.each(function(source, index){ |
|
676 this.images[index] = new Asset.image(this.options.root + source, { |
|
677 'onload' : function(){ this.index++; if(this.images[index]) this.fireEvent('onLoad', [this.images[index], index, source]); }.bind(this), |
|
678 'onerror' : function(){ this.index++; this.fireEvent('onError', [this.images.splice(index, 1), index, source]); }.bind(this), |
|
679 'onabort' : function(){ this.index++; this.fireEvent('onError', [this.images.splice(index, 1), index, source]); }.bind(this) |
|
680 }); |
|
681 }, this); |
|
682 }, |
|
683 |
|
684 progress: function() { |
|
685 this.fireEvent('onProgress', [Math.min(this.index, this.total), this.total]); |
|
686 if(this.index >= this.total) this.complete(); |
|
687 }, |
|
688 |
|
689 complete: function(){ |
|
690 $clear(this.timer); |
|
691 this.fireEvent('onComplete', [this.images]); |
|
692 }, |
|
693 |
|
694 cancel: function(){ |
|
695 $clear(this.timer); |
|
696 } |
|
697 |
|
698 }); |
|
699 |
|
700 Preloader.implement(new Events, new Options); |
|
701 |
|
702 /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * |
|
703 * Follows: formatString (function) |
|
704 * Original name: Yahoo.Tools.printf |
|
705 * Copyright Yahoo. |
|
706 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ |
|
707 |
|
708 function formatString() { |
|
709 var num = arguments.length; |
|
710 var oStr = arguments[0]; |
|
711 for (var i = 1; i < num; i++) { |
|
712 var pattern = "\\{" + (i-1) + "\\}"; |
|
713 var re = new RegExp(pattern, "g"); |
|
714 oStr = oStr.replace(re, arguments[i]); |
|
715 } |
|
716 return oStr; |
|
717 } |