You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
442 lines
8.1 KiB
442 lines
8.1 KiB
/**
|
|
|
|
* slide.js
|
|
*
|
|
* Slideshow
|
|
*
|
|
* @author KienNT
|
|
*/
|
|
|
|
(function( $, undefined ) {
|
|
|
|
/*
|
|
* Slideshow object.
|
|
*/
|
|
$.Slideshow = function( options, element ) {
|
|
|
|
this.$el = $( element );
|
|
this._init( options );
|
|
|
|
};
|
|
|
|
$.Slideshow.defaults = {
|
|
current : 0, // index of current item
|
|
autoplay : true, // slideshow on / off
|
|
interval : 6000 // time between transitions
|
|
};
|
|
|
|
$.Slideshow.prototype = {
|
|
_init : function( options ) {
|
|
|
|
this.options = $.extend( true, {}, $.Slideshow.defaults, options );
|
|
|
|
this.$items = this.$el.children(".sl-item");
|
|
this.itemsCount = this.$items.length;
|
|
|
|
this.$nav = this.$el.find('.nav');
|
|
this.$navItems = this.$nav.children();
|
|
|
|
this.current = this.options.current;
|
|
|
|
this.$items.css({
|
|
/*'opacity' : 0,
|
|
'visibility': 'hidden'
|
|
,
|
|
'opacity':0*/
|
|
'display':'none'
|
|
});
|
|
|
|
var _self = this;
|
|
|
|
this.$navItems.click(function(){
|
|
_self._setSlide(_self.$navItems.index(this));
|
|
return false;
|
|
});
|
|
|
|
this._validate();
|
|
|
|
// load the events
|
|
this._loadEvents();
|
|
|
|
// slideshow
|
|
this._setSlide(this.current);
|
|
|
|
|
|
},
|
|
_validate : function() {
|
|
|
|
if( this.options.current < 0 || this.options.current > this.itemsCount - 1 ) {
|
|
|
|
this.current = 0;
|
|
|
|
}
|
|
|
|
},
|
|
_loadEvents : function() {
|
|
|
|
|
|
|
|
},
|
|
_navigate : function( dir ) {
|
|
|
|
switch( dir ) {
|
|
|
|
case 'next' :
|
|
var _current = this.current;
|
|
|
|
if(this.current >= this.itemsCount - 1){
|
|
this.current = 0;
|
|
}
|
|
else{
|
|
this.current++;
|
|
}
|
|
|
|
this._changeSlide(_current, this.current);
|
|
|
|
break;
|
|
|
|
case 'prev' :
|
|
var _current = this.current;
|
|
|
|
if(this.current <= 0){
|
|
this.current = this.itemsCount - 1;
|
|
}
|
|
else{
|
|
this.current--;
|
|
}
|
|
|
|
this._changeSlide(_current, this.current);
|
|
|
|
break;
|
|
|
|
};
|
|
|
|
|
|
},
|
|
_startSlideshow : function() {
|
|
|
|
var _self = this;
|
|
//this._setSlide(this.current);
|
|
|
|
this.slideshow = setTimeout( function() {
|
|
|
|
_self._navigate( 'next' );
|
|
|
|
if( _self.options.autoplay ) {
|
|
|
|
_self._startSlideshow();
|
|
|
|
}
|
|
|
|
}, this.options.interval );
|
|
|
|
},
|
|
_setSlide : function(index){
|
|
if(index < 0 || index >= this.itemsCount){
|
|
return;
|
|
}
|
|
|
|
clearTimeout(this.slideshow);
|
|
this._changeSlide(this.current, index);
|
|
|
|
if( this.options.autoplay ) {
|
|
|
|
this._startSlideshow();
|
|
|
|
}
|
|
},
|
|
_getItem : function(index){
|
|
return this.$items.eq(index);
|
|
},
|
|
_getNav : function(index){
|
|
return this.$navItems.eq(index);
|
|
},
|
|
_changeSlide : function(from, to){
|
|
var _currentItem = this._getItem(from);
|
|
var _currentNav = this._getNav(from);
|
|
var _nextItem = this._getItem(to);
|
|
var _nextNav = this._getNav(to);
|
|
|
|
_currentItem.fadeOut(1000);
|
|
_nextItem.fadeIn(2000);
|
|
|
|
var _transType = "slideshowImg "+(this.options.interval/1000 + 1)+"s";
|
|
|
|
_nextItem.children("img").css("animation",_transType);
|
|
_currentNav.removeClass("active");
|
|
_nextNav.addClass("active");
|
|
|
|
this.current = to;
|
|
}
|
|
};
|
|
|
|
var logError = function( message ) {
|
|
if ( this.console ) {
|
|
console.error( message );
|
|
}
|
|
};
|
|
|
|
$.fn.Slideshow = function( options ) {
|
|
|
|
if ( typeof options === 'string' ) {
|
|
|
|
var args = Array.prototype.slice.call( arguments, 1 );
|
|
|
|
this.each(function() {
|
|
|
|
var instance = $.data( this, 'Slideshow' );
|
|
|
|
if ( !instance ) {
|
|
logError( "cannot call methods on Slideshow prior to initialization; " +
|
|
"attempted to call method '" + options + "'" );
|
|
return;
|
|
}
|
|
|
|
if ( !$.isFunction( instance[options] ) || options.charAt(0) === "_" ) {
|
|
logError( "no such method '" + options + "' for Slideshow instance" );
|
|
return;
|
|
}
|
|
|
|
instance[ options ].apply( instance, args );
|
|
|
|
});
|
|
|
|
}
|
|
else {
|
|
|
|
this.each(function() {
|
|
|
|
var instance = $.data( this, 'Slideshow' );
|
|
if ( !instance ) {
|
|
$.data( this, 'Slideshow', new $.Slideshow( options, this ) );
|
|
}
|
|
});
|
|
|
|
}
|
|
|
|
return this;
|
|
|
|
};
|
|
|
|
|
|
/*
|
|
Slide object
|
|
*/
|
|
|
|
$.Slide = function( options, element ) {
|
|
|
|
this.$el = $( element );
|
|
this._init( options );
|
|
|
|
};
|
|
|
|
$.Slide.defaults = {
|
|
current : 0, // index of current item
|
|
started : false,
|
|
autoplay : true, // Slide on / off
|
|
interval : 4000 // time between transitions
|
|
};
|
|
|
|
$.Slide.prototype = {
|
|
_init : function( options ) {
|
|
|
|
this.options = $.extend( true, {}, $.Slide.defaults, options );
|
|
|
|
this.$items = this.$el.find(".design-process-step-detail");
|
|
this.itemsCount = this.$items.length;
|
|
|
|
this.$navItems = this.$el.find('.design-process-step');
|
|
|
|
this.current = this.options.current;
|
|
|
|
this.$items.css({
|
|
/*'opacity' : 0,
|
|
'visibility': 'hidden'
|
|
,
|
|
'opacity':0*/
|
|
'display':'none'
|
|
});
|
|
|
|
var _self = this;
|
|
|
|
this.$navItems.click(function(){
|
|
_self._setSlide(_self.$navItems.index(this));
|
|
return false;
|
|
});
|
|
|
|
this.$items.hover(function(){
|
|
_self._pauseSlide();
|
|
}, function(){
|
|
_self._resumeSlide();
|
|
});
|
|
|
|
this._validate();
|
|
|
|
// load the events
|
|
this._loadEvents();
|
|
|
|
// Slide
|
|
this._setSlide(this.current);
|
|
|
|
|
|
},
|
|
_validate : function() {
|
|
|
|
if( this.options.current < 0 || this.options.current > this.itemsCount - 1 ) {
|
|
|
|
this.current = 0;
|
|
|
|
}
|
|
|
|
},
|
|
_loadEvents : function() {
|
|
|
|
|
|
|
|
},
|
|
_navigate : function( dir ) {
|
|
|
|
switch( dir ) {
|
|
|
|
case 'next' :
|
|
var _current = this.current;
|
|
|
|
if(this.current >= this.itemsCount - 1){
|
|
this.current = 0;
|
|
}
|
|
else{
|
|
this.current++;
|
|
}
|
|
|
|
this._changeSlide(_current, this.current);
|
|
|
|
break;
|
|
|
|
case 'prev' :
|
|
var _current = this.current;
|
|
|
|
if(this.current <= 0){
|
|
this.current = this.itemsCount - 1;
|
|
}
|
|
else{
|
|
this.current--;
|
|
}
|
|
|
|
this._changeSlide(_current, this.current);
|
|
|
|
break;
|
|
|
|
};
|
|
|
|
|
|
},
|
|
_startSlide : function() {
|
|
|
|
var _self = this;
|
|
//this._setSlide(this.current);
|
|
|
|
this.Slide = setTimeout( function() {
|
|
|
|
_self._navigate( 'next' );
|
|
|
|
if( _self.options.autoplay ) {
|
|
|
|
_self._startSlide();
|
|
|
|
}
|
|
|
|
}, this.options.interval );
|
|
|
|
},
|
|
_setSlide : function(index){
|
|
if(index < 0 || index >= this.itemsCount || (index == this.current && this.started)){
|
|
return;
|
|
}
|
|
|
|
this.started = true;
|
|
|
|
clearTimeout(this.Slide);
|
|
this._changeSlide(this.current, index);
|
|
|
|
if( this.options.autoplay ) {
|
|
|
|
this._startSlide();
|
|
|
|
}
|
|
},
|
|
_getItem : function(index){
|
|
return this.$items.eq(index);
|
|
},
|
|
_getNav : function(index){
|
|
return this.$navItems.eq(index);
|
|
},
|
|
_changeSlide : function(from, to){
|
|
var _currentItem = this._getItem(from);
|
|
var _currentNav = this._getNav(from);
|
|
var _nextItem = this._getItem(to);
|
|
var _nextNav = this._getNav(to);
|
|
|
|
_currentItem.fadeOut(1000);
|
|
_nextItem.fadeIn(1000);
|
|
|
|
this.current = to;
|
|
},
|
|
_pauseSlide : function(){
|
|
clearTimeout(this.Slide);
|
|
},
|
|
_resumeSlide : function(){
|
|
if( this.options.autoplay ) {
|
|
this._startSlide();
|
|
}
|
|
}
|
|
};
|
|
|
|
var logError = function( message ) {
|
|
if ( this.console ) {
|
|
console.error( message );
|
|
}
|
|
};
|
|
|
|
$.fn.Slide = function( options ) {
|
|
|
|
if ( typeof options === 'string' ) {
|
|
|
|
var args = Array.prototype.slice.call( arguments, 1 );
|
|
|
|
this.each(function() {
|
|
|
|
var instance = $.data( this, 'Slide' );
|
|
|
|
if ( !instance ) {
|
|
logError( "cannot call methods on Slide prior to initialization; " +
|
|
"attempted to call method '" + options + "'" );
|
|
return;
|
|
}
|
|
|
|
if ( !$.isFunction( instance[options] ) || options.charAt(0) === "_" ) {
|
|
logError( "no such method '" + options + "' for Slide instance" );
|
|
return;
|
|
}
|
|
|
|
instance[ options ].apply( instance, args );
|
|
|
|
});
|
|
|
|
}
|
|
else {
|
|
|
|
this.each(function() {
|
|
|
|
var instance = $.data( this, 'Slide' );
|
|
if ( !instance ) {
|
|
$.data( this, 'Slide', new $.Slide( options, this ) );
|
|
}
|
|
});
|
|
|
|
}
|
|
|
|
return this;
|
|
|
|
};
|
|
|
|
})( jQuery ); |