/* ***************************** */ /* */ /* riphoto Slideshow */ /* */ /* Version: fullwidth v2.0.1 */ /* */ /* ***************************** */ var dtFullWidthSlider = new Class({ Implements: Chain, initialize: function(options){ // setting up the options this.options = options; that = this; // checking if the slider container exists if (this.options.container != null) { this.start(); } }, setupGallery: function() { // setting up the gallery width if ($('slider-gallery') != null) { gallery = $('slider-gallery'); galleryUl = $$('#slider-gallery ul'); galleryUl = galleryUl[0]; // calculating galleryUl's width galleryThumbWidth = 100; galleryThumbHeight = 50; galleryThumbMargin = 17; galleryThumbs = galleryUl.getChildren('li'); galleryThumbs.getLast().setStyle('margin-right', 0); galleryUlWidth = (galleryThumbs.length * (galleryThumbWidth + galleryThumbMargin)) - galleryThumbMargin; galleryUl.setStyle('width', galleryUlWidth); // gallery thumbnails preloader var galleryAnchors = $$('#slider-gallery li a'); if (galleryAnchors[0] != null) { galleryAnchors.each(function(item, index){ var child = item.getChildren('img'); var asset = Asset.image(child.getProperty('src'), { onComplete: child.setStyle('display', 'block') }); }); } } // end if }, start: function() { that.setupImages(); if (that.options.gallery == true) { that.setupGallery(); } }, setupImages: function(){ slides = $$('#slider-images-wrapper a'); slides.setStyle('opacity', 0); var images = $$('#slider-images-wrapper img'); var imagesSrc = new Array(); images.each(function(item, index){ imagesSrc[index] = item.getProperty('src'); var bg = 'url(' + imagesSrc[index] + ')' + ' no-repeat center top'; slides[index].setStyle('background', bg); item.dispose(); }); var imagesAsset = Asset.images(imagesSrc, { onComplete: function(){ slides.setStyle('display', 'block'); $('slider-images-wrapper').setStyle('background-image', 'none'); that.play(); } }); }, play: function(){ counter = 0; oldCounter = counter; // adding the slides' transition effect var fx = new Array(); slides.each(function(item, index){ fx[index] = new Fx.Tween(item, { duration: that.options.transitionDuration, transition: Fx.Transitions.Linear }); }); function animateSlides(index, value){ fx[index].cancel(); fx[index].start('opacity', value); } // "the active thumbnail" if (that.options.gallery == true) { var thumbnails = $$('#slider-gallery a'); function activeThumbnail(){ thumbnails.setProperty('class', ''); thumbnails[counter].setProperty('class', 'active'); } } // end if // "the active content" if (that.options.contentBox == true) { var contentLi = $$('#contentbox ul li'); var contentLiFx = new Array(); contentLi.each(function(item, index){ contentLiFx[index] = new Fx.Tween(item, {duration: 500}); }); contentLi.setStyle('opacity', 0); function activeContentBox() { contentLiFx[oldCounter].cancel(); contentLiFx[oldCounter].start('opacity', 0); contentLiFx[counter].cancel(); contentLiFx[counter].start('opacity', 1); } } // SETTING UP THE CONTENT TITLES if (that.options.slideTitles == true) { $('slider-text').setStyle('display', 'block'); var titles = $$('#slider-text li a'); var titlesFx = new Array(); // title click events titles.each(function(item, index){ titlesFx[index] = new Fx.Morph(item, {duration: 400, wait:true}); item.addEvents({ 'click':function(){ $clear(play); counter = index; transition(); periodical(); } }); }); // title animation sequence function animateTitles() { titles.each(function(item, index){ switch(index) { case counter-2: titlesFx[counter - 2].cancel(); titlesFx[counter - 2].start('.slideTitlesDefault'); break; case counter-1: titlesFx[counter - 1].cancel(); titlesFx[counter - 1].start('.slideTitlesNear'); break; case counter: titlesFx[counter].cancel(); titlesFx[counter].start('.slideTitlesActive'); break; case counter+1: titlesFx[counter + 1].cancel(); titlesFx[counter + 1].start('.slideTitlesNear'); break; case counter+2: titlesFx[counter + 2].cancel(); titlesFx[counter + 2].start('.slideTitlesDefault'); break; default: titlesFx[index].cancel(); titlesFx[index].start('.slideTitlesDefault'); break; } // end switch }); } // titles scrolling effects var titlesUl = $$('#slider-text ul'); titlesUl = titlesUl[0]; titlesUlFx = new Fx.Tween(titlesUl, {duration: that.options.transitionDuration, transition: Fx.Transitions.Cubic.easeOut}); function animateTitlesUl() { titlesUlPos = counter * 20 - 40; titlesUlFx.cancel(); titlesUlFx.start('top', -titlesUlPos); } // title controls events playButton = $('slider-control-play'); function playButtonFunc() { if (playButton.getProperty('class') != 'pause') { $clear(play); playButton.set('class', 'pause'); } else { $clear(play); playButton.set('class', ''); periodical(); } } playButton.addEvents({ 'click':playButtonFunc }); var titlesUpButton = $('slider-control-up'); var titlesDownButton = $('slider-control-down'); titlesUpButton.addEvents({'click':slidePlayPrev}); titlesDownButton.addEvents({'click':slidePlayNext}); } // end if // main trigger function function transition() { animateSlides(oldCounter, 0); animateSlides(counter, 1); if (that.options.gallery == true) { galleryMove(); activeThumbnail(); } if (that.options.slideTitles == true) { animateTitles(); animateTitlesUl(); if (playButton.getProperty('class') == 'pause' ) { playButton.set('class', ''); } } if (that.options.contentBox == true) activeContentBox(); oldCounter = counter; counter++; } // slideshow loop function periodical(){ play = (function(){ if (counter < slides.length) { transition(); } else { counter = 0; transition(); } }).periodical(that.options.transitionInterval); } // left/right controls function slidePlayNext(){ $clear(play); if (counter < slides.length) { transition(); } else { counter = 0; transition(); } periodical(); } function slidePlayPrev(){ $clear(play); counter--; counter--; if ( counter < 0 ) { counter = slides.length - 1; } transition(); periodical(); } if (that.options.arrowControls == true) { var controlLeft = $('slider-control-left'); var controlRight = $('slider-control-right'); controlRight.addEvents({'click': slidePlayNext}); controlLeft.addEvents({'click': slidePlayPrev}); } // end if // gallery events if (that.options.gallery == true) { var galleryThumbs = $$('#slider-gallery a'); galleryThumbs.each(function(item, index){ item.addEvents({ 'click': function(){ $clear(play); counter = index; transition(); periodical(); } }); }); var galleryPos = 0; var galleryUlFx = new Fx.Tween(galleryUl, { duration: that.options.transitionDuration, transition: Fx.Transitions.Cubic.easeOut }); function galleryMove() { var gallery = $('slider-gallery'); var galleryWidth = parseInt(gallery.getStyle('width')); galleryPos = -(counter * (galleryThumbMargin + galleryThumbWidth)); if (counter != 0) { galleryPos = galleryPos + galleryThumbMargin + galleryThumbWidth; } if (galleryPos < -(galleryUlWidth - galleryWidth)) { galleryPos = -(galleryUlWidth - galleryWidth); } if (galleryPos > 0) { galleryPos = 0; } galleryUlFx.cancel(); galleryUlFx.start('left', galleryPos); } } // end if if (that.options.contentBox == true) { // content events var sliderOverlay = $('slider-overlay'); var sliderOverlayFx = new Fx.Morph(sliderOverlay, {duration: 350}); var sliderContentbox = $('contentbox'); var sliderContentboxFx = new Fx.Morph(sliderContentbox, {duration: 350, transition: Fx.Transitions.Cubic.easeOut}); var sliderContentClose = $('contentbox-close'); var sliderContentNext = $('contentbox-next'); var sliderContentPrev = $('contentbox-prev'); function contentBoxAnim(value){ sliderContentboxFx.cancel(); sliderContentboxFx.start({ 'top':value }); } sliderContentNext.addEvents({ 'click': function(){ slidePlayNext(); $clear(play); if (that.options.slideTitles == true) { if (playButton.getProperty('class') != 'pause' ) { playButton.set('class', 'pause'); } } } }) sliderContentPrev.addEvents({ 'click': function(){ slidePlayPrev(); $clear(play); if (that.options.slideTitles == true) { if (playButton.getProperty('class') != 'pause' ) { playButton.set('class', 'pause'); } } } }); [sliderContentClose, sliderOverlay].each(function(item){ item.addEvents({ 'click':function(){ contentBoxAnim(-300); (function(){ sliderOverlayFx.cancel(); sliderOverlayFx.start({ 'height':0, 'margin-top':0, 'opacity':0 }); if (that.options.slideTitles == true) { if (playButton.getProperty('class') == 'pause' ) { playButton.set('class', ''); } } $clear(play); periodical(); }).delay(150, this); } }); }) slides.each(function(item, index){ item.addEvents({ 'click':function(link){ link.stop(); $clear(play); sliderOverlayFx.cancel(); sliderOverlayFx.start({ 'height':502, 'margin-top':-251, 'opacity':1 }); if (that.options.slideTitles == true) { if (playButton.getProperty('class') != 'pause' ) { playButton.set('class', 'pause'); } } (function(){ if (that.options.gallery == true) { contentBoxAnim(120); } else { contentBoxAnim(160); } }).delay(250, this); } }); }); } // calling main functions if (that.options.gallery == true) activeThumbnail(); transition(); periodical(); } });