(function($){ $.fn.parallaxSlider=function(o) { var options = { prevButton: $('.prevButton') , nextButton: $('.nextButton') , duration: 1000 , autoSwitcher: true , autoSwitcherDelay: 7000 , slider_navs: true , scrolling_description: false , slider_pagination: 'buttons_pagination' , animateLayout: 'zoom-fade-eff' //simple-fade-eff, zoom-fade-eff, slide-top-eff , parallaxEffect: 'parallax_effect_normal' , parallaxInvert: false , liteMode: false } $.extend(options, o); var _this = $(this) , _window = $(window) , _document = $(document) , sliderData = new Array() , itemLength = 0 , currIndex , prevIndex , isPreviewLoading = false , isPreviewAnimate = false , intervalSwitcher , obj_inner , mainImageHolder , primaryImageHolder , secondarImageHolder , mainCaptionHolder , primaryCaption , secondaryCaption , mainCaptionHolderContainer , previewSpinner , parallaxPrevBtn , parallaxNextBtn , slidesCounterList , paralaxSliderPagination , progressBar , youtubeApiLoad = false , vimeoApiLoad = false , parallax = true , parallaxType = 'parallax_normal' , _baseHeight , _thisOffsetTop = _this.offset().top , _thisHeight = _this.height() , _windowWidth = _window.width() , _windowHeight = _window.height() , originalWidth = 0 , originalHeight = 0 , bufferRatio ; // parse slider data $('ul li', _this).each( function() { var this_slide = $(this), slideData = new Object(), slide_type = 'image', image = this_slide.attr('data-preview'), thumb = this_slide.attr('data-thumb-url'), caption = this_slide.html(), link = this_slide.attr('data-ulr-link'), mp4_src = this_slide.attr('data-video-src-mp4'), webm_src = this_slide.attr('data-video-src-webm'), ogv_src = this_slide.attr('data-video-src-ogv'), video_loader = this_slide.attr('data-video-preloader'), youtube_id = this_slide.attr('data-video-youtube-id'), vimeo_id = this_slide.attr('data-video-vimeo-id'); if (mp4_src || webm_src || ogv_src) slide_type = 'library_video'; if (youtube_id) { slide_type = 'youtube_video'; youtubeApiLoad = true } if (vimeo_id) { slide_type = 'vimeo_video'; vimeoApiLoad = true } if (options.liteMode) slide_type = 'image'; slideData = { slide_type: slide_type, image: image, thumb: thumb, caption: caption, link: link, library_video: { mp4_src: mp4_src, webm_src: webm_src, ogv_src: ogv_src, video_loader: video_loader, video_loaded: false, }, youtube_video: { youtube_id: youtube_id, }, vimeo_video: { vimeo_id: vimeo_id, } }; sliderData.push(slideData); } ) // if necessary, load the youtube and vimeo API if(youtubeApiLoad) $.getScript( 'https://www.youtube.com/iframe_api', function( ) { if(sliderData[0].slide_type == 'youtube_video') window.onYouTubeIframeAPIReady = function() { init(); } }); if(vimeoApiLoad) $.getScript( '//f.vimeocdn.com/js/froogaloop2.min.js', function( ) { if(sliderData[0].slide_type == 'vimeo_video') init(); }); if(sliderData[0].slide_type != 'youtube_video' && sliderData[0].slide_type != 'vimeo_video') init(); function init() { // holder erase _this.html(''); _this.addClass(options.animateLayout); // preview holder build _this.append("
"); mainImageHolder = $('#mainImageHolder'); // caption holder build _this.append("
"); mainCaptionHolder = $('#mainCaptionHolder'); mainCaptionHolderContainer = $('>.container', mainCaptionHolder); // controls build _this.append("
"); parallaxPrevBtn = $('.parallaxPrevBtn', _this); parallaxNextBtn = $('.parallaxNextBtn', _this); // fullpreview pagination build _this.append("
"); paralaxSliderPagination = $('#paralaxSliderPagination'); slidesCounterList = $('.slidesCounter', _this); // preview loader build _this.append("
"); previewSpinner = $('#previewSpinner'); _this.on("reBuild", function(e,d){ setBuilder(d); } ) _this.on("switchNext", function(e){ nextSwither(); } ) _this.on("switchPrev", function(e){ prevSwither(); } ) if(options.liteMode) options.parallaxEffect = 'parallax_none'; switch (options.parallaxEffect) { case 'parallax_effect_low': if(!options.parallaxInvert){ parallaxType = 'parallax_normal'; } else { parallaxType = 'parallax_invert'; } bufferRatio = 3; break case 'parallax_effect_normal': if(!options.parallaxInvert){ parallaxType = 'parallax_normal'; } else { parallaxType = 'parallax_invert'; } bufferRatio = 2.25; break case 'parallax_effect_high': if(!options.parallaxInvert){ parallaxType = 'parallax_normal'; } else { parallaxType = 'parallax_invert'; } bufferRatio = 1.5; break case 'parallax_effect_fixed': if(isIE()){ parallax = false; } else { parallaxType = 'parallax_fixes'; } bufferRatio = 1; break default: parallax = false; parallaxType = 'parallax_none'; break } _baseHeight = getBaseHeight(); setBuilder(); if(!options.slider_navs){ parallaxPrevBtn.remove(); parallaxNextBtn.remove(); } if(options.slider_pagination == 'none_pagination'){ paralaxSliderPagination.remove(); } addEventsFunction(); autoSwitcher(); } //------------------------- set Builder -----------------------------// function setBuilder() { currIndex = 0; itemLength = sliderData.length; $(">ul", paralaxSliderPagination).empty(); switch (options.slider_pagination) { case 'buttons_pagination': paralaxSliderPagination.addClass('buttons_pagination'); for (var i = 0; i < itemLength; i++) { $(">ul", paralaxSliderPagination).append("
  • "); }; break case 'images_pagination': paralaxSliderPagination.addClass('images_pagination'); for (var i = 0; i < itemLength; i++) { $(">ul", paralaxSliderPagination).append("
  • "); }; break } if(itemLength==1){ paralaxSliderPagination.remove(); parallaxPrevBtn.remove(); parallaxNextBtn.remove(); } imageSwitcher(0); addEventsPagination(); } function autoSwitcher() { if(options.autoSwitcher){ if(itemLength>1){ intervalSwitcher = setInterval(function(){ nextSwither(); }, options.autoSwitcherDelay); } } } //--------------- addEvents ----------------------// function addEventsPagination() { $(">ul >li", paralaxSliderPagination).on("click", function() { if((!isPreviewLoading) && (!isPreviewAnimate) && ($(this).index() !== currIndex)){ clearInterval(intervalSwitcher); prevIndex = currIndex; currIndex = $(this).index(); imageSwitcher(currIndex); } } ) } function addEventsFunction() { //--------------- controls events ----------------------// options.prevButton.on("click", function() { clearInterval(intervalSwitcher); prevSwither(); } ) options.nextButton.on("click", function() { clearInterval(intervalSwitcher); nextSwither(); } ) parallaxPrevBtn.on("click", function() { clearInterval(intervalSwitcher); prevSwither(); } ) parallaxNextBtn.on("click", function() { clearInterval(intervalSwitcher); nextSwither(); } ) //--------------- keyboard events ----------------------// _window.on("keydown", function(eventObject) { switch (eventObject.keyCode){ case 37: clearInterval(intervalSwitcher); prevSwither(); break case 39: clearInterval(intervalSwitcher); nextSwither(); break } } ) //------------------ window scroll event -------------// $(window).on('scroll', function() { mainScrollFunction(); } ).trigger('scroll'); //------------------ window resize event -------------// $(window).on("resize", function() { mainResizeFunction(); } ) } //----------------------------------------------------------------- function prevSwither() { if(!isPreviewLoading && !isPreviewAnimate){ prevIndex = currIndex; if(currIndex > 0){ currIndex--; }else{ currIndex = itemLength-1; } imageSwitcher(currIndex); } } function nextSwither() { if(!isPreviewLoading && !isPreviewAnimate){ prevIndex = currIndex; if(currIndex < itemLength-1){ currIndex++; }else{ currIndex = 0; } imageSwitcher(currIndex); } } //------------------------- main Swither ----------------------------// function imageSwitcher(currIndex) { // add next ImageHolder if(primaryImageHolder){ secondarImageHolder = primaryImageHolder; secondarImageHolder.toggleClass('primaryHolder').toggleClass('secondaryHolder'); } mainImageHolder.append('
    '); primaryImageHolder = $('> .primaryHolder', mainImageHolder); objectCssTransition(primaryImageHolder, 0, 'ease'); primaryImageHolder.addClass('animateState'); // add next CaptionHolder mainCaptionHolder.find('>a').remove(); if(primaryCaption){ secondaryCaption = primaryCaption; secondaryCaption.toggleClass('primaryCaption').toggleClass('secondaryCaption'); } if(sliderData[currIndex].caption != ''){ mainCaptionHolderContainer.append('
    '); primaryCaption = $('> .primaryCaption', mainCaptionHolderContainer); primaryCaption.html(sliderData[currIndex].caption); objectCssTransition(primaryCaption, 0, 'ease'); primaryCaption.addClass('animateState'); } if(sliderData[currIndex].link != '') mainCaptionHolder.append(''); slidesCounterList.text((currIndex+1) + '/'+itemLength); $(">ul >li", paralaxSliderPagination).removeClass('active').eq(currIndex).addClass('active'); isPreviewLoading = true; isPreviewAnimate = true; previewSpinner.css({display:'block'}).stop().fadeTo(300, 1); if(progressBar) progressBar.remove(); //------------------------- image slide type ----------------------------// if(sliderData[currIndex].slide_type == 'image') { var img = new Image(); img.src = sliderData[currIndex].image; img.onload = function () { if(!options.liteMode){ primaryImageHolder.html('
    '); obj_inner = $('.parallax-slider-img', primaryImageHolder); obj_inner.css('background-image', 'url(' + img.src + ')'); } else { primaryImageHolder.html(''); obj_inner = $('.parallax-slider-img', primaryImageHolder); } if(isIE()) obj_inner.css({backgroundAttachment:'fixed'}); originalWidth = img.width; originalHeight = img.height; objectResize(obj_inner, primaryImageHolder.width(), _baseHeight); onSlideLoaded(); } } //------------------------- library video slide type ----------------------------// if(sliderData[currIndex].slide_type == 'library_video') { if(sliderData[currIndex].library_video.player){ var videoElement = sliderData[currIndex].library_video.player; } else { var videoElement = document.createElement('video'); videoElement.className = 'parallax-slider-video obj-inner'; videoElement.setAttribute('loop','loop'); videoElement.setAttribute('poster', sliderData[currIndex].image); function addSourceToVideo(element, src, type) { if(src) { var source = document.createElement('source'); source.src = src; source.type = type; element.appendChild(source); } } addSourceToVideo(videoElement, sliderData[currIndex].library_video.mp4_src, 'video/mp4'); addSourceToVideo(videoElement, sliderData[currIndex].library_video.webm_src, 'video/webm'); addSourceToVideo(videoElement, sliderData[currIndex].library_video.ogv_src, 'video/ogv'); videoElement.load(); sliderData[currIndex].library_video.player = videoElement; } primaryImageHolder.get(0).appendChild(videoElement); obj_inner = $('.parallax-slider-video', primaryImageHolder); videoElement.play(); originalWidth = 0; originalHeight = 0; originalWidth = videoElement.videoWidth; originalHeight = videoElement.videoHeight; var img = new Image(); img.src = sliderData[currIndex].image; img.onload = function () { originalWidth = originalWidth==0 ? img.width : originalWidth; originalHeight = originalHeight==0 ? img.height : originalHeight; objectResize(obj_inner, primaryImageHolder.width(), _baseHeight); onSlideLoaded(); } videoElement.onloadedmetadata = function() { originalWidth = videoElement.videoWidth; originalHeight = videoElement.videoHeight; objectResize(obj_inner, primaryImageHolder.width(), _baseHeight); } videoLoaded = sliderData[currIndex].library_video.video_loaded; if(sliderData[currIndex].library_video.video_loader && !videoLoaded) { _this.append('
    '); progressBar = $('.parallax-slider-video-progress-bar', _this); progressLine = $('.parallax-slider-video-progress', progressBar); var updateProgressBar = function() { if(videoElement.buffered.length > 0) { if(videoElement.played.length > 0) progressBar.css({background:'#000'}); if(videoElement.buffered.end(0) == videoElement.duration){ clearTimeout(watchBuffer); sliderData[currIndex].library_video.video_loaded = true; progressLine.width('100%'); progressBar.stop().delay(1000).animate({top:'-15px'}, 1000, function(){ progressBar.remove(); }); }else{ progressLine.width(((videoElement.buffered.end(0) / videoElement.duration) * 100) + '%'); } } }; var watchBuffer = setInterval(updateProgressBar, 500); } } //------------------------- youtube video slide type ----------------------------// if(sliderData[currIndex].slide_type == 'youtube_video') { var youtube_id = sliderData[currIndex].youtube_video.youtube_id; primaryImageHolder.html('
    '); function onPlayerReady(event) { event.target.playVideo(); var intervalID; intervalID = setInterval(function(){ if(youtubePlayer.getPlayerState() == 1){ clearInterval(intervalID); onSlideLoaded(); } }, 100); } originalWidth = 16; originalHeight = 9; var youtubePlayer = new YT.Player('parallax-slider-youtube-video'+currIndex+'', { height: '0px', width: '0px', playerVars : { 'autoplay' : 1, 'showinfo' : 0, 'controls' : 0, 'loop' : 1, 'disablekb' : 1, 'enablejsapi' : 1, 'html5' : isIE() ? 1 : 0, 'playlist': youtube_id }, videoId: youtube_id, events: { 'onReady': onPlayerReady } }); obj_inner = $('#parallax-slider-youtube-video'+currIndex+'', primaryImageHolder); objectResize(obj_inner, primaryImageHolder.width(), _baseHeight); sliderData[currIndex].youtube_video.player = youtubePlayer; } //------------------------- vimeo video slide type ----------------------------// if(sliderData[currIndex].slide_type == 'vimeo_video') { var vimeo_id = sliderData[currIndex].vimeo_video.vimeo_id, vimeo_iframe, vimeo_player, vimeo_player_playstarted = false; primaryImageHolder.html('
    '); vimeo_iframe = $('#vimeo-player-'+currIndex+'')[0]; vimeo_player = $f(vimeo_iframe); sliderData[currIndex].vimeo_video.player = vimeo_player; vimeo_player.addEvent('ready', function() { vimeo_player.addEvent('play', function(){ if(!vimeo_player_playstarted) { vimeo_player_playstarted = true; originalWidth = 16; originalHeight = 9; obj_inner = $('.obj-inner', primaryImageHolder); objectResize(obj_inner, primaryImageHolder.width(), _baseHeight); setTimeout(onSlideLoaded, 500); } }); }) } function onSlideLoaded() { isPreviewLoading = false; previewSpinner.stop().fadeTo(300, 0, function(){ $(this).css({display:'none'}); }); objectCssTransition(primaryImageHolder, options.duration, 'outCubic'); primaryImageHolder.removeClass('animateState'); if(secondarImageHolder){ if(sliderData[prevIndex].slide_type == 'youtube_video' || sliderData[prevIndex].slide_type == 'vimeo_video'){ setTimeout(function(){ if(sliderData[prevIndex].slide_type == 'youtube_video') sliderData[prevIndex].youtube_video.player.stopVideo(); if(sliderData[prevIndex].slide_type == 'vimeo_video') sliderData[prevIndex].vimeo_video.player.api('unload'); }, options.duration/1.25) } objectCssTransition(secondarImageHolder, options.duration, 'outCubic'); secondarImageHolder.addClass('animateState'); } objectCssTransition(primaryCaption, options.duration, 'outCubic'); if(primaryCaption){ primaryCaption.removeClass('animateState'); } if(secondaryCaption){ objectCssTransition(secondaryCaption, options.duration, 'outCubic'); secondaryCaption.addClass('animateState'); } setTimeout(function() { if(secondarImageHolder) secondarImageHolder.remove(); if(secondaryCaption) secondaryCaption.remove(); isPreviewAnimate = false; }, options.duration ) } } //----------------------------------------------------// function objectCssTransition(obj, duration, ease) { if(objectExists(obj)) { var durationValue; if(duration !== 0){ durationValue = duration/1000; }else{ durationValue = 0 } switch(ease){ case 'ease': obj.css({"-webkit-transition":"all "+durationValue+"s ease", "-moz-transition":"all "+durationValue+"s ease", "-o-transition":"all "+durationValue+"s ease", "transition":"all "+durationValue+"s ease"}); break; case 'outSine': obj.css({"-webkit-transition":"all "+durationValue+"s cubic-bezier(0.470, 0.000, 0.745, 0.715)", "-moz-transition":"all "+durationValue+"s cubic-bezier(0.470, 0.000, 0.745, 0.715)", "-o-transition":"all "+durationValue+"s cubic-bezier(0.470, 0.000, 0.745, 0.715)", "transition":"all "+durationValue+"s cubic-bezier(0.470, 0.000, 0.745, 0.715)"}); break; case 'outCubic': obj.css({"-webkit-transition":"all "+durationValue+"s cubic-bezier(0.215, 0.610, 0.355, 1.000)", "-moz-transition":"all "+durationValue+"s cubic-bezier(0.215, 0.610, 0.355, 1.000)", "-o-transition":"all "+durationValue+"s cubic-bezier(0.215, 0.610, 0.355, 1.000)", "transition":"all "+durationValue+"s cubic-bezier(0.215, 0.610, 0.355, 1.000)"}); break; case 'outExpo': obj.css({"-webkit-transition":"all "+durationValue+"s cubic-bezier(0.190, 1.000, 0.220, 1.000)", "-moz-transition":"all "+durationValue+"s cubic-bezier(0.190, 1.000, 0.220, 1.000)", "-o-transition":"all "+durationValue+"s cubic-bezier(0.190, 1.000, 0.220, 1.000)", "transition":"all "+durationValue+"s cubic-bezier(0.190, 1.000, 0.220, 1.000)"}); break; case 'outBack': obj.css({"-webkit-transition":"all "+durationValue+"s cubic-bezier(0.175, 0.885, 0.320, 1.275)", "-moz-transition":"all "+durationValue+"s cubic-bezier(0.175, 0.885, 0.320, 1.275)", "-o-transition":"all "+durationValue+"s cubic-bezier(0.175, 0.885, 0.320, 1.275)", "transition":"all "+durationValue+"s cubic-bezier(0.175, 0.885, 0.320, 1.275)"}); break; } } } //------------------------ Object resize ----------------------------// function objectResize(obj, baseWidth, baseHeight) { if(objectExists(obj)) { var imageRatio, newImgWidth, newImgHeight, newImgTop, newImgLeft; imageRatio = originalHeight/originalWidth; containerRatio = baseHeight/baseWidth; if(containerRatio > imageRatio){ newImgHeight = baseHeight; newImgWidth = Math.round( (newImgHeight*originalWidth) / originalHeight ); }else{ newImgWidth = baseWidth; newImgHeight = Math.round( (newImgWidth*originalHeight) / originalWidth ); } newImgLeft=-(newImgWidth-baseWidth)*.5; newImgTop= -(newImgHeight-baseHeight)*.5; if(obj.prop('tagName').toLowerCase() == 'div'){ obj.css({width: '100%', height: newImgHeight, marginTop: newImgTop}); } else { obj.css({width: newImgWidth, height: newImgHeight, marginTop: newImgTop, marginLeft: newImgLeft}); } if(sliderData[currIndex].slide_type == 'vimeo_video'){ obj.find('.parallax-slider-vimeo-iframe').css({width: newImgWidth, height: newImgHeight+200, marginLeft: newImgLeft}); } } } function objectExists(object){ if(object){ if(object.length > 0) return true; } } //------------------- main window scroll function -------------------// function mainScrollFunction(){ if(parallax || options.scrolling_description && !options.liteMode){ var _documentScrollTop , startScrollTop , endScrollTop ; _documentScrollTop = _document.scrollTop(); _thisOffsetTop = _this.offset().top; startScrollTop = _documentScrollTop + _windowHeight; endScrollTop = _documentScrollTop - _thisHeight; if((startScrollTop > _thisOffsetTop) && (endScrollTop < _thisOffsetTop)){ y = _documentScrollTop - _thisOffsetTop; if(parallax){ if(!options.parallaxInvert) { newPositionTop = parseInt(y / bufferRatio); } else { if(_thisOffsetTop < Math.abs(_windowHeight-_thisHeight)){ newPositionTop = -parseInt(y / bufferRatio) - parseInt(_thisOffsetTop / bufferRatio); } else{ newPositionTop = -parseInt(y / bufferRatio) - parseInt(_windowHeight / bufferRatio) } } mainImageHolder.css({ top: newPositionTop + 'px' }); } if(options.scrolling_description){ description_opacity = (1-(y / _thisHeight)).toFixed(2); if(description_opacity < 1) mainCaptionHolder.css('opacity', description_opacity); description_offset = parseInt(y/2.5); if(description_offset > 0) { mainCaptionHolder.css('top', description_offset); } else { mainCaptionHolder.css('top', '0px'); } } } } } //------------------- main window resize function -------------------// function mainResizeFunction(){ _windowWidth = _window.width(); _windowHeight = _window.height(); _thisWidth = _this.width(); _thisHeight = _this.height(); _thisOffsetTop = _this.offset().top; _baseHeight = getBaseHeight(); objectResize(obj_inner, _thisWidth, _baseHeight); mainScrollFunction(); } //------------------- get heigth function -------------------// function getBaseHeight(){ switch (parallaxType) { case 'parallax_normal': if(_thisOffsetTop < (_windowHeight-_thisHeight)){ baseHeight = _thisHeight + parseInt(_thisOffsetTop/bufferRatio); } else { baseHeight = _thisHeight + parseInt((_windowHeight - _thisHeight)/bufferRatio); } break case 'parallax_invert': if(_thisOffsetTop < Math.abs(_windowHeight-_thisHeight)){ baseHeight = _thisHeight + parseInt((_thisOffsetTop + _thisHeight)/bufferRatio); } else { baseHeight = _thisHeight + parseInt((_windowHeight + _thisHeight)/bufferRatio); } break case 'parallax_fixes': if((_thisOffsetTop + _thisHeight) < _windowHeight){ baseHeight = _thisOffsetTop + _thisHeight; } else { baseHeight = _windowHeight; } break case 'parallax_none': baseHeight = _thisHeight; break } return baseHeight; } function toRadians (angle) { return angle * (Math.PI / 180); } function isIE() { if (navigator.userAgent.indexOf('MSIE') !== -1 || navigator.appVersion.indexOf('Trident/') > 0) { return true; }else{ return false; } } function loadScript(url, callback){ $.ajax({ url: url, dataType: 'script', success: callback, async: true }); } } })(jQuery)