').appendTo(this.loader)
this.loader.append(this.loaderDiv).appendTo(this.mainHolder);
}
//slides
if (this.effect == 'fade') {
this.slides.css({display:'none',opacity:0});
this.slides.eq(this.current).css({display:'block',opacity:1});
} else if (this.effect == 'slideX'){
this.slides.css({display: 'none',left:-this.slideW});
this.slides.eq(this.current).css({display:'block',left:0});
} else if (this.effect == 'slideY'){
this.slides.css({display:'none',top:-this.slideH});
this.slides.eq(this.current).css({display:'block',top:0});
}
},
bindEvents:function(){
this.nextBtn.bind('click',function(){
if (!this.busy) this.nextSlide();
return false;
}.bind(this));
this.prevBtn.bind('click',function(){
if (!this.busy) this.prevSlide();
return false;
}.bind(this));
for (var i = 0; i < this.pagingArray.length; i++) {
this.pagingArray[i].each(function(i,obj){
$(obj).bind('click',function(){
if (i != this.current && !this.busy) {
this.busy = true;
this.previous = this.current;
this.current = i;
this.showSlide();
}
return false;
}.bind(this));
}.bind(this))
}
if (this.dynamicLoad) this.loader.bind('click',this.abortLoading.bind(this));
},
nextSlide:function(){
this.busy = true;
this.previous = this.current;
if (this.current < this.slides.length-1) this.current++
else this.current = 0;
this.direction = 1;
if (typeof this.onChange === 'function') this.onChange(this.current);
this.showSlide();
},
prevSlide:function(){
this.busy = true;
this.previous = this.current;
if (this.current > 0) this.current--
else this.current = this.slides.length-1;
this.direction = -1;
if (typeof this.onChange === 'function') this.onChange(this.current);
this.showSlide();
},
showSlide:function(){
var obj = this;
var _current = this.current;
clearTimeout(this.timer);
if (typeof this.loadArray[_current] != 'undefined' || !this.dynamicLoad) {
//slide already loaded
if (this.previous != -1) this.switchSlide()
else {
obj.refreshStatus();
if (obj.autoPlay) obj.startAutoPlay();
}
} else {
//slide not loaded
this.showLoading();
var slide = this.slides.eq(this.current);
var images = $(this.dynamicLoad,slide);
var counter = 0;
images.each(function(){
var preloader = new Image;
obj.preloader.push(preloader);
var img = $(this);
preloader.src = img.attr(obj.imgAttr);
preloader.onload = function(){
counter++;
checkImages();
}
preloader.onerror = function(){
//ignore errors
counter++;
checkImages();
}
});
function checkImages(){
if (counter == images.length) {
images.each(function(){
var img = $(this);
img.attr('src',img.attr(obj.imgAttr));
});
obj.loadArray[_current] = 1;
obj.hideLoading();
if (obj.previous != -1) obj.switchSlide()
else {
obj.refreshStatus();
if (obj.autoPlay) obj.startAutoPlay();
}
}
}
}
},
switchSlide:function(){
var obj = this;
if (this.effect == 'fade') {
this.slides.eq(this.previous).stop().animate({opacity:0},this.animSpeed,callback);
this.slides.eq(this.current).stop().css({display:'block'}).animate({opacity:1},this.animSpeed);
} else if (this.effect == 'slideX'){
this.slides.eq(this.current).css({display:'block',left:this.slideW*this.direction}).animate({left:0},this.animSpeed);
this.slides.eq(this.previous).animate({left:-this.slideW*this.direction},this.animSpeed,callback);
} else if (this.effect == 'slideY'){
this.slides.eq(this.current).css({display:'block',top:this.slideH*this.direction}).animate({top:0},this.animSpeed);
this.slides.eq(this.previous).animate({top:-this.slideH*this.direction},this.animSpeed,callback);
}
function callback(){
$(this).css({display:'none'});
if (obj.autoPlay) obj.startAutoPlay();
obj.busy = false;
}
this.refreshStatus();
},
refreshStatus:function(){
for (var i = 0; i < this.pagingArray.length;i++) {
this.pagingArray[i].eq(this.previous).removeClass('active');
this.pagingArray[i].eq(this.current).addClass('active');
}
},
showLoading:function(){
var obj = this;
this.loader.show();
clearInterval(this.loadingTimer);
obj.loadingTimer = setInterval(animateLoading, 66);
function animateLoading(){
if (!obj.loader.is(':visible')){
clearInterval(obj.loadingTimer);
return;
}
obj.loaderDiv.css('top', obj.loadingFrame * -40);
obj.loadingFrame = (obj.loadingFrame + 1) % 12;
}
},
hideLoading:function(){
this.loader.hide();
},
abortLoading:function(){
this.busy = false;
this.loader.hide();
this.current = this.previous;
for (var i = 0; i < this.preloader.length; i++) {
this.preloader[i].onload = null;
this.preloader[i].onerror = null;
}
if (this.autoPlay) this.startAutoPlay();
},
startAutoPlay:function(){
var obj = this;
clearTimeout(obj.timer);
obj.timer = setTimeout(function(){
obj.nextSlide();
},obj.switchTime);
}
}
// bind scope function
Function.prototype.bind = function(scope) {
var _function = this;
return function() {
return _function.apply(scope, arguments);
}
}
//create jQuery plugin
$.fn.scrollGallery = function(options){return new scrollGallery(this,options)}
//constructor
function scrollGallery(obj,options){this.init(obj,options);}
//prototype
scrollGallery.prototype = {
init:function(obj,options){
this.options = $.extend({
holder:'div.mask',
slider:'>ul',
slides:'>li',
prevBtn:'span.link-prev',
nextBtn:'span.link-next',
pagingHolder:'div.paging',
pagingBtn:'li',
createPaging:false,
circleSlide:true,
slideSpeed:500,
startSlide:false,
step:false
},options);
// elems
this.mainHolder = $(obj);
this.holder = $(this.options.holder, this.mainHolder);
this.slider = $(this.options.slider, this.holder)
this.slides = $(this.options.slides ,this.slider);
this.prevBtn = $(this.options.prevBtn, this.mainHolder);
this.nextBtn = $(this.options.nextBtn, this.mainHolder);
//variables
this.slideW = this.slides.eq(0).outerWidth(true);
this.visibleStep = Math.round(this.holder.width()/this.slideW);
this.options.step ? this.step = this.options.step : this.step = this.visibleStep;
this.options.startSlide ? this.current = Math.floor(this.options.startSlide/this.step) : this.current = 0;
this.max = this.slides.length - this.visibleStep;
this.stepCount = Math.ceil((this.slides.length-this.visibleStep)/this.step)+1;
//paging
this.pagingHolder = $(this.options.pagingHolder, this.mainHolder);
this.pagingLength = Math.ceil(this.slides.length / this.step);
if (this.pagingHolder.length) {
this.pagingBtn = new Array;
if (this.options.createPaging) {
this.pagingHolder.each(function(i,obj){
var $this = $(obj);
$this.empty();
var list = $('
');
for (var i = 0; i < this.pagingLength; i++) $('- ' + (i + 1) + '
').appendTo(list);
$this.append(list);
}.bind(this));
}
this.pagingHolder.each(function(i,obj){
this.pagingBtn[i] = $(this.options.pagingBtn, $(obj));
var stepCount = 0;
this.pagingBtn[i].each(function(j,obj){
var index = stepCount;
$(obj).click(function(){
if (index != this.current) {
this.showSlide(index);
}
return false;
}.bind(this));
stepCount += this.step;
}.bind(this));
}.bind(this));
}
//next & prev
this.nextBtn.click(function(){
this.nextSlide();
return false;
}.bind(this));
this.prevBtn.click(function(){
this.prevSlide();
return false;
}.bind(this));
},
nextSlide:function(){
if (this.options.circleSlide && this.current == this.stepCount - 1) {
this.previous = this.current;
this.current = 0;
this.move();
}
else if (this.current < this.stepCount - 1) {
this.previous = this.current++
this.move();
}
},
prevSlide:function(){
if (this.options.circleSlide && this.current == 0) {
this.previous = this.current;
this.current = this.stepCount - 1;
this.move();
}
else if (this.current > 0) {
this.previous = this.current--;
this.move();
}
},
move:function(instant){
var offset;
if (this.step * this.current < this.max) offset = (this.step*this.current)*this.slideW;
else offset = this.max * this.slideW
if (instant) this.slider.css({marginLeft:-offset})
else this.slider.animate({marginLeft:-offset},this.options.slideSpeed);
},
showSlide:function(nextInd,instant){
var nextCount = Math.floor((nextInd)/this.step);
if (nextCount != this.current) {
this.previous = this.current;
this.current = nextCount;
if (instant) this.move(instant);
else this.move();
}
}
}