"

From 2014.igem.org

/**

* DrSlider Version 0.9.4
* Developed by devrama.com
* 
* Licensed under the MIT license:
* http://www.opensource.org/licenses/mit-license.php
* 
*/

(function($){ var DrSlider = function(element, options){ this.width = undefined, this.height = undefined, this.parent_width = undefined, this.num_slides = 0; this.current_slide = undefined; this.$sliders = undefined; this.$very_current_slide = undefined; //This is very close current slide, it is the one before transitioning, and the moment when user click 'next', 'prev' or 'navigations'. this.is_pause = false; this.play_timer = true; this.active_timer = false; this.on_transition = false; this._$progress_bar = undefined; this.all_transitions = ['slide-left', 'slide-right', 'slide-top', 'slide-bottom', 'fade', 'split', 'split3d', 'door', 'wave-left', 'wave-right', 'wave-top', 'wave-bottom'];

this.requestFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) { return window.setTimeout(callback, 1000 / 60); };

this.options = { width: undefined, //initial width, automaticall ycalculated once the first image is loaded height: undefined, //initial height, automatically calculated once the first image is loaded userCSS: false, //if this is true, 'Previous, Next Buttons and Navigation CSS' will not be applied. User should define CSS in their css file. transitionSpeed: 1000, duration: 4000, showNavigation: true, classNavigation: undefined, navigationColor: '#99d6fc', navigationHoverColor: '#3181c2', navigationHighlightColor: '#DFDFDF', navigationNumberColor: '#000000', positionNavigation: 'out-center-bottom', // 'out-center-bottom', 'out-left-bottom', 'out-right-bottom', 'out-center-top', 'out-left-top', 'out-right-top', // 'in-center-bottom', 'in-left-bottom', 'in-right-bottom', 'in-center-top', 'in-left-top', 'in-right-top', // 'in-left-middle', 'in-right-middle' navigationType: 'number', // number, circle, square showControl: true, classButtonNext: undefined, classButtonPrevious: undefined, controlColor: '#FFFFFF', controlBackgroundColor: '#000000', positionControl: 'left-right', // 'left-right', 'top-center', 'bottom-center', 'top-left', 'top-right', 'bottom-left', 'bottom-right' transition: 'slide-left', //random, slide-left, slide-right, slide-top, slide-bottom, fade, split, split3d, door, wave-left, wave-right, wave-top, wave-bottom showProgress: true, progressColor: '#797979', pauseOnHover: true, onReady: undefined

};

var css = '\ <style id="devrama-css" type="text/css">\ .devrama-slider,\ .devrama-slider *,\ .devrama-slider *::before,\ .devrama-slider *::after{\ -webkit-box-sizing: border-box;\ -moz-box-sizing: border-box;\ box-sizing: border-box;\ }\ </style>\ ';

if($('#devrama-css').length == 0){ if($('html>head').length > 0) $('html>head').append(css); else $('body').append(css); }

$.extend(this.options, options);

this.$ele = $(element);

this.$ele.wrapInner('');

this.$ele_in = this.$ele.children('.inner:first'); this.$ele_projector = this.$ele_in.children('.projector:first'); };

DrSlider.prototype = { _init: function(){ var that = this;

this._stopTimer(function(){ that._prepare(function(){ if(typeof that.options.onReady == 'function') that.options.onReady(); that._playSlide(); $(window).on('resize.DrSlider', function(){ that._resize(); }); }); });

if(this.options.pauseOnHover){ this.$ele_in.on('mouseenter', function(){ that.is_pause = true; that._showButtons(); }); this.$ele_in.on('mouseleave', function(){ that.is_pause = false; that._hideButtons(); }); }

},

_getEndEvent: function(prop){ var vendors = 'webkit Moz Ms o Khtml'.split(' '); var len = vendors.length;

if (prop in document.body.style) return prop+'end';

prop = prop.charAt(0).toUpperCase() + prop.slice(1); for(var i =0; i<vendors.length; i++){ if(vendors[i]+prop in document.body.style) return vendors[i]+prop+'End'; }

return false; },

_animate: function(selector, from, to, duration, delay, callback, jQueryAnimation){ var $obj;

if(!delay) delay = 0;

if(selector instanceof jQuery) $obj = selector; else $obj = $(selector);

if($obj.length == 0){ if(typeof callback == 'function') { setTimeout(function(){ callback(); }, delay);

} return; }

if(typeof duration != 'number') duration = 0; if(typeof delay != 'number') delay = 0;

var event_end; if(jQueryAnimation) event_end = false; else event_end = this._getEndEvent('transition');

if(event_end !== false){ var from_delay = 0; if(from) { $obj.css(from); from_delay = 30; }

setTimeout(function(){ var transition = { '-webkit-transition': 'all '+duration+'ms ease '+delay+'ms', '-moz-transition': 'all '+duration+'ms ease '+delay+'ms', '-o-transition': 'all '+duration+'ms ease '+delay+'ms', 'transition': 'all '+duration+'ms ease '+delay+'ms' } var css = $.extend({}, transition, to);

$obj.css(css);

var fired = false; //to ensure it fires event only once $obj.one(event_end, function(){

$obj.css({ '-webkit-transition': , '-moz-transition': , '-o-transition': , 'transition': }); if(typeof callback == 'function') callback();

});

}, from_delay); } else { setTimeout(function(){ if(from) $obj.css(from); $obj.animate(to, duration, function(){ callback(); }); }, delay); }

},

