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
32 initialize: function(container, images, options){
\r
33 this.setOptions(this.getOptions(), options);
\r
35 this.container = $(container);
\r
36 this.container.setStyles({
\r
37 /* position: 'relative', */
\r
40 if(this.options.onClick){
\r
41 this.container.addEvent('click', function(){
\r
42 this.options.onClick(this.imageLoaded);
\r
45 this.comm=this.options.comment;
\r
47 this.imagesHolder = new Element('div').setStyles({
\r
48 position: 'absolute',
\r
50 top: this.container.getStyle('height'),
\r
55 }).injectInside(this.container);
\r
58 if($type(images) == 'string' && !this.options.thumbnails){
\r
60 $$('.'+images).each(function(el){
\r
61 imageList.push(el.src);
\r
62 el.injectInside(this.imagesHolder);
\r
64 this.images = imageList;
\r
66 }else if($type(images) == 'string' && this.options.thumbnails){
\r
69 this.thumbnails = $$('.'+images);
\r
70 this.thumbnails.each(function(el,i){
\r
71 srcList.push(el.href);
\r
72 imageList.push(el.getElement('img'));
\r
73 el.href = 'javascript:;';
\r
74 el.addEvent('click',function(){
\r
79 this.images = srcList;
\r
80 this.thumbnailImages = imageList;
\r
82 if(this.options.backgroundSlider){
\r
83 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
84 this.bgSlider.set(this.thumbnailImages[0]);
\r
89 this.images = images;
\r
94 this.loading = new Element('div').addClass(this.options.loadingCls).setStyles({
\r
95 position: 'absolute',
\r
100 width: this.container.getStyle('width'),
\r
101 height: this.container.getStyle('height')
\r
102 }).injectInside(this.container);
\r
104 this.oldImage = new Element('div').setStyles({
\r
105 position: 'absolute',
\r
106 overflow: 'hidden',
\r
110 width: this.container.getStyle('width'),
\r
111 height: this.container.getStyle('height')
\r
112 }).injectInside(this.container);
\r
114 this.newImage = this.oldImage.clone();
\r
115 this.newImage.injectInside(this.container);
\r
121 this.imageLoaded = 0;
\r
122 this.stopped = true;
\r
123 this.started = false;
\r
124 this.animating = false;
\r
125 window.addEvent('resize', this.reshow.bind(this));
\r
126 window.addEvent('scroll', this.reshow.bind(this));
\r
130 $clear(this.timer);
\r
131 this.loading.setStyle('display','block');
\r
137 for (i=0;i<this.images[this.image].length;i++) {
\r
138 width = this.images[this.image][i][0];
\r
139 height = this.images[this.image][i][1];
\r
140 img = this.images[this.image][i][2];
\r
141 if (width >= this.width || height >= this.height) {
\r
145 /* alert('req1 image '+img); */
\r
146 delete this.imageObj;
\r
149 this.imagesHolder.getElements('img').each(function(el){
\r
150 var src = this.images[this.image][i][2];
\r
151 /* alert('req2 image '+src); */
\r
153 this.imageObj = el;
\r
162 this.imageObj = new Asset.image(img, {onload: this.show.bind(this)});
\r
163 this.imageObj.set('width', width).set('height', height);
\r
165 this.imageObj.set('id', this.images[this.image][i][3]);
\r
166 this.imageObj.set('title', this.images[this.image][i][4]);
\r
169 restyle: function(imgobj){
\r
170 var width = imgobj.get('width');
\r
171 var height = imgobj.get('height');
\r
172 var vfactor = this.width/width;
\r
173 var hfactor = this.height/height;
\r
175 if (vfactor < factor) { factor = vfactor; }
\r
176 if (hfactor < factor) { factor = hfactor; }
\r
179 height = Math.round(height * factor);
\r
180 width = Math.round(width * factor);
\r
182 var topoff = (this.height - height)/2;
\r
183 var leftoff = (this.width - width)/2;
\r
184 /* alert('dim: '+width+'x'+height+'+'+leftoff+'+'+topoff); */
\r
186 position: 'absolute',
\r
194 show: function(add){
\r
196 this.restyle(this.imageObj);
\r
197 var oimg = this.oldImage.getElement('img');
\r
199 this.restyle(oimg);
\r
203 this.imageObj.injectInside(this.imagesHolder);
\r
206 this.newImage.setStyles({
\r
210 var img = this.newImage.getElement('img');
\r
212 this.imageObj.clone().replaces(img);
\r
213 //img.replaces(this.imageObj.clone());
\r
215 var obj = this.imageObj.clone();
\r
216 obj.injectInside(this.newImage);
\r
219 this.imageLoaded = this.image;
\r
220 this.loading.setStyle('display','none');
\r
222 this.comm = $(this.comm);
\r
224 var a = this.comm.getElement('a');
\r
225 if (a) a.dispose();
\r
226 a = new Element('a', {
\r
227 href: '#'+this.imageObj.get('id'),
\r
228 html: this.imageObj.get('title'),
\r
229 }).injectInside(this.comm);
\r
234 this.timer = this.load.delay(this.options.wait,this);
\r
237 play: function(num){
\r
240 if(num > -1){this.image = num-1};
\r
241 if(this.image < this.images.length){
\r
242 this.stopped = false;
\r
248 this.started = true;
\r
254 $clear(this.timer);
\r
255 this.stopped = true;
\r
260 /* does not work */
\r
261 var oimg = this.oldImage.getElement('img');
\r
268 next: function(wait){
\r
270 if(wait && this.stopped){
\r
273 if(this.animating){
\r
278 $clear(this.timer);
\r
279 /* console.log(this.image) */
\r
280 if(this.image < this.images.length-1){
\r
287 if(this.options.loop){
\r
295 this.stopped = true;
\r
301 previous: function(){
\r
302 if(this.imageLoaded == 0){
\r
303 this.image = this.images.length-2;
\r
305 this.image = this.imageLoaded-2;
\r
310 cloneImage: function(){
\r
311 var img = this.oldImage.getElement('img');
\r
313 this.imageObj.clone().replaces(img);
\r
314 //img.replaces(this.imageObj.clone());
\r
316 var obj = this.imageObj.clone();
\r
317 obj.injectInside(this.oldImage);
\r
320 this.oldImage.setStyles({
\r
327 this.newImage.setStyles({opacity:0});
\r
331 effect: function(){
\r
332 this.animating = true;
\r
333 this.effectObj = new Fx.Morph(this.newImage, {
\r
334 duration: this.options.duration,
\r
335 transition: this.options.transition
\r
338 var myFxTypes = ['fade','wipe','slide'];
\r
339 var myFxDir = ['top','right','bottom','left'];
\r
341 if(this.options.effect == 'fade'){
\r
344 }else if(this.options.effect == 'wipe'){
\r
345 if(this.options.direction == 'random'){
\r
346 this.setup(myFxDir[Math.floor(Math.random()*(3+1))]);
\r
348 this.setup(this.options.direction);
\r
352 }else if(this.options.effect == 'slide'){
\r
353 if(this.options.direction == 'random'){
\r
354 this.setup(myFxDir[Math.floor(Math.random()*(3+1))]);
\r
356 this.setup(this.options.direction);
\r
360 }else if(this.options.effect == 'random'){
\r
361 var type = myFxTypes[Math.floor(Math.random()*(2+1))];
\r
362 if(type != 'fade'){
\r
363 var dir = myFxDir[Math.floor(Math.random()*(3+1))];
\r
364 if(this.options.direction == 'random'){
\r
367 this.setup(this.options.direction);
\r
376 setup: function(dir){
\r
378 this.top = -this.height;
\r
380 this.topOut = this.height;
\r
383 }else if(dir == 'right'){
\r
385 this.left = this.width;
\r
387 this.leftOut = -this.width;
\r
389 }else if(dir == 'bottom'){
\r
390 this.top = this.height;
\r
392 this.topOut = -this.height;
\r
395 }else if(dir == 'left'){
\r
397 this.left = -this.width;
\r
399 this.leftOut = this.width;
\r
410 this.effectObj.start({
\r
413 this.resetAnimation.delay(this.options.duration+90,this);
\r
415 this.next.delay(this.options.duration+100,this,true);
\r
420 this.newImage.morph({
\r
421 duration: this.options.duration,
\r
422 transition: this.options.transition,
\r
423 top: [0,this.topOut],
\r
424 left: [0, this.leftOut]
\r
426 this.effectObj.start({
\r
428 left: [this.left,0],
\r
431 this.resetAnimation.delay(this.options.duration+90,this);
\r
433 this.next.delay(this.options.duration+100,this,true);
\r
438 this.effectObj.start({
\r
440 left: [this.left,0],
\r
443 this.resetAnimation.delay(this.options.duration+90,this);
\r
445 this.next.delay(this.options.duration+100,this,true);
\r
449 resetAnimation: function(){
\r
450 this.animating = false;
\r
451 this.oldImage.setStyles({
\r
456 position: function(){
\r
457 var myCoords = this.container.getCoordinates();
\r
458 this.width = myCoords.width;
\r
459 this.height = myCoords.height;
\r
461 this.width = this.container.getStyle('width').toInt();
\r
462 this.height = this.container.getStyle('height').toInt();
\r
464 /* alert('container dim: '+this.width+'x'+this.height); */
\r
467 reshow: function(){
\r
474 slideShow.implement(new Options);
\r
475 slideShow.implement(new Events);
\r
478 /*************************************************************/
\r