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
56 if($type(images) == 'string' && !this.options.thumbnails){
\r
58 $$('.'+images).each(function(el){
\r
59 imageList.push(el.src);
\r
60 el.injectInside(this.imagesHolder);
\r
62 this.images = imageList;
\r
64 }else if($type(images) == 'string' && this.options.thumbnails){
\r
67 this.thumbnails = $$('.'+images);
\r
68 this.thumbnails.each(function(el,i){
\r
69 srcList.push(el.href);
\r
70 imageList.push(el.getElement('img'));
\r
71 el.href = 'javascript:;';
\r
72 el.addEvent('click',function(){
\r
77 this.images = srcList;
\r
78 this.thumbnailImages = imageList;
\r
80 if(this.options.backgroundSlider){
\r
81 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
82 this.bgSlider.set(this.thumbnailImages[0]);
\r
86 this.images = images;
\r
89 this.loading = new Element('div').addClass(this.options.loadingCls).setStyles({
\r
90 position: 'absolute',
\r
95 width: this.container.getStyle('width'),
\r
96 height: this.container.getStyle('height')
\r
97 }).injectInside(this.container);
\r
99 this.oldImage = new Element('div').setStyles({
\r
100 position: 'absolute',
\r
101 overflow: 'hidden',
\r
105 width: this.container.getStyle('width'),
\r
106 height: this.container.getStyle('height')
\r
107 }).injectInside(this.container);
\r
109 this.newImage = this.oldImage.clone();
\r
110 this.newImage.injectInside(this.container);
\r
116 this.imageLoaded = 0;
\r
117 this.stopped = true;
\r
118 this.started = false;
\r
119 this.animating = false;
\r
123 $clear(this.timer);
\r
124 this.loading.setStyle('display','block');
\r
126 var img = this.images[this.image];
\r
127 delete this.imageObj;
\r
130 this.imagesHolder.getElements('img').each(function(el){
\r
131 var src = this.images[this.image];
\r
133 this.imageObj = el;
\r
142 this.imageObj = new Asset.image(img, {onload: this.show.bind(this)});
\r
147 show: function(add){
\r
150 this.imageObj.injectInside(this.imagesHolder);
\r
153 this.newImage.setStyles({
\r
157 var img = this.newImage.getElement('img');
\r
159 this.imageObj.clone().replaces(img);
\r
160 //img.replaces(this.imageObj.clone());
\r
162 var obj = this.imageObj.clone();
\r
163 obj.injectInside(this.newImage);
\r
165 this.imageLoaded = this.image;
\r
166 this.loading.setStyle('display','none');
\r
167 if(this.options.thumbnails){
\r
169 if(this.options.backgroundSlider){
\r
170 var elT = this.thumbnailImages[this.image];
\r
171 this.bgSlider.move(elT);
\r
172 this.bgSlider.setStart(elT);
\r
174 this.thumbnails.each(function(el,i){
\r
175 el.removeClass(this.options.thumbnailCls);
\r
176 if(i == this.image){
\r
177 el.addClass(this.options.thumbnailCls);
\r
186 this.timer = this.load.delay(this.options.wait,this);
\r
189 play: function(num){
\r
191 if(num > -1){this.image = num-1};
\r
192 if(this.image < this.images.length){
\r
193 this.stopped = false;
\r
199 this.started = true;
\r
205 $clear(this.timer);
\r
206 this.stopped = true;
\r
209 next: function(wait){
\r
211 if(wait && this.stopped){
\r
214 if(this.animating){
\r
219 $clear(this.timer);
\r
220 /* console.log(this.image) */
\r
221 if(this.image < this.images.length-1){
\r
228 if(this.options.loop){
\r
236 this.stopped = true;
\r
242 previous: function(){
\r
243 if(this.imageLoaded == 0){
\r
244 this.image = this.images.length-2;
\r
246 this.image = this.imageLoaded-2;
\r
251 cloneImage: function(){
\r
252 var img = this.oldImage.getElement('img');
\r
254 this.imageObj.clone().replaces(img);
\r
255 //img.replaces(this.imageObj.clone());
\r
257 var obj = this.imageObj.clone();
\r
258 obj.injectInside(this.oldImage);
\r
261 this.oldImage.setStyles({
\r
268 this.newImage.setStyles({opacity:0});
\r
272 effect: function(){
\r
273 this.animating = true;
\r
274 this.effectObj = new Fx.Morph(this.newImage, {
\r
275 duration: this.options.duration,
\r
276 transition: this.options.transition
\r
279 var myFxTypes = ['fade','wipe','slide'];
\r
280 var myFxDir = ['top','right','bottom','left'];
\r
282 if(this.options.effect == 'fade'){
\r
285 }else if(this.options.effect == 'wipe'){
\r
286 if(this.options.direction == 'random'){
\r
287 this.setup(myFxDir[Math.floor(Math.random()*(3+1))]);
\r
289 this.setup(this.options.direction);
\r
293 }else if(this.options.effect == 'slide'){
\r
294 if(this.options.direction == 'random'){
\r
295 this.setup(myFxDir[Math.floor(Math.random()*(3+1))]);
\r
297 this.setup(this.options.direction);
\r
301 }else if(this.options.effect == 'random'){
\r
302 var type = myFxTypes[Math.floor(Math.random()*(2+1))];
\r
303 if(type != 'fade'){
\r
304 var dir = myFxDir[Math.floor(Math.random()*(3+1))];
\r
305 if(this.options.direction == 'random'){
\r
308 this.setup(this.options.direction);
\r
317 setup: function(dir){
\r
319 this.top = -this.container.getStyle('height').toInt();
\r
321 this.topOut = this.container.getStyle('height').toInt();
\r
324 }else if(dir == 'right'){
\r
326 this.left = this.container.getStyle('width').toInt();
\r
328 this.leftOut = -this.container.getStyle('width').toInt();
\r
330 }else if(dir == 'bottom'){
\r
331 this.top = this.container.getStyle('height').toInt();
\r
333 this.topOut = -this.container.getStyle('height').toInt();
\r
336 }else if(dir == 'left'){
\r
338 this.left = -this.container.getStyle('width').toInt();
\r
340 this.leftOut = this.container.getStyle('width').toInt();
\r
351 this.effectObj.start({
\r
354 this.resetAnimation.delay(this.options.duration+90,this);
\r
356 this.next.delay(this.options.duration+100,this,true);
\r
361 this.newImage.morph({
\r
362 duration: this.options.duration,
\r
363 transition: this.options.transition,
\r
364 top: [0,this.topOut],
\r
365 left: [0, this.leftOut]
\r
367 this.effectObj.start({
\r
369 left: [this.left,0],
\r
372 this.resetAnimation.delay(this.options.duration+90,this);
\r
374 this.next.delay(this.options.duration+100,this,true);
\r
379 this.effectObj.start({
\r
381 left: [this.left,0],
\r
384 this.resetAnimation.delay(this.options.duration+90,this);
\r
386 this.next.delay(this.options.duration+100,this,true);
\r
390 resetAnimation: function(){
\r
391 this.animating = false;
\r
395 slideShow.implement(new Options);
\r
396 slideShow.implement(new Events);
\r
399 /*************************************************************/
\r