_prepare: function(callback){ var that = this;

this.parent_width = this.$ele.parent().width();

if(this.$ele.css('position') == 'static') this.$ele.css('position', 'relative');

this.$ele.css({ 'visibility': 'hidden', 'width': 'auto', 'height': 'auto' });

this.$ele_in.css({ 'position': 'relative', 'margin': '0 auto' }); this.$ele_projector.css({ 'position': 'relative', 'overflow': 'hidden' });

/* * set CSS for init * Only the first child will be shown at start, hiding others. */ var $sliders = this.$ele_projector.children('[class!=slider-progress]'); $sliders.css({ 'display': 'none', 'position': 'absolute', 'top': '0', 'left': '0' }); this.$sliders = $sliders; this.num_slides = this.$sliders.length;

//preload images sequentially so that images are not loaded slide by slide. var arr_all_images = []; this.$ele_projector.find('[data-lazy-src], [data-lazy-background]').each(function(){ var image = $(this).data('lazy-src') || $(this).data('lazy-background'); arr_all_images.push(image); }); this._preloadImages(arr_all_images, function(){ });

/* * There are 3 possibilities. * 1[image] * <img data-lazy-src data-transition/> * 2[link] * <a data-lazy-src data-transition><img/></a> * 3[animation]

*

* * Now, we gotta decide what the case is. */

this.$sliders.each(function(){ var transparent_data = 'data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==';

if(!$(this).hasClass('slider-progress') && !$(this).hasClass('button-slider')){

var images = []; var has_main_image = true; if($(this).data('lazy-background')){ $(this).addClass('primary-img background'); images.push($(this).data('lazy-background')); } else if($(this).data('lazy-src')) { $(this).addClass('primary-img image'); $(this).css('vertical-align', 'bottom'); //to fix extra space problem inside a link. $(this).attr('src', transparent_data); images.push($(this).data('lazy-src')); }

//such as <a><img></a> , push a image below, so we do not push it into array

else if($(this).children().length == 1 && $(this).children('img').length == 1){ $(this).children('img[data-lazy-src]:first').addClass('primary-img image'); } else { has_main_image = false; }

$(this).find('[data-lazy-src]').each(function(){ $(this).css('vertical-align', 'bottom'); //to fix extra space problem inside a link. $(this).attr('src', transparent_data); images.push($(this).data('lazy-src')); });

$(this).find('[data-lazy-background]').each(function(){ images.push($(this).data('lazy-background')); });

$(this).data({'has-main-image': has_main_image,'images': images});

$(this).children('[data-pos]').css('display', 'none'); }

});

//if initial width and height are defined, this sets the box width and height before loading images. if(this.options.width && this.options.height){ var obj = { width: this.options.width, height: this.options.height }; this.width = obj.width; this.height = obj.height; this.$ele_in.css(obj); this.$ele_projector.css(obj);

//show Controls if(that.num_slides > 1 && that.options.showControl) that._attachControl(); //show Navigation if(that.num_slides > 1 && that.options.showNavigation) that._attachNavigation();

if(that.options.classNavigation) that._attachUserNavigation(); if(that.options.classButtonPrevious || that.options.classButtonNext) that._attachUserControlEvent();

callback(); } else { /* * load first image and set the box dimension as the image size */ var first_img = new Image(); first_img.onload = first_img.onerror = function(){ var obj = { width: first_img.width, height: first_img.height };

that.width = obj.width; that.height = obj.height; that.$ele_in.css(obj); that.$ele_projector.css(obj); //show Controls if(that.num_slides > 1 && that.options.showControl) that._attachControl(); //show Navigation if(that.num_slides > 1 && that.options.showNavigation) that._attachNavigation();

if(that.options.classNavigation) that._attachUserNavigation(); if(that.options.classButtonPrevious || that.options.classButtonNext) that._attachUserControlEvent();

callback(); }

first_img.src = this.$sliders.first().data('images')[0]; }

},

_resetSize: function($element, new_width, new_height, callback){ var new_size = { width: new_width, height: new_height }; var $target1, $target2; if($element) { $target1 = $element; $target2 = $element.find('.primary-img:first'); $prev_target1 = this.$ele_projector.children('.active.primary-img:first'); $prev_target2 = this.$ele_projector.children('.active').find('.primary-img:first'); } else { $target1 = this.$ele_projector.children('.active'); $target2 = this.$ele_projector.children('.active').find('.primary-img:first'); }

$target1.css(new_size); $target2.css(new_size);

if($element){ /* * When the size of next slide is different from the current one, * We animate the box size. */ if(this.width != new_width || this.height != new_height){

$prev_target1.animate(new_size); $prev_target2.animate(new_size);

this.$ele_in.css(new_size); //.animate() makes this block 'overflow: hidden', so I use just .css(). this.$ele_projector.animate(new_size, function(){ if(typeof callback == 'function') callback(); }); } else { if(typeof callback == 'function') callback(); }

} //This is the case when the window size is resized by the user. else { if(this.on_transition == true){ this.$very_current_slide.css({ 'display': 'block', 'top': '0', 'left': '0', 'z-index': '5', 'width': new_width, 'height': new_height }); }

this.$ele_in.css(new_size); this.$ele_projector.css(new_size);

if(typeof callback == 'function') callback(); }

this.width = new_width; this.height = new_height;

},

_resize: function($element, callback){ var that = this;

this.parent_width = this.$ele.parent().width();

var new_width, new_height, original;

if(this.options.width && this.options.height){ original = { 'width': this.options.width, 'height': this.options.height }; } else if(!$element) original = this.$ele_projector.children('.active').data('original'); else original = $element.data('original');

if(original.width > that.parent_width){ new_width = that.parent_width; new_height = new_width*original.height/original.width; } else{ new_width = original.width; new_height = original.height; }

this._resetSize($element, new_width, new_height, callback);

},

_attachUserControlEvent: function(){ var that = this;

if(this.options.classButtonPrevious){ $('.'+this.options.classButtonPrevious).on('click', function(e){ e && e.preventDefault(); if(that.play_timer == false || that.on_transition == true) return;

that._stopTimer(function(){ that._startTimer(function(){ that._prev(); }); });

}); }

if(this.options.classButtonNext){

$('.'+this.options.classButtonNext).on('click', function(e){ e && e.preventDefault(); if(that.play_timer == false || that.on_transition == true) return;

that._stopTimer(function(){ that._startTimer(function(){ that._next(); }); });

}); } },

_attachUserNavigation: function(){ var that = this; var $userNavigation = $('.'+this.options.classNavigation).find('[data-index]');

if($userNavigation.length == 0){ $userNavigation = $('.'+this.options.classNavigation).children(); }

$userNavigation.on('click', function(e){ e && e.preventDefault(); if(that.play_timer == false || that.on_transition == true) return;

$userNavigation.removeClass('active'); $(this).addClass('active');

var navigation_num;

if($(this).data('index') && $(this).data('index') != ){ var slide_num = that.$ele_projector.children('[data-index=\+$(this).data('index')+'\']').index(); if(slide_num > 0) navigation_num = slide_num; else navigation_num = $(this).data('index'); } else { navigation_num = $(this).index(); }

if(navigation_num == that.current_slide) return;

if(that.play_timer == false || that.on_transition == true) return; that._stopTimer(function(){ if(navigation_num > 0) that.current_slide = navigation_num - 1; else that.current_slide = that.num_slides - 1; that._startTimer(function(){ that._next(); }); });

});

},

_updateNavigation: function(){ var that = this; if(this.options.classNavigation) { $('.'+this.options.classNavigation).find('.active').removeClass('active'); var user_index = this.$sliders.eq(this.current_slide).data('index');

if(typeof user_index != 'undefined' && user_index != ){ $('.'+this.options.classNavigation).find('[data-index=\+user_index+'\']').addClass('active'); } else { var nav_index = $('.'+this.options.classNavigation).children().eq(this.current_slide).data('index'); if(!nav_index || nav_index == ) $('.'+this.options.classNavigation).children().eq(this.current_slide).addClass('active'); } } this.$ele_projector.next('.navigation').find('.nav-link').removeClass('active'); this.$ele_projector.next('.navigation').find('.nav-link.index'+this.current_slide).addClass('active'); if(!this.options.userCSS){ this.$ele_projector.next('.navigation').find('.nav-link').css({ 'background-color': this.options.navigationColor }); this.$ele_projector.next('.navigation').find('.nav-link.index'+this.current_slide).css({ 'background-color': this.options.navigationHighlightColor }); } },

_attachNavigation: function(){ if(this.num_slides < 2) return;

var that = this; var navigation_html = ;

for(var i =0; i < this.num_slides; i++) navigation_html += ''+(i+1)+'';

this.$ele_projector.after('');

var pos_nav = this.options.positionNavigation; var $navigation = this.$ele_projector.next('.navigation'); var $nav_link = $navigation.find('.nav-link'); $navigation.css({ 'font-size': '12px', 'z-index': '3', 'user-select': 'none' });

if(!this.options.userCSS){

$nav_link.css({ 'display': 'inline-block', 'width' : this.options.navigationType != 'number' ? '13px': , 'height' : this.options.navigationType != 'number' ? '13px': , 'padding': '0.2em', 'font-size': '12px', 'vertical-align': 'bottom', 'cursor': 'pointer', 'color': this.options.navigationNumberColor, 'text-align': 'center', 'text-indent': this.options.navigationType != 'number' ? '-10000em' : , 'width': this.options.navigationType == 'number' ? $nav_link.innerHeight()+'px' : '13px', 'border': '0px solid transparent', 'border-radius': this.options.navigationType == 'circle' ? '50%' : , 'margin-top': (pos_nav == 'in-left-middle' || pos_nav == 'in-right-middle') ? '5px':, 'margin-left': (pos_nav != 'in-left-middle' && pos_nav != 'in-right-middle') ? '5px':

});

$navigation.find('.nav-link:first').css({ 'margin-top': '0', 'margin-left': '0' });

$navigation.find('.nav-link:last').css({ 'margin-bottom': '0', 'margin-right': '0' });

if(this.options.positionNavigation == 'in-left-middle' || this.options.positionNavigation == 'in-right-middle'){

$navigation.children('.inner').css({ 'width': $nav_link.outerWidth(true)+'px' }); } else { var inner_width = 0; $nav_link.each(function(){ inner_width += $(this).outerWidth(true); });

$navigation.children('.inner').css({ 'width': inner_width+'px' }); }

// 'out-center-bottom', 'out-left-bottom', 'out-right-bottom', 'out-center-top', 'out-left-top', 'out-right-top', // 'in-center-bottom', 'in-left-bottom', 'in-right-bottom', 'in-center-top', 'in-left-top', 'in-right-top', // 'in-left-middle', 'in-right-middle'

var nav_css_additional = {}; var nav_height = $navigation.outerHeight();

//vertical position switch(this.options.positionNavigation){ case 'out-center-top': case 'out-left-top': case 'out-right-top': $navigation.css('margin', '5px 0'); this.$ele.css('padding-top', (nav_height+10)+'px'); // 10 is 5+5 margin nav_css_additional['top'] = (-1*(nav_height+10))+'px'; // 10 is 5+5 margin break; case 'out-center-bottom': case 'out-left-bottom': case 'out-right-bottom': nav_css_additional['top'] = '100%'; $navigation.css('margin', '5px 0'); this.$ele.css('padding-bottom', (nav_height+10)+'px'); // 10 is 5+5 margin break; case 'in-center-top': case 'in-left-top': case 'in-right-top': nav_css_additional['top'] = '20px'; break; case 'in-center-bottom': case 'in-left-bottom': case 'in-right-bottom': case 'out-right-bottom': nav_css_additional['bottom'] = '20px'; break; case 'in-left-middle': case 'in-right-middle': nav_css_additional['top'] = '50%'; nav_css_additional['margin-top'] = (-1*nav_height/2)+'px'; break;

}

//horizontal position switch(this.options.positionNavigation){ case 'out-left-top': case 'out-left-bottom': case 'in-left-top': case 'in-left-bottom': case 'in-left-middle': nav_css_additional['left'] = '20px'; break; case 'out-center-top': case 'out-center-bottom': case 'in-center-top': case 'in-center-bottom': nav_css_additional['left'] = '50%'; if(inner_width) nav_css_additional['margin-left'] = (-1*inner_width/2)+'px'; break; case 'out-right-top': case 'out-right-bottom': case 'in-right-top': case 'in-right-bottom': case 'in-right-middle': nav_css_additional['right'] = '20px'; break; }

var nav_css = { 'position': 'absolute', 'z-index': '3' };

$.extend(nav_css, nav_css_additional);

$navigation.css(nav_css);

$nav_link.css({ 'background-color': that.options.navigationColor }); $navigation.find('.nav-link:first').css({ 'background-color': that.options.navigationHighlightColor });

$nav_link.hover(function(){ $(this).css({ 'background-color': that.options.navigationHoverColor }); },function(){ $(this).css({ 'background-color': $(this).data('num') == that.current_slide ? that.options.navigationHighlightColor : that.options.navigationColor }); });

}

$nav_link.on('click', function(e){ e && e.preventDefault(); var navigation = this; var navigation_num = $(navigation).data('num');

if(navigation_num == that.current_slide) return;

if(that.play_timer == false || that.on_transition == true) return; that._stopTimer(function(){ if(navigation_num > 0) that.current_slide = navigation_num - 1; else that.current_slide = that.num_slides - 1; that._startTimer(function(){ that._next(); }); });

}); },

_attachControl: function(){ var that = this;

this.$ele_in.append(''); this.$ele_in.append('');

this.$ele_in.children('.button-slider').css({ 'display': 'none', 'z-index': '10', 'user-select': 'none' });

if(!this.options.userCSS){ this.$ele_in.children('.button-slider').css({ 'position': 'absolute', 'color': this.options.controlColor, 'font-size': '50px', 'font-family': '"Helvetica Neue", Helvetica, Arial, sans-serif', 'line-height': '0.65em', 'text-align': 'center', 'background-color': this.options.controlBackgroundColor, 'opacity': '0.5', 'width': '40px', 'height': '40px', 'border-radius': '50%', 'cursor': 'pointer' });

//positionControl: 'left-right', // 'left-right', 'top-center', 'bottom-center', 'top-left', 'top-right', 'bottom-left', 'bottom-right'

var css_previous, css_next; switch(this.options.positionControl){ case 'left-right': css_previous = { 'left': '10px', 'top': '50%', 'margin-top': '-20px' }; css_next = { 'right': '10px', 'top': '50%', 'margin-top': '-20px' }; break; case 'top-center': css_previous = { 'left': '50%', 'top': '10px', 'margin-left': '-50px' }; css_next = { 'left': '50%', 'top': '10px', 'margin-left': '10px' }; break; case 'bottom-center': css_previous = { 'left': '50%', 'bottom': '10px', 'margin-left': '-50px' }; css_next = { 'left': '50%', 'bottom': '10px', 'margin-left': '10px' }; break; case 'top-left': css_previous = { 'left': '10px', 'top': '10px' }; css_next = { 'left': '70px', 'top': '10px' }; break; case 'top-right': css_previous = { 'right': '70px', 'top': '10px' }; css_next = { 'right': '10px', 'top': '10px' }; break; case 'bottom-left': css_previous = { 'left': '10px', 'bottom': '10px' }; css_next = { 'left': '70px', 'bottom': '10px' }; break; case 'bottom-right': css_previous = { 'right': '70px', 'bottom': '10px' }; css_next = { 'right': '10px', 'bottom': '10px' }; break; }

this.$ele_in.children('.button-previous').css(css_previous); this.$ele_in.children('.button-next').css(css_next); }

this.$ele_in.children('.button-previous').on('click', function(e){ e && e.preventDefault(); if(that.play_timer == false || that.on_transition == true) return;

that._stopTimer(function(){ that._startTimer(function(){ that._prev(function(){ that.is_pause = true; //Because the mouse pointer is on the button }); }); });

});

this.$ele_in.children('.button-next').on('click', function(e){ e && e.preventDefault(); if(that.play_timer == false || that.on_transition == true) return;

that._stopTimer(function(){ that._startTimer(function(){ that._next(function(){ that.is_pause = true; //Because the mouse pointer is on the button }); }); });

});

},

_showProgress: function(percent){ var that = this;

if(!this.options.showProgress) return;

if(this.$ele_in.children('.slider-progress').length == 0){

this.$ele_in.append('');

this._$progress_bar = this.$ele_in.find('.slider-progress:first .bar'); this.$ele_in.children('.slider-progress').css({ 'z-index': '4' }); this._$progress_bar.css({ 'height': '100%' });

if(!this.options.userCSS){ this.$ele_in.children('.slider-progress').css({ 'position': 'absolute', 'bottom': '0', 'left': '0', 'height': '1.5%', 'width': '100%', 'background-color': 'transparent', 'opacity': '0.7' });

this._$progress_bar.css({ 'width': '0%', 'background-color': this.options.progressColor }); }

}

if(typeof percent != 'undefined'){ this._$progress_bar.css('width', percent+'%'); }

},

_showButtons: function(){ this.$ele_in.children('.button-slider').fadeIn(); },

_hideButtons: function(){ this.$ele_in.children('.button-slider').fadeOut(); },

_playSlide: function(){ var that = this; if(this.num_slides > 1){

this._startTimer(function(){ that._next(); }); } else { this._next(); }

},

_stopTimer: function(callback){ var that = this;

this.play_timer = false; var timer = setInterval(function(){ if(that.active_timer == false) { clearInterval(timer); if(typeof callback == 'function') callback(); } }, 100);

},

_startTimer: function(callback){ var that = this; this.play_timer = true; this.active_timer = true;

var start_time = (new Date()).getTime(); var end_time = start_time + that.options.duration; var elapsed_time = 0;

this._showProgress(0); callback(); var frame = function(){

if(that.play_timer == false) { that._showProgress(0); that.active_timer = false; return false; }

var current_time = (new Date()).getTime();

if(that.is_pause == true || that.on_transition){ if(elapsed_time == 0) elapsed_time = current_time - start_time;

that.requestFrame.call(window, frame);

} else { if(elapsed_time > 0){ start_time = current_time - elapsed_time; end_time = start_time + that.options.duration; elapsed_time = 0; }

if(current_time > end_time) { that._showProgress(100); start_time = (new Date()).getTime(); end_time = start_time + that.options.duration; that._next(function(){ that._showProgress(0); }); } else { var percent = ((current_time - start_time)/that.options.duration)*100; that._showProgress(percent); }

that.requestFrame.call(window, frame); }

};

frame();

},

_isLoadedImages: function(arr_images, callback, index, arr_size){ if(typeof arr_images == 'undefined' || arr_images.length < 1) { if(typeof callback == 'function') callback(); return; } if(typeof index == 'undefined') { index = 0; } if(typeof arr_size == 'undefined') { arr_size = []; }

var that = this; var src = arr_images[index]; var img = new Image();

img.onload = img.onerror = function(){

arr_size.push({width: img.width, height: img.height});

if(index == arr_images.length - 1 && typeof callback == 'function') callback(arr_size); else that._isLoadedImages(arr_images, callback, ++index, arr_size); }; img.src = src; },

_preloadImages: function(arr_images, callback){ this._isLoadedImages(arr_images, callback); },

_next: function(callback){ var that = this; this.on_transition = true; this.is_pause = true;

var $element; if(typeof this.current_slide == 'undefined') { this.current_slide = 0; $element = this.$sliders.eq(0); } else { if(this.current_slide < this.num_slides - 1) this.current_slide++; else this.current_slide = 0; $element = this.$sliders.eq(this.current_slide); }

that._prev_next_process($element, callback);

},

_prev: function(callback){ var that = this; this.on_transition = true; this.is_pause = true;

var $element;

if(this.current_slide > 0) this.current_slide--; else this.current_slide = this.num_slides - 1; $element = this.$sliders.eq(this.current_slide);

that._prev_next_process($element, callback);

},

_prev_next_process: function($element, callback){ this.$very_current_slide = $element; var that = this;

var first_image_src = $element.data('images')[0];

this._isLoadedImages($element.data('images'), function(arr_size){ that.is_pause = false; that.$ele.css('visibility', 'visible'); if($element.data('has-main-image')){ $element.data('original', {'width': arr_size[0].width, 'height': arr_size[0].height}); } else{ var original_width, original_height;

if(that.options.width && that.options.height){ original_width = that.options.width; original_height = that.options.height; } else { var $active = that.$ele_projector.children('.active'); original_width = $active.outerWidth(true); original_height = $active.outerHeight(true);

}

$element.data('original', {'width': original_width, 'height': original_height}); }

if(typeof callback == 'function') callback();

//we resize slide size because slide size could be bigger than window size. that._resize($element, function(){

that._updateNavigation();

if($element.find('[data-pos]').length > 0){ that._showAnimation($element, function(){

}); } else { that._showImage($element, function(){

}); } });

}); },

_showImage: function($element, callback){ var that = this; var transition = $element.data('transition') ? $element.data('transition') : this.options.transition;

this._transition($element, transition, function(){ that.on_transition = false;

if(typeof callback == 'function') callback(); });

},

/* * callback : after transition * callback_ani: after both transition and inner animation */

_showAnimation: function($element, callback, callback_ani){ var that = this; var transition = $element.data('transition') ? $element.data('transition') : this.options.transition; this._transition($element, transition, function(){ that.on_transition = false;

if(typeof callback == 'function') callback();

var arr_img_element = []; $element.children('[data-pos]').each(function(){ var pos = $(this).data('pos'); if(typeof pos == 'string') pos = $(this).data('pos').replace(/[\s\[\]\']/g, ).split(',');

if(pos.length >= 2){ $(this).css({ 'display': 'none', 'position': 'absolute', 'top': pos[0], 'left': pos[1] }); }

arr_img_element.push(this); }); that._playAnimation(arr_img_element, function(){ if(typeof callback_ani == 'function') callback_ani(); }); });

},

_transition_prepare: function($element){ var that = this;

if($element.data('lazy-src')){ $element.attr('src', $element.data('lazy-src')); }

if($element.data('lazy-background') && $element.children('.lazy-background').length == 0){ var html = '<img src="'+$element.data('lazy-background')+'" class="lazy-background"/>'; $(html).prependTo($element).css({ 'position': 'absolute', 'top': '0', 'left': '0', 'width': '100%', 'height': '100%', 'z-index': '-1' });

}

$element.find('[data-lazy-src]').each(function(){ $(this).attr('src', $(this).data('lazy-src')); });

$element.find('[data-lazy-background]').each(function(){ $(this).css('background-image', 'url('+$(this).data('lazy-background')+')'); });

},

_transition: function($element, transition, callback){ var that = this; var $active = this.$ele_projector.children('.active:first'); var reset = function(){ $active.css({ 'display': 'none', 'top': '0%', 'left': '0%' }); $active.css('z-index', ); $active.children('[data-pos]').css('display', 'none'); $active.removeClass('active'); $element.css({ 'display': 'block', 'top': '0%', 'left': '0%', 'z-index': }); $element.addClass('active'); };

if(transition == 'random') transition = this.all_transitions[Math.floor(Math.random()*this.all_transitions.length)];

transition = transition.replace(/-/g, '_'); var transition_func = eval('this._transition_'+transition); if(typeof transition_func == 'function') { this._transition_prepare($element); transition_func.call(this, $element, this.options.transitionSpeed, function(){ reset(); callback(); }); } else { this._transition_prepare($element); this._transition_slide($element, this.options.transitionSpeed, function(){ reset(); callback(); }); }

},

_transition_slide_left: function($element, duration, callback){ this._transition_slide($element, duration, callback, 'left'); },

_transition_slide_right: function($element, duration, callback){ this._transition_slide($element, duration, callback, 'right'); },

_transition_slide_top: function($element, duration, callback){ this._transition_slide($element, duration, callback, 'top'); },

_transition_slide_bottom: function($element, duration, callback){ this._transition_slide($element, duration, callback, 'bottom'); },

_transition_slide: function($element, duration, callback, direction){

var that = this;

if(this.$ele_projector.children('.active').length == 0){ $element.css({ 'display': 'block', 'top': '0%', 'left': '0%' }); $element.addClass('active'); if(typeof callback != 'undefined') callback(); return; } else {

if(typeof direction == 'undefined') direction = 'left'; var pos_from_top, pos_from_left, pos_to_top, pos_to_left;

switch(direction){ case 'left': pos_from_top = '0%'; pos_from_left = '100%'; pos_to_top = '0%'; pos_to_left = '-100%'; break; case 'right': pos_from_top = '0%'; pos_from_left = '-100%'; pos_to_top = '0%'; pos_to_left = '100%'; break; case 'top': pos_from_top = '100%'; pos_from_left = '0%'; pos_to_top = '-100%'; pos_to_left = '0%'; break; case 'bottom': pos_from_top = '-100%'; pos_from_left = '0%'; pos_to_top = '100%'; pos_to_left = '0%'; break; }

this.$ele_projector.append(''); this.$ele_projector.append('');

this.$ele_projector.children('.active:first').clone().appendTo(this.$ele_projector.children('.slide-old')).removeClass("active"); $element.clone().appendTo(this.$ele_projector.children('.slide-new')).removeClass("active");

var $slide_old = this.$ele_projector.children('.slide-old'); var $slide_new = this.$ele_projector.children('.slide-new');

//To prevent blink setTimeout(function(){ $slide_old.css({ 'display': 'block', 'position': 'absolute', 'overflow': 'hidden', 'top': '0', 'left': '0', 'width': '100%', 'height': '100%', 'z-index': '2' });

$slide_new.css({ 'display': 'block', 'position': 'absolute', 'overflow': 'hidden', 'top': pos_from_top, 'left': pos_from_left, 'width': '100%', 'height': '100%', 'z-index': '2' });

$slide_old.children().show(); $slide_new.children().show();

that._animate( $slide_old, null, { 'top': pos_to_top, 'left': pos_to_left }, duration, null, function(){ $slide_old.remove(); } );

that._animate( $slide_new, null, { 'top': '0%', 'left': '0%' }, duration, null, function(){ $slide_new.remove(); if(typeof callback == 'function') callback(); } ); }, 30);

}

},

_transition_fade: function($element, duration, callback){ var that = this;

if(this.$ele_projector.children('.active').length == 0){ $element.css({ 'display':'block', 'left': '0%' }); $element.addClass('active'); if(typeof callback != 'undefined') callback(); return; } else {

this.$ele_projector.append(''); this.$ele_projector.append('');

this.$ele_projector.children('.active:first').clone().appendTo(this.$ele_projector.children('.fade-old')).removeClass("active"); $element.clone().appendTo(this.$ele_projector.children('.fade-new')).removeClass("active");

var $fade_old = this.$ele_projector.children('.fade-old'); var $fade_new = this.$ele_projector.children('.fade-new');

//To prevent blink setTimeout(function(){ $fade_old.children().show(); $fade_new.children().show();

that._animate( $fade_old, { 'display': 'block', 'position': 'absolute', 'overflow': 'hidden', 'width': '100%', 'height': '100%', 'z-index': '2' }, { 'opacity': '0' }, duration, null, function(){ $fade_old.remove(); } );

that._animate( $fade_new, { 'display': 'block', 'position': 'absolute', 'overflow': 'hidden', 'width': '100%', 'height': '100%', 'z-index': '2', 'opacity': '0' }, { 'opacity': '1' }, duration, null, function(){ $fade_new.remove(); if(typeof callback == 'function') callback(); } ); }, 30);

}

},

_transition_split3d: function($element, duration, callback){ this._transition_split($element, duration, callback, true); },

_transition_split: function($element, duration, callback, enable3d){ var that = this;

if(this.$ele_projector.children('.active').length == 0){ $element.css({ 'display': 'block', 'left': '0%' }); $element.addClass('active'); if(typeof callback != 'undefined') callback(); return; } else {

this.$ele_projector.append(''); this.$ele_projector.append('');

this.$ele_projector.children('.active:first').clone().appendTo(this.$ele_projector.children('.split_up')).removeClass("active"); this.$ele_projector.children('.active:first').clone().appendTo(this.$ele_projector.children('.split_down')).removeClass("active");

var $split_up = this.$ele_projector.children('.split_up'); var $split_down = this.$ele_projector.children('.split_down');

//To prevent blink setTimeout(function(){

$split_up.children().css({ 'top': '0', 'left': '0', 'height': that.$ele_projector.height()+'px' });

$split_down.children().css({ 'top': 'auto', 'bottom': '0', 'left': '0', 'height': that.$ele_projector.height()+'px', 'background-position': 'bottom left' });

$element.css({ 'left': '0%', 'display': 'block' });

that.$ele_projector.children('.active:first').css('display', 'none');

$css_split_up = { 'top': '-50%', 'opacity': '0' };

$css_split_down = { 'bottom': '-50%', 'opacity': '0' };

if(typeof enable3d != 'undefined' && enable3d == true){

var deg = 10; if(that.current_slide%2 == 0) deg = -1*deg;

that.$ele_projector.css({ 'perspective': '400px' });

$.extend($css_split_up, {'transform': 'rotateZ('+deg+'deg) translateZ(238px)'}); $.extend($css_split_down, {'transform': 'rotateZ('+(-1*deg)+'deg) translateZ(238px)'}); }

that._animate( $split_up, { 'display': 'block', 'position': 'absolute', 'overflow': 'hidden', 'z-index': '2', 'top': '0', 'left': '0', 'width': '100%', 'height': that.$ele_projector.height()/2+'px', 'opacity': '1' }, $css_split_up, duration, null, null );

that._animate( $split_down, { 'display': 'block', 'position': 'absolute', 'overflow': 'hidden', 'z-index': '2', 'bottom': '0', 'left': '0', 'width': '100%', 'height': that.$ele_projector.height()/2+'px', 'opacity': '1' }, $css_split_down, duration, null, function(){ $split_up.remove(); $split_down.remove(); if(typeof callback == 'function') callback(); } );

}, 30);

}

},

_transition_door: function($element, duration, callback){ var that = this;

if(this.$ele_projector.children('.active').length == 0){ $element.css({ 'display': 'block', 'left': '0%' }); $element.addClass('active'); if(typeof callback != 'undefined') callback(); return; } else { //this.$ele_projector.children('.active:first').css('z-index', '1');

this.$ele_projector.append(''); this.$ele_projector.append('');

this.$ele_projector.children('.active:first').clone().appendTo(this.$ele_projector.children('.split_left')).removeClass("active"); this.$ele_projector.children('.active:first').clone().appendTo(this.$ele_projector.children('.split_right')).removeClass("active");

var $split_left = this.$ele_projector.children('.split_left'); var $split_right = this.$ele_projector.children('.split_right');

//To prevent blink setTimeout(function(){ $split_left.children().css({ 'top': '0', 'left': '0', 'width': that.$ele_projector.width()+'px' });

$split_right.children().css({ 'top': '0', 'left': 'auto', 'right': '0', 'width': that.$ele_projector.width()+'px', 'background-position': 'top right' });

$element.css({ 'left': '0%', 'display': 'block' });

that.$ele_projector.children('.active:first').css('display', 'none');

that._animate( $split_left, { 'display': 'block', 'position': 'absolute', 'overflow': 'hidden', 'z-index': '2', 'top': '0', 'left': '0', 'width': that.$ele_projector.width()/2+'px', 'height': '100%' }, { 'left': '-50%' }, duration, null, function(){ $split_left.remove(); } );

that._animate( $split_right, { 'display': 'block', 'position': 'absolute', 'overflow': 'hidden', 'z-index': '2', 'top': '0', 'right': '0', 'width': that.$ele_projector.width()/2+'px', 'height': '100%' }, { 'right': '-50%' }, duration, null, function(){ $split_right.remove(); if(typeof callback == 'function') callback(); } );

}, 30);

} },

_transition_wave_left: function($element, duration, callback){ this._transition_wave($element, duration, callback, 'left'); },

_transition_wave_right: function($element, duration, callback){ this._transition_wave($element, duration, callback, 'right'); },

_transition_wave_top: function($element, duration, callback){ this._transition_wave($element, duration, callback, 'top'); },

_transition_wave_bottom: function($element, duration, callback){ this._transition_wave($element, duration, callback, 'bottom'); },

_transition_wave: function($element, duration, callback, direction){ var that = this;

if(this.$ele_projector.children('.active').length == 0){ $element.css({ 'display': 'block', 'left': '0%' }); $element.addClass('active'); if(typeof callback != 'undefined') callback(); return; } else {

this.$ele_projector.append('');

$element.clone().appendTo(this.$ele_projector.children('.split_wave')).removeClass("active");

var $split_wave = this.$ele_projector.children('.split_wave');

if(typeof direction == 'undefined') direction = 'left'; var to_css; switch(direction){ case 'left': $split_wave.children().css({ 'left': '0', 'right': , 'top': , 'bottom': }); $split_wave.css({ 'top': '0', 'left': '0', 'width': '0%', 'height': '100%' }); to_css = { 'width': '100%', 'opacity': '1' }; break; case 'right': $split_wave.children().css({ 'left': , 'right': '0', 'top': , 'bottom': }); $split_wave.css({ 'top': '0', 'right': '0', 'width': '0%', 'height': '100%' }); to_css = { 'width': '100%', 'opacity': '1' }; break; case 'top': $split_wave.children().css({ 'left': , 'right': , 'top': '0', 'bottom': }); $split_wave.css({ 'top': '0', 'left': '0', 'width': '100%', 'height': '0%' }); to_css = { 'height': '100%', 'opacity': '1' }; break; case 'bottom': $split_wave.children().css({ 'left': , 'right': , 'top': , 'bottom': '0' }); $split_wave.css({ 'bottom': '0', 'left': '0', 'width': '100%', 'height': '0%' }); to_css = { 'height': '100%', 'opacity': '1' }; break; }

$split_wave.children().show();

//To prevent blink setTimeout(function(){ var jQueryAnimation = false; //right and bottom animation shakes with css3 transition if(direction == 'right' || direction == 'bottom') jQueryAnimation = true;

that._animate( $split_wave, { 'display': 'block', 'position': 'absolute', 'overflow': 'hidden', 'z-index': '2', 'opacity': '0.3' }, to_css, duration, null, function(){ $split_wave.remove(); if(typeof callback == 'function') callback(); }, jQueryAnimation ); }, 30);

} },

_playAnimation: function(arr_img_element, callback){ var that = this; var $img_element = $(arr_img_element.shift());

switch($img_element.data('effect')){ case 'fadein': this._animate( $img_element, { 'display': 'block', 'opacity': '0' }, { 'opacity': '1' }, $img_element.data('duration') ? $img_element.data('duration') : 400, $img_element.data('delay') ? $img_element.data('delay') : null, function(){ if(arr_img_element.length > 0) that._playAnimation(arr_img_element, callback); else callback(); } );

break; case 'move': $img_element.css({ 'display': 'block' });

var pos = $img_element.data('pos'); if(typeof pos == 'string') pos = $img_element.data('pos').replace(/[\s\[\]\']/g, ).split(',');

if(pos.length == 4){ this._animate( $img_element, { 'opacity': '0' }, { 'top': pos[2], 'left': pos[3], 'opacity': 1 }, $img_element.data('duration') ? $img_element.data('duration') : 400, $img_element.data('delay') ? $img_element.data('delay') : null, function(){ if(arr_img_element.length > 0) that._playAnimation(arr_img_element, callback); else callback(); } );

} break;

}

}

};

$.fn.DrSlider = function (options) {

if (typeof options === 'string') {

var data = $this.data('DrSlider'); if (!data) $this.data('DrSlider', (data = new DrSlider(this, options)));

return data[options].apply(data, Array.prototype.slice.call(arguments, 1)); }

return this.each(function () { var $this = $(this);

var data = $this.data('DrSlider'); if (!data) $this.data('DrSlider', (data = new DrSlider(this, options))); else data.constructor(this, options);

data._init(); });

};

$.fn.DrSlider.Constructor = DrSlider;

}(jQuery));