(function($){
$.fn.parallaxSlider=function(o){
var options = {
prevButton: $('.prevButton')
, nextButton: $('.nextButton')
, duration: 1000
, autoSwitcher: true
, autoSwitcherDelay: 7000
, slider_navs: true
, scrolling_description: false
, slider_pagination: 'buttons_pagination'
, animateLayout: 'zoom-fade-eff' //simple-fade-eff, zoom-fade-eff, slide-top-eff
, parallaxEffect: 'parallax_effect_normal'
, parallaxInvert: false
, liteMode: false
}
$.extend(options, o);
var
_this = $(this)
, _window = $(window)
, _document = $(document)
, ImgIdCounter = 0
, previewArray = []
, isPreviewLoading = false
, isPreviewAnimate = false
, intervalSwitcher
, parsedArray
, parallax = true
, parallaxType = 'parallax_normal'
, _baseHeight
, _thisOffset =_this.offset()
, _thisOffsetTop = _this.offset().top
, _thisHeight = _this.height()
, _windowWidth = _window.width()
, _windowHeight = _window.height()
, itemLength = 0
, bufferRatio
;
var
img
, imgBlock
, mainImageHolder
, primaryImageHolder
, secondaryHolder
, mainCaptionHolder
, primaryCaption
, secondaryCaption
, mainCaptionHolderContainer
, previewSpinner
, parallaxPrevBtn
, parallaxNextBtn
, slidesCounterList
, paralaxSliderPagination
;
//--------------- Init ------------------//
init();
function init(){
parsedArray = [];
$('ul li', _this).each(
function(){
parsedArray.push([$(this).attr('data-preview'), $(this).attr('data-thumb-url'), $(this).html()]);
}
)
// holder erase
_this.html('');
_this.addClass(options.animateLayout);
// preview holder build
imgBlocksStructure = !options.liteMode ? "
" : "";
_this.append(imgBlocksStructure);
mainImageHolder = $('#mainImageHolder');
primaryImageHolder = $('> .primaryHolder', mainImageHolder);
secondarImageHolder = $('> .secondaryHolder', mainImageHolder);
imgBlock = $('.imgBlock', mainImageHolder);
// caption holder build
_this.append("");
mainCaptionHolder = $('#mainCaptionHolder');
primaryCaption = $('.primaryCaption', mainCaptionHolder);
secondaryCaption = $('.secondaryCaption', mainCaptionHolder);
mainCaptionHolderContainer = $('>.container', mainCaptionHolder);
// controls build
_this.append("");
parallaxPrevBtn = $('.parallaxPrevBtn', _this);
parallaxNextBtn = $('.parallaxNextBtn', _this);
// fullpreview pagination build
_this.append("");
paralaxSliderPagination = $('#paralaxSliderPagination');
slidesCounterList = $('.slidesCounter', _this);
// preview loader build
_this.append("
");
previewSpinner = $('#previewSpinner');
_this.on("reBuild",
function(e,d){
setBuilder(d);
}
)
_this.on("switchNext",
function(e){
nextSwither();
}
)
_this.on("switchPrev",
function(e){
prevSwither();
}
)
setBuilder({'urlArray':parsedArray});
if(!options.slider_navs){
parallaxPrevBtn.remove();
parallaxNextBtn.remove();
}
if(options.slider_pagination == 'none_pagination'){
paralaxSliderPagination.remove();
}
if(options.liteMode) options.parallaxEffect = 'parallax_none';
switch (options.parallaxEffect) {
case 'parallax_effect_low':
if(!options.parallaxInvert){
parallaxType = 'parallax_normal';
} else {
parallaxType = 'parallax_invert';
}
bufferRatio = 3;
break
case 'parallax_effect_normal':
if(!options.parallaxInvert){
parallaxType = 'parallax_normal';
} else {
parallaxType = 'parallax_invert';
}
bufferRatio = 2.25;
break
case 'parallax_effect_high':
if(!options.parallaxInvert){
parallaxType = 'parallax_normal';
} else {
parallaxType = 'parallax_invert';
}
bufferRatio = 1.5;
break
case 'parallax_effect_fixed':
if($.browser.msie){
parallax = false;
imgBlock.css({backgroundAttachment:'fixed'});
} else {
parallaxType = 'parallax_fixes';
}
bufferRatio = 1;
break
default:
parallax = false;
parallaxType = 'parallax_none';
break
}
_baseHeight = getBaseHeight();
addEventsFunction();
autoSwitcher();
}
//------------------------- set Builder -----------------------------//
function setBuilder(dataObj){
currIndex = 0;
ImgIdCounter = 0;
previewArray = [];
previewArray = dataObj.urlArray;
itemLength = previewArray.length;
$(">ul", paralaxSliderPagination).empty();
switch (options.slider_pagination) {
case 'buttons_pagination':
paralaxSliderPagination.addClass('buttons_pagination');
for (var i = 0; i < itemLength; i++) {
$(">ul", paralaxSliderPagination).append("");
};
break
case 'images_pagination':
paralaxSliderPagination.addClass('images_pagination');
for (var i = 0; i < itemLength; i++) {
$(">ul", paralaxSliderPagination).append("");
};
break
}
if(itemLength==1){
paralaxSliderPagination.remove();
parallaxPrevBtn.remove();
parallaxNextBtn.remove();
}
imageSwitcher(0);
addEventsPagination();
}
function autoSwitcher(){
if(options.autoSwitcher){
if(itemLength>1){
intervalSwitcher = setInterval(function(){
nextSwither();
}, options.autoSwitcherDelay);
}
}
}
//--------------- addEvents ----------------------//
function addEventsPagination(){
$(">ul >li", paralaxSliderPagination).on("click",
function(){
if((!isPreviewLoading) && (!isPreviewAnimate) && ($(this).index() !== ImgIdCounter)){
clearInterval(intervalSwitcher);
ImgIdCounter = $(this).index();
imageSwitcher(ImgIdCounter);
}
}
)
}
function addEventsFunction(){
//--------------- controls events ----------------------//
options.prevButton.on("click",
function(){
clearInterval(intervalSwitcher);
prevSwither();
}
)
options.nextButton.on("click",
function(){
clearInterval(intervalSwitcher);
nextSwither();
}
)
parallaxPrevBtn.on("click",
function(){
clearInterval(intervalSwitcher);
prevSwither();
}
)
parallaxNextBtn.on("click",
function(){
clearInterval(intervalSwitcher);
nextSwither();
}
)
//--------------- keyboard events ----------------------//
_window.on("keydown",
function(eventObject){
switch (eventObject.keyCode){
case 37:
clearInterval(intervalSwitcher);
prevSwither();
break
case 39:
clearInterval(intervalSwitcher);
nextSwither();
break
}
}
)
//------------------ window scroll event -------------//
$(window).on('scroll',
function(){
mainScrollFunction();
}
).trigger('scroll');
//------------------ window resize event -------------//
$(window).on("resize",
function(){
mainResizeFunction();
}
)
}
//-----------------------------------------------------------------
function prevSwither(){
if(!isPreviewLoading && !isPreviewAnimate){
if(ImgIdCounter > 0){
ImgIdCounter--;
}else{
ImgIdCounter = itemLength-1;
}
imageSwitcher(ImgIdCounter);
}
}
function nextSwither(){
if(!isPreviewLoading && !isPreviewAnimate){
if(ImgIdCounter < itemLength-1){
ImgIdCounter++;
}else{
ImgIdCounter = 0;
}
imageSwitcher(ImgIdCounter);
}
}
//------------------------- main Swither ----------------------------//
function imageSwitcher(currIndex){
slidesCounterList.text((currIndex+1) + '/'+itemLength);
$(">ul >li", paralaxSliderPagination).removeClass('active').eq(currIndex).addClass('active');
objectCssTransition(primaryImageHolder, 0, 'ease');
primaryImageHolder.addClass('animateState');
primaryCaption.html(previewArray[currIndex][2]);
objectCssTransition(primaryCaption, 0, 'ease');
primaryCaption.addClass('animateState');
isPreviewLoading = true;
isPreviewAnimate = true;
previewSpinner.css({display:'block'}).stop().fadeTo(300, 1);
img = new Image();
img.src = previewArray[currIndex][0];
img.onload = function () {
isPreviewLoading = false;
previewSpinner.stop().fadeTo(300, 0, function(){ $(this).css({display:'none'}); })
primaryImage = $('>.imgBlock', primaryImageHolder);
if(!options.liteMode){ primaryImage.css('background-image', 'url(' + img.src + ')'); } else { primaryImage.attr('src', img.src); }
objectResize(primaryImage, _windowWidth, _baseHeight);
objectCssTransition(primaryImageHolder, options.duration, 'outCubic');
primaryImageHolder.removeClass('animateState');
objectCssTransition(secondarImageHolder, options.duration, 'outCubic');
secondarImageHolder.addClass('animateState');
objectCssTransition(primaryCaption, options.duration, 'outCubic');
primaryCaption.removeClass('animateState');
objectCssTransition(secondaryCaption, options.duration, 'outCubic');
secondaryCaption.addClass('animateState');
mainCaptionHolderContainer.height(primaryCaption.height());
setTimeout(
function(){
secondarImage = $('>.imgBlock', secondarImageHolder);
if(!options.liteMode){ secondarImage.css('background-image', 'url(' + img.src + ')'); } else { secondarImage.attr('src', img.src); }
objectResize(secondarImage, _windowWidth, _baseHeight);
objectCssTransition(secondarImageHolder, 0, 'ease');
secondarImageHolder.removeClass('animateState');
secondaryCaption.html(previewArray[currIndex][2]);
objectCssTransition(secondaryCaption, 0, 'ease');
secondaryCaption.removeClass('animateState');
isPreviewAnimate = false;
}, options.duration
)
}
}
//----------------------------------------------------//
function objectCssTransition(obj, duration, ease){
var durationValue;
if(duration !== 0){
durationValue = duration/1000;
}else{
durationValue = 0
}
switch(ease){
case 'ease':
obj.css({"-webkit-transition":"all "+durationValue+"s ease", "-moz-transition":"all "+durationValue+"s ease", "-o-transition":"all "+durationValue+"s ease", "transition":"all "+durationValue+"s ease"});
break;
case 'outSine':
obj.css({"-webkit-transition":"all "+durationValue+"s cubic-bezier(0.470, 0.000, 0.745, 0.715)", "-moz-transition":"all "+durationValue+"s cubic-bezier(0.470, 0.000, 0.745, 0.715)", "-o-transition":"all "+durationValue+"s cubic-bezier(0.470, 0.000, 0.745, 0.715)", "transition":"all "+durationValue+"s cubic-bezier(0.470, 0.000, 0.745, 0.715)"});
break;
case 'outCubic':
obj.css({"-webkit-transition":"all "+durationValue+"s cubic-bezier(0.215, 0.610, 0.355, 1.000)", "-moz-transition":"all "+durationValue+"s cubic-bezier(0.215, 0.610, 0.355, 1.000)", "-o-transition":"all "+durationValue+"s cubic-bezier(0.215, 0.610, 0.355, 1.000)", "transition":"all "+durationValue+"s cubic-bezier(0.215, 0.610, 0.355, 1.000)"});
break;
case 'outExpo':
obj.css({"-webkit-transition":"all "+durationValue+"s cubic-bezier(0.190, 1.000, 0.220, 1.000)", "-moz-transition":"all "+durationValue+"s cubic-bezier(0.190, 1.000, 0.220, 1.000)", "-o-transition":"all "+durationValue+"s cubic-bezier(0.190, 1.000, 0.220, 1.000)", "transition":"all "+durationValue+"s cubic-bezier(0.190, 1.000, 0.220, 1.000)"});
break;
case 'outBack':
obj.css({"-webkit-transition":"all "+durationValue+"s cubic-bezier(0.175, 0.885, 0.320, 1.275)", "-moz-transition":"all "+durationValue+"s cubic-bezier(0.175, 0.885, 0.320, 1.275)", "-o-transition":"all "+durationValue+"s cubic-bezier(0.175, 0.885, 0.320, 1.275)", "transition":"all "+durationValue+"s cubic-bezier(0.175, 0.885, 0.320, 1.275)"});
break;
}
}
//------------------------ Object resize ----------------------------//
function objectResize(obj, baseWidth, baseHeight )
{
var imageRatio,
originalImgWidth,
originalImgHeight,
newImgWidth,
newImgHeight,
newImgTop,
newImgLeft;
originalImgWidth = img.width;
originalImgHeight = img.height;
imageRatio = originalImgHeight/originalImgWidth;
containerRatio = baseHeight/baseWidth;
if(containerRatio > imageRatio){
newImgHeight = baseHeight;
newImgWidth = Math.round( (newImgHeight*originalImgWidth) / originalImgHeight );
}else{
newImgWidth = baseWidth;
newImgHeight = Math.round( (newImgWidth*originalImgHeight) / originalImgWidth );
}
newImgLeft=-(newImgWidth-baseWidth)*.5;
newImgTop= -(newImgHeight-baseHeight)*.1;
if(!options.liteMode){ obj.css({width: '100%', height: newImgHeight, marginTop: newImgTop}); } else { obj.css({width: newImgWidth, height: newImgHeight, marginTop: newImgTop, marginLeft: newImgLeft}); }
}
//------------------- main window scroll function -------------------//
function mainScrollFunction(){
if(parallax || options.scrolling_description && !options.liteMode){
var _documentScrollTop
, startScrollTop
, endScrollTop
;
_thisOffsetTop = _thisOffset.top;
_documentScrollTop = _document.scrollTop();
startScrollTop = _documentScrollTop + _windowHeight;
endScrollTop = _documentScrollTop - _thisHeight;
if((startScrollTop > _thisOffsetTop) && (endScrollTop < _thisOffsetTop)){
y = _documentScrollTop - _thisOffsetTop;
if(parallax){
if(!options.parallaxInvert) {
newPositionTop = parseInt(y / bufferRatio);
} else {
if(_thisOffsetTop < Math.abs(_windowHeight-_thisHeight)){
newPositionTop = -parseInt(y / bufferRatio) - parseInt(_thisOffsetTop / bufferRatio);
} else{
newPositionTop = -parseInt(y / bufferRatio) - parseInt(_windowHeight / bufferRatio)
}
}
mainImageHolder.css({ top: newPositionTop + 'px' });
}
if(options.scrolling_description){
description_opacity = (1-(y / _thisHeight)).toFixed(2);
if(description_opacity < 1) mainCaptionHolder.css('opacity', description_opacity);
description_offset = parseInt(y/2.5);
if(description_offset > 0) {
mainCaptionHolder.css('top', description_offset);
} else {
mainCaptionHolder.css('top', '0px');
}
}
}
}
}
//------------------- main window resize function -------------------//
function mainResizeFunction(){
_windowWidth = _window.width();
_windowHeight = _window.height();
_thisWidth = _this.width();
_thisHeight = _this.height();
_baseHeight = getBaseHeight();
objectResize(imgBlock, _thisWidth, _baseHeight);
}
//------------------- get heigth function -------------------//
function getBaseHeight(){
switch (parallaxType) {
case 'parallax_normal':
if(_thisOffsetTop < (_windowHeight-_thisHeight)){
baseHeight = _thisHeight + parseInt(_thisOffsetTop/bufferRatio);
} else {
baseHeight = _thisHeight + parseInt((_windowHeight - _thisHeight)/bufferRatio);
}
break
case 'parallax_invert':
if(_thisOffsetTop < Math.abs(_windowHeight-_thisHeight)){
baseHeight = _thisHeight + parseInt((_thisOffsetTop + _thisHeight)/bufferRatio);
} else {
baseHeight = _thisHeight + parseInt((_windowHeight + _thisHeight)/bufferRatio);
}
break
case 'parallax_fixes':
if((_thisOffsetTop + _thisHeight) < _windowHeight){
baseHeight = _thisOffsetTop + _thisHeight;
} else {
baseHeight = _windowHeight;
}
break
case 'parallax_none':
baseHeight = _thisHeight;
break
}
return baseHeight;
}
function toRadians (angle) {
return angle * (Math.PI / 180);
}
}
})(jQuery)