/**
* 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: '#9F1F22',
navigationHoverColor: '#D52B2F',
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 = '\
\
';
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
* 2[link]
*
* 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
, 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 = '
';
$(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));