ACC SHELL
/*
BackSlider - Fullscreen Background Image Slider
-----------------------------------------------
JS code
@author flGravity
@site http://codecanyon.net/user/flGravity
@created 19/07/2012
@version 1.5
*/
(function($){
/* BackSlider Constructor */
function BackSlider(c,s){
this.container = $(c);
this.settings = s;
//create container
if(this.container.find('.bs-slides').length == 0){
this.container.append('<ul class="bs-slides"></ul>')
}
//load slides from given source
if(this.settings.photoSource == 'flickrfeed') {
this.photoSourceFlickrFeed();
} else if(this.settings.photoSource == 'flickrauth') {
this.photoSourceFlickrAuth();
} else if(this.settings.photoSource == 'picasa') {
this.photoSourcePicasa();
} else {
this.init();
}
}
/* Backslider Init */
BackSlider.prototype.init = function(){
// set variables
this.slides = this.container.find('.bs-slides > li');
this.length = this.slides.length;
//start with random slide
if(this.settings.startRandom){
this.index = Math.floor(Math.random()*(this.length-1));
} else {
this.index = this.settings.startSlide || 0;
}
//add overlay div
this.container.prepend('<div class="bs-overlay"></div>');
//add controls div
this.container.prepend('<div class="bs-controls"></div>');
//add preload div
if(this.settings.preload && this.length > 0){
this.container.prepend('<div class="bs-preload"><div class="bs-preload-indicator"></div></div>');
}
// wait for images to load
this.preloadTimer = window.setInterval((function(){
var n = this.slides.find('img').filter(function(){
return !this.complete;
}).length;
if(n == 0){
//stop preload timer
window.clearInterval(this.preloadTimer);
//check if there is preload screen
var p = this.container.find('.bs-preload');
if(p.length > 0){
p.delay(this.settings.preloadDelay).fadeTo(this.settings.preloadTime,0,(function(){
p.remove();
$('.bs-controls',this.container).fadeIn('fast');
}).scope(this));
} else {
$('.bs-controls',this.container).fadeIn('fast');
}
//set image scale mode
this.imageScaleMode();
//run slidesLoaded callback when all images have been loaded
this.settings.slidesLoaded.scope(this.container.get(0))(this.length);
}
}).scope(this),200);
//make first slide active
this.slides.css('display','none').eq(this.index).css('display','block');
//for "slidefade" effect increase size of slide containers
if(this.settings.effect == 'slidefade'){
var w = 100 + Math.abs(this.settings.slidefadeOffsetX)*100/this.container.width();
var h = 100 + Math.abs(this.settings.slidefadeOffsetY)*100/this.container.height();
this.slides.css({width: w.toFixed(3)+'%', height: h.toFixed(3)+'%'});
}
//change image scale mode during resize
$(window).resize((function(){
//only set scale mode if visible
if(this.container.parents(':hidden').length == 0) {
this.imageScaleMode();
}
}).scope(this));
//register custom "backslider" event type
this.container.bind('backslider',(function(e,a,p){
if(typeof this[a] == 'function'){
this[a].scope(this)(p);
}
e.stopPropagation();
}).scope(this));
//set defaults for mode and effect
this.settings.mode = (this.modes[this.settings.mode])?this.settings.mode:'timer';
this.settings.effect = (this.effects[this.settings.effect])?this.settings.effect:'fade';
//run slider in specific mode
this.modes[this.settings.mode].scope(this)();
};
/* BackSlider Modes */
BackSlider.prototype.modes = {
timer: function(){
$('<a class="bs-timer" href="#bs"></a>').click((function(e){
(this.timer)?this.pause():this.resume();
e.preventDefault();
}).scope(this)).appendTo(this.container.find('.bs-controls'));
this.resume();
},
scroll: function(){
$('<div class="bs-scroll"></div>').appendTo(this.container.find('.bs-controls'));
var point = 0, step = 0;
$(window).bind('resize',(function(){
step = ($(document).height()-$(window).height())/(this.length-1);
}).scope(this)).trigger('resize');
if(step > 0){
$(window).bind('scroll',(function(){
point = Math.floor($(window).scrollTop()/step);
if(this.index != point){
window.clearTimeout(this.timer);
this.timer = window.setTimeout((function(){
this.slides.stop(true,true);
//shouldn't be the same slide when code is executed
if(this.index != point){
this.skip(point);
}
}).scope(this),this.settings.scrollTimeout);
}
}).scope(this));
}
},
controls: function(){
$('<a class="bs-previous" href="#bs"></a>').click((function(e){
this.previous();
e.preventDefault();
}).scope(this)).appendTo(this.container.find('.bs-controls'));
$('<a class="bs-next" href="#bs"></a>').click((function(e){
this.next();
e.preventDefault();
}).scope(this)).appendTo(this.container.find('.bs-controls'));
},
pagination: function(){
for(var i = 0; i < this.length; i++){
(function(p){
$('<a class="bs-pagination" href="#bs'+p+'"></a>').click((function(e){
this.skip(p);
e.preventDefault();
}).scope(this)).appendTo(this.container.find('.bs-controls'));
}).scope(this)(i);
}
this.skip(this.index);
this.updateControls();
},
thumbnails: function(){
var time = this.settings.thumbnailsTime;
var opacity = this.settings.thumbnailsOpacity;
for(var i = 0; i < this.length; i++){
(function(p){
var img = this.slides.eq(p).find('img');
var thumb = new Image();
thumb.alt = img.attr('alt');
$(thumb).bind('load',function(){
$(this).css((thumb.width/thumb.height>1)?'height':'width','40px');
$(this).removeAttr('width').removeAttr('height'); //for IE
}).hover(function(){
$(this).stop().fadeTo(time,1);
},function(){
if(!$(this).parent().hasClass('bs-active')){
$(this).stop().fadeTo(time,opacity);
}
}).css('opacity',opacity);
thumb.src = img.attr('src');
//assign click listeners to image thumbnails
$('<a class="bs-thumbnails" href="#bs'+p+'"></a>').click((function(e){
this.skip(p);
e.preventDefault();
}).scope(this)).append(thumb).appendTo(this.container.find('.bs-controls'));
}).scope(this)(i);
}
this.skip(this.index);
this.updateControls();
}
};
/* BackSlider Effects */
BackSlider.prototype.effects = {
fade: function(c,n){
//before callback
this.settings.beforeSlide.scope(this.container.get(0))(this.index,this.length);
c.stop().fadeOut(this.settings.effectTime/2,this.settings.effectEasing,(function(){
n.stop().fadeIn(this.settings.effectTime/2,this.settings.effectEasing,(function(){
//after callback
this.settings.afterSlide.scope(this.container.get(0))(this.index,this.length);
}).scope(this));
}
).scope(this));
},
crossfade: function(c,n){
//before callback
this.settings.beforeSlide.scope(this.container.get(0))(this.index,this.length);
c.stop().fadeOut(this.settings.effectTime,this.settings.effectEasing);
n.stop().fadeIn(this.settings.effectTime,this.settings.effectEasing,(function(){
//after callback
this.settings.afterSlide.scope(this.container.get(0))(this.index,this.length);
}).scope(this));
},
slidefade: function(c,n){
var s = {left:this.settings.slidefadeOffsetX,top:this.settings.slidefadeOffsetY,x:0,y:0};
if(this.settings.slidefadeOffsetX > 0){
s.x = -this.settings.slidefadeOffsetX;
s.left = 0;
}
if(this.settings.slidefadeOffsetY > 0){
s.y = -this.settings.slidefadeOffsetY;
s.top = 0;
}
//before callback
this.settings.beforeSlide.scope(this.container.get(0))(this.index,this.length);
c.css('z-index','').stop().fadeOut(this.settings.effectTime,this.settings.effectEasing);
n.css($.extend({display:'block',opacity:0,'z-index':20},s)).
stop().animate({opacity:1,top:s.y,left:s.x},
this.settings.effectTime,this.settings.effectEasing,(function(){
//after callback
this.settings.afterSlide.scope(this.container.get(0))(this.index,this.length);
}).scope(this));
},
slide: function(c,n){
if(this.container.children('.bs-coverslide').length == 0){
$('<div class="bs-coverslide"><img alt="Cover Slide" src=""></div>').prependTo(this.container);
}
//before callback
this.settings.beforeSlide.scope(this.container.get(0))(this.index,this.length);
//set coverslide image src and size in pixels
this.container.find('.bs-coverslide img').attr('src',c.find('img').attr('src')).css({
width: c.find('img').width(),
height: c.find('img').height()
});
//start animation and switch slides
this.container.find('.bs-coverslide').css({width:'100%'}).stop(true).animate({width:'0%'},
this.settings.effectTime,this.settings.effectEasing,
(function(){
//after callback
this.settings.afterSlide.scope(this.container.get(0))(this.index,this.length);
}).scope(this));
n.css('left',this.settings.slideOffset).show().stop(true,true).
animate({left:'0px'},this.settings.effectTime,this.settings.effectEasing);
c.hide();
}
};
/* BackSlider API */
BackSlider.prototype.next = function() {
this.slides.stop(true,true);
this.effects[this.settings.effect].scope(this)(this.currentSlide(),this.nextSlide());
this.updateControls();
this.reset(); //"timer" mode only
};
BackSlider.prototype.previous = function() {
var p = this.index;
this.slides.stop(true,true);
this.effects[this.settings.effect].scope(this)(this.currentSlide(),this.previousSlide());
this.updateControls();
this.reset(); //"timer" mode only
};
BackSlider.prototype.skip = function(n) {
if(this.index != n){
var p = this.index;
this.slides.stop(true,true);
this.effects[this.settings.effect].scope(this)(this.currentSlide(),this.positionSlide(n));
this.updateControls();
this.reset(); //"timer" mode only
}
};
BackSlider.prototype.pause = function(){
if(this.settings.mode == 'timer'){
this.container.find('.bs-timer').stop().fadeTo('fast',0,function(){
$(this).css('background-position','0px -80px').fadeTo('fast',1);
});
window.clearInterval(this.timer);
this.timer = 0;
}
};
BackSlider.prototype.resume = function(){
if(this.settings.mode == 'timer'){
var t = this.container.find('.bs-timer');
t.stop().fadeTo('fast',0,function(){
$(this).css('background-position','-20px 0px').fadeTo('fast',1);
});
var n = 0;
this.timer = window.setInterval((function(){
t.css('background-position','0px '+(-20*n)+'px');
n = n + 1;
if(n == 4) {
this.next(); n = 0;
}
}).scope(this),this.settings.timerDelay/4);
}
};
BackSlider.prototype.reset = function(){
this.pause();
this.resume();
};
/* BackSlider Internal Methods */
//return current slide
BackSlider.prototype.currentSlide = function(){
return this.slides.eq(this.index);
};
//return next slide
BackSlider.prototype.nextSlide = function(){
this.index = (this.index < this.length-1)?this.index+1:0;
return this.currentSlide();
};
//return previous slide
BackSlider.prototype.previousSlide = function(){
this.index = (this.index > 0)?this.index-1:this.length-1;
return this.currentSlide();
};
//return slide at specific position
BackSlider.prototype.positionSlide = function(n){
this.index = n;
return this.currentSlide();
};
//update controls accordingly with current slide position
BackSlider.prototype.updateControls = function(){
// pagination mode
if(this.settings.mode == 'pagination'){
this.container.find('.bs-pagination').removeClass('bs-active').eq(this.index).addClass('bs-active');
}
// thumbnails mode
if(this.settings.mode == 'thumbnails'){
this.container.find('.bs-active').removeClass('bs-active').children('img').
stop().fadeTo(this.settings.thumbnailsTime,this.settings.thumbnailsOpacity);
this.container.find('.bs-thumbnails:eq('+this.index+')').addClass('bs-active').
children('img').css('opacity',1);
}
};
//set proper orientation for slide image
BackSlider.prototype.imageScaleMode = function(){
var wasp = this.container.width()/this.container.height();
this.slides.find('img').each(function(){
if(this.height > 0){
var asp = this.width/this.height;
this.className = (wasp > asp)?'bs-landscape':'bs-portrait';
} else {
//set whatever is appropriate
this.className = 'bs-landscape';
}
});
};
//replace ranges with plain number sequences
BackSlider.prototype.getPhotoRange = function(){
var match, exp = /(\d+)-(\d+)/g;
var range = this.settings.photoRange;
while (match = exp.exec(range)) {
var seq = '';
for (var n = parseInt(match[1],10); n <= parseInt(match[2],10); n++) {
seq += n + ',';
}
range = range.replace(match[0],seq.substr(0,seq.length-1));
}
return range;
};
//load photos using Flickr Feed
BackSlider.prototype.photoSourceFlickrFeed = function(){
var base = 'http://api.flickr.com/services/feeds/photoset.gne';
//prepare query
var query = '';
for(var key in this.settings.flickrFeedQuery){
query += key+'='+this.settings.flickrFeedQuery[key]+'&';
}
query += 'lang=en-us&format=json&jsoncallback=?';
//send api request (using photoset.gne feed)
$.getJSON(base,query,(function(json){
var list = '';
var range = this.getPhotoRange();
$.each(json.items,function(i,item){
if(range === '' || range.search(new RegExp('\\b'+i+'\\b')) != -1){
list += '<li>'+'<img src="'+item.media.m.replace('_m','_b')+
'" alt="'+item.title.replace('"','\'')+'">'+'</li>';
list += "\r\n"; //newline
}
});
this.container.find('.bs-slides').html(list);
//backslider init
this.init();
}).scope(this));
};
//load photos from Flickr with Auth Key
BackSlider.prototype.photoSourceFlickrAuth = function(){
var base = 'http://api.flickr.com/services/rest/';
//prepare query
var query = '';
for(var key in this.settings.flickrAuthQuery){
query += key+'='+this.settings.flickrAuthQuery[key]+'&';
}
query += 'method=flickr.photosets.getPhotos&extras=url_o&format=json&jsoncallback=?';
//send api request (using flickr.photosets.getPhotos method)
$.getJSON(base,query,(function(json){
var list = '';
var range = this.getPhotoRange();
$.each(json.photoset.photo,function(i,item){
if(range === '' || range.search(new RegExp('\\b'+i+'\\b')) != -1){
list += '<li>'+'<img src="'+item.url_o+'" alt="'+item.title.replace('"','\'')+'">'+'</li>';
list += "\r\n"; //newline
}
});
this.container.find('.bs-slides').html(list);
//backslider init
this.init();
}).scope(this));
};
//load slides from Picasa
BackSlider.prototype.photoSourcePicasa = function(){
var base = 'https://picasaweb.google.com/data/feed/base/user/'+
this.settings.picasaQuery.user+'/albumid/'+this.settings.picasaQuery.album;
var query='alt=json&kind=photo&hl=en_US&fields=entry(title,media:group(media:content))';
//send API request
$.getJSON(base,query,(function(json){
var list = '';
var range = this.getPhotoRange();
$.each(json.feed.entry,function(i,item){
if(range === '' || range.search(new RegExp('\\b'+i+'\\b')) != -1){
var t = item.title.$t.replace('"','\'');
var s = item.media$group.media$content[0].url;
list += '<li>'+'<img src="'+s+'" alt="'+t+'">'+'</li>';
list += "\r\n"; //newline
}
});
this.container.find('.bs-slides').html(list);
//backalider init
this.init();
}).scope(this));
};
//method to change function scope
Function.prototype.scope = function(s){
var func = this;
return function(){
func.apply(s,Array.prototype.slice.call(arguments));
};
};
//jquery plugin
$.fn.backslider = function(s){
//default settings
var settings = $.extend(true,{
mode: 'timer', // mode - "timer", "scroll", "controls", "pagination", "thumbnails"
effect: 'fade', // effect - "fade", "crossfade", "slidefade", "slide"
effectTime: 1500, // effect animation time
effectEasing: 'easeOutCubic', // effect animation easing
slideOffset: 50, // "slide" effect offset
slidefadeOffsetX: 0, // "slidefade" effect X offset
slidefadeOffsetY: -50, // "slidefade" effect Y offset
timerDelay: 5000, // slideshow timer delay (for "timer" mode)
scrollTimeout: 200, // timeout before switching slides (for "scroll" mode)
preload: true, // preload images
preloadTime: 1000, // preload animation time
preloadDelay: 200, // preload animation delay
startSlide: 0, // slide to begin with
thumbnailsOpacity: 0.5, // thumbnails opacity (for "thumbnails" mode)
thumbnailsTime: 500, // thumbnails animation time (for "thumbnails" mode)
startRandom: true, // start on random slide
photoSource: 'none', // photo source - "flickrfeed", "flickrauth", "picasa" or "none"
photoRange: '', // photo range ("" or "1-3,5,6,7-9")
flickrFeedQuery: { // query arguments for "flickrfeed" photoSource
set: '00000000', // set ID
nsid: '00000000@N00' // user ID
},
flickrAuthQuery: { // query arguments for "flickrauth" photoSource
api_key: '00000000', // auth key
photoset_id: '00000000' // set ID
},
picasaQuery: { // query arguments for "picasa" photoSource
user: 'username', // picasa user name
album: '00000000' // picasa album ID
},
beforeSlide: function(){}, // before slide callback
afterSlide: function(){}, // after slide callback
slidesLoaded: function(){} // slide images load callback
},s);
//create BackSlider only if jQuery object not empty
if(this.length > 0) {
//create BackSlider object
var bs = new BackSlider(this,settings);
//return jQuery object for chaining
return this.data('backslider',bs);
}
return this;
};
})(jQuery);
ACC SHELL 2018