2 /**************************************************************
\r
6 Authors : Samuel Birch
\r
7 Desc : transitions between images
\r
8 Licence : Open Source MIT Licence
\r
10 **************************************************************/
\r
12 var slideShow = new Class({
\r
14 getOptions: function(){
\r
16 effect: 'fade', //fade|wipe|slide|random
\r
18 transition: Fx.Transitions.linear,
\r
19 direction: 'right', //top|right|bottom|left|random
\r
24 thumbnailCls: 'outline',
\r
25 backgroundSlider: false, //change to be an instance.
\r
26 loadingCls: 'loading',
\r
31 initialize: function(container, images, options){
\r
32 this.setOptions(this.getOptions(), options);
\r
34 this.container = $(container);
\r
35 this.container.setStyles({
\r
36 /* position: 'relative', */
\r
39 if(this.options.onClick){
\r
40 this.container.addEvent('click', function(){
\r
41 this.options.onClick(this.imageLoaded);
\r
46 this.imagesHolder = new Element('div').setStyles({
\r
47 position: 'absolute',
\r
49 top: this.container.getStyle('height'),
\r
54 }).injectInside(this.container);
\r
57 if($type(images) == 'string' && !this.options.thumbnails){
\r
59 $$('.'+images).each(function(el){
\r
60 imageList.push(el.src);
\r
61 el.injectInside(this.imagesHolder);
\r
63 this.images = imageList;
\r
65 }else if($type(images) == 'string' && this.options.thumbnails){
\r
68 this.thumbnails = $$('.'+images);
\r
69 this.thumbnails.each(function(el,i){
\r
70 srcList.push(el.href);
\r
71 imageList.push(el.getElement('img'));
\r
72 el.href = 'javascript:;';
\r
73 el.addEvent('click',function(){
\r
78 this.images = srcList;
\r
79 this.thumbnailImages = imageList;
\r
81 if(this.options.backgroundSlider){
\r
82 this.bgSlider = new BackgroundSlider(this.thumbnailImages,{mouseOver: false, duration: this.options.duration, className: this.options.thumbnailCls, padding:{top:0,right:-2,bottom:-2,left:0}});
\r
83 this.bgSlider.set(this.thumbnailImages[0]);
\r
88 this.images = images;
\r
93 this.loading = new Element('div').addClass(this.options.loadingCls).setStyles({
\r
94 position: 'absolute',
\r
99 width: this.container.getStyle('width'),
\r
100 height: this.container.getStyle('height')
\r
101 }).injectInside(this.container);
\r
103 this.oldImage = new Element('div').setStyles({
\r
104 position: 'absolute',
\r
105 overflow: 'hidden',
\r
109 width: this.container.getStyle('width'),
\r
110 height: this.container.getStyle('height')
\r
111 }).injectInside(this.container);
\r
113 this.newImage = this.oldImage.clone();
\r
114 this.newImage.injectInside(this.container);
\r
120 this.imageLoaded = 0;
\r
121 this.stopped = true;
\r
122 this.started = false;
\r
123 this.animating = false;
\r
124 window.addEvent('resize', this.reshow.bind(this));
\r
125 window.addEvent('scroll', this.reshow.bind(this));
\r
129 $clear(this.timer);
\r
130 this.loading.setStyle('display','block');
\r
136 for (i=0;i<this.images[this.image].length;i++) {
\r
137 width = this.images[this.image][i][0];
\r
138 height = this.images[this.image][i][1];
\r
139 img = this.images[this.image][i][2];
\r
140 if (width >= this.width || height >= this.height) {
\r
144 /* alert('req1 image '+img); */
\r
145 delete this.imageObj;
\r
148 this.imagesHolder.getElements('img').each(function(el){
\r
149 var src = this.images[this.image][i][2];
\r
150 /* alert('req2 image '+src); */
\r
152 this.imageObj = el;
\r
161 this.imageObj = new Asset.image(img, {onload: this.show.bind(this)});
\r
162 this.imageObj.set('width', width).set('height', height);
\r
167 restyle: function(imgobj){
\r
168 var width = imgobj.get('width');
\r
169 var height = imgobj.get('height');
\r
170 var vfactor = this.width/width;
\r
171 var hfactor = this.height/height;
\r
173 if (vfactor < factor) { factor = vfactor; }
\r
174 if (hfactor < factor) { factor = hfactor; }
\r
177 height = Math.round(height * factor);
\r
178 width = Math.round(width * factor);
\r
180 var topoff = (this.height - height)/2;
\r
181 var leftoff = (this.width - width)/2;
\r
182 /* alert('dim: '+width+'x'+height+'+'+leftoff+'+'+topoff); */
\r
184 position: 'absolute',
\r
192 show: function(add){
\r
194 this.restyle(this.imageObj);
\r
195 var oimg = this.oldImage.getElement('img');
\r
197 this.restyle(oimg);
\r
201 this.imageObj.injectInside(this.imagesHolder);
\r
204 this.newImage.setStyles({
\r
208 var img = this.newImage.getElement('img');
\r
210 this.imageObj.clone().replaces(img);
\r
211 //img.replaces(this.imageObj.clone());
\r
213 var obj = this.imageObj.clone();
\r
214 obj.injectInside(this.newImage);
\r
217 this.imageLoaded = this.image;
\r
218 this.loading.setStyle('display','none');
\r
223 this.timer = this.load.delay(this.options.wait,this);
\r
226 play: function(num){
\r
229 if(num > -1){this.image = num-1};
\r
230 if(this.image < this.images.length){
\r
231 this.stopped = false;
\r
237 this.started = true;
\r
243 $clear(this.timer);
\r
244 this.stopped = true;
\r
249 /* does not work */
\r
250 var oimg = this.oldImage.getElement('img');
\r
257 next: function(wait){
\r
259 if(wait && this.stopped){
\r
262 if(this.animating){
\r
267 $clear(this.timer);
\r
268 /* console.log(this.image) */
\r
269 if(this.image < this.images.length-1){
\r
276 if(this.options.loop){
\r
284 this.stopped = true;
\r
290 previous: function(){
\r
291 if(this.imageLoaded == 0){
\r
292 this.image = this.images.length-2;
\r
294 this.image = this.imageLoaded-2;
\r
299 cloneImage: function(){
\r
300 var img = this.oldImage.getElement('img');
\r
302 this.imageObj.clone().replaces(img);
\r
303 //img.replaces(this.imageObj.clone());
\r
305 var obj = this.imageObj.clone();
\r
306 obj.injectInside(this.oldImage);
\r
309 this.oldImage.setStyles({
\r
316 this.newImage.setStyles({opacity:0});
\r
320 effect: function(){
\r
321 this.animating = true;
\r
322 this.effectObj = new Fx.Morph(this.newImage, {
\r
323 duration: this.options.duration,
\r
324 transition: this.options.transition
\r
327 var myFxTypes = ['fade','wipe','slide'];
\r
328 var myFxDir = ['top','right','bottom','left'];
\r
330 if(this.options.effect == 'fade'){
\r
333 }else if(this.options.effect == 'wipe'){
\r
334 if(this.options.direction == 'random'){
\r
335 this.setup(myFxDir[Math.floor(Math.random()*(3+1))]);
\r
337 this.setup(this.options.direction);
\r
341 }else if(this.options.effect == 'slide'){
\r
342 if(this.options.direction == 'random'){
\r
343 this.setup(myFxDir[Math.floor(Math.random()*(3+1))]);
\r
345 this.setup(this.options.direction);
\r
349 }else if(this.options.effect == 'random'){
\r
350 var type = myFxTypes[Math.floor(Math.random()*(2+1))];
\r
351 if(type != 'fade'){
\r
352 var dir = myFxDir[Math.floor(Math.random()*(3+1))];
\r
353 if(this.options.direction == 'random'){
\r
356 this.setup(this.options.direction);
\r
365 setup: function(dir){
\r
367 this.top = -this.height;
\r
369 this.topOut = this.height;
\r
372 }else if(dir == 'right'){
\r
374 this.left = this.width;
\r
376 this.leftOut = -this.width;
\r
378 }else if(dir == 'bottom'){
\r
379 this.top = this.height;
\r
381 this.topOut = -this.height;
\r
384 }else if(dir == 'left'){
\r
386 this.left = -this.width;
\r
388 this.leftOut = this.width;
\r
399 this.effectObj.start({
\r
402 this.resetAnimation.delay(this.options.duration+90,this);
\r
404 this.next.delay(this.options.duration+100,this,true);
\r
409 this.newImage.morph({
\r
410 duration: this.options.duration,
\r
411 transition: this.options.transition,
\r
412 top: [0,this.topOut],
\r
413 left: [0, this.leftOut]
\r
415 this.effectObj.start({
\r
417 left: [this.left,0],
\r
420 this.resetAnimation.delay(this.options.duration+90,this);
\r
422 this.next.delay(this.options.duration+100,this,true);
\r
427 this.effectObj.start({
\r
429 left: [this.left,0],
\r
432 this.resetAnimation.delay(this.options.duration+90,this);
\r
434 this.next.delay(this.options.duration+100,this,true);
\r
438 resetAnimation: function(){
\r
439 this.animating = false;
\r
442 position: function(){
\r
443 var myCoords = this.container.getCoordinates();
\r
444 this.width = myCoords.width;
\r
445 this.height = myCoords.height;
\r
447 this.width = this.container.getStyle('width').toInt();
\r
448 this.height = this.container.getStyle('height').toInt();
\r
450 /* alert('container dim: '+this.width+'x'+this.height); */
\r
453 reshow: function(){
\r
460 slideShow.implement(new Options);
\r
461 slideShow.implement(new Events);
\r
464 /*************************************************************/
\r