/*
* MtabSlider v8.1
*
* Copyright 2011-2012, Dmitry Semenov
*
*/
(function($) {
function MtabSlider(element, options) {
this.slider = $(element);
this._downEvent = "";
this._moveEvent = "";
this._upEvent = "";
var self = this;
this.settings = $.extend({}, $.fn.mtabSlider.defaults, options);
this.isSlideshowRunning = false;
this._slideshowHoverLastState = false;
this._dragContainer = this.slider.find(".mtabSlidesContainer");
this._slidesWrapper = this._dragContainer.wrap('
').parent();
this.slides = this._dragContainer.find(".mtabSlide");
this._preloader = "";
this._successfullyDragged = false;
this._useWebkitTransition = false;
if("ontouchstart" in window) {
if(!this.settings.disableTranslate3d) {
if(('WebKitCSSMatrix' in window && 'm11' in new WebKitCSSMatrix())) {
this._dragContainer.css({"-webkit-transform-origin":"0 0", "-webkit-transform": "translateZ(0)"});
this._useWebkitTransition = true;
}
}
this.hasTouch = true;
this._downEvent = "touchstart.rs";
this._moveEvent = "touchmove.rs";
this._upEvent = "touchend.rs";
} else {
this.hasTouch = false;
if(this.settings.dragUsingMouse) {
this._downEvent = "mousedown.rs";
this._moveEvent = "mousemove.rs";
this._upEvent = "mouseup.rs";
} else {
// set cursor to auto if drag navigation is disabled
this._dragContainer.addClass('auto-cursor');
}
}
if(this.hasTouch) {
this.settings.directionNavAutoHide = false;
this.settings.hideArrowOnLastSlide = true;
}
if ($.browser.msie && parseInt($.browser.version, 10) <= 8) {
this._isIE8 = true;
} else {
this._isIE8 = false;
}
this.slidesArr = [];
var slideObj,
jqSlide,
dataSRC,
slideImg;
// parse slides
this.slides.each(function() {
jqSlide = $(this);
slideObj = {};
slideObj.slide = jqSlide;
// block all links inside slides
if(self.settings.blockLinksOnDrag) {
if(!this.hasTouch) {
jqSlide.find('a').bind('click.rs', function(e) {
if(self._successfullyDragged) {
e.preventDefault();
return false;
}
});
} else {
// Fix open link bug on touch devices
var jqLinks = jqSlide.find('a');
var jqLink;
jqLinks.each(function() {
jqLink = $(this);
jqLink.data('mtabhref', jqLink.attr('href'));
jqLink.data('mtabtarget', jqLink.attr('target'));
jqLink.attr('href', '#');
jqLink.bind('click', function(e) {
e.preventDefault();
if(self._successfullyDragged) {
return false;
} else {
var linkData = $(this).data('mtabhref');
var linkTarget = $(this).data('mtabtarget');
if(!linkTarget || linkTarget.toLowerCase() === '_self') {
window.location.href = linkData;
} else {
window.open(linkData);
}
}
});
});
}
}
// prevent dragging on all elements that have 'non-draggable' class
if(self.settings.nonDraggableClassEnabled) {
jqSlide.find('.non-draggable').bind(self._downEvent, function(e) {
self._successfullyDragged = false;
e.stopImmediatePropagation();
});
}
dataSRC = jqSlide.attr("data-src");
if(dataSRC == undefined || dataSRC == "" || dataSRC == "none") {
slideObj.preload = false;
} else {
slideObj.preload = true;
slideObj.preloadURL = dataSRC;
}
if(self.settings.captionAnimationEnabled) {
slideObj.caption = jqSlide.find(".mtabCaption").css("display", "none");
}
self.slidesArr.push(slideObj);
});
this._removeFadeAnimation = false;
if(this.settings.removeCaptionsOpacityInIE8) {
if ($.browser.msie && parseInt($.browser.version, 10) <= 8) {
this._removeFadeAnimation = true;
}
}
if(this.settings.autoScaleSlider) {
this.sliderScaleRatio = this.settings.autoScaleSliderHeight / this.settings.autoScaleSliderWidth ;
}
this.slider.css("overflow","visible");
this.slideWidth = 0;
this.slideshowTimer = '';
this._alreadyStoped = false;
this.numSlides = this.slides.length;
this.currentSlideId = this.settings.startSlideIndex;
this.lastSlideId = -1;
this.isAnimating = true;
this.wasSlideshowPlaying = false;
// Used for checking back/forward drag direction
this._currentDragPosition = 0;
this._lastDragPosition = 0;
this._blockThumbnailsScroll = false;
// Stores caption animations and clears after next slide is shown
this._captionAnimateTimeouts = [];
this._captionAnimateProperties = [];
this._blockClickEvents = false;
this._dragBlocked = false;
this._startTime = 0;
this._accelerationX = 0;
this._tx = 0;
this._startMouseX = 0;
//used for detecting horizonal or vertical drag move
this._startMouseY = 0;
this._startPos = 0;
this._isDragging = false;
this._isHovering = false;
// Setup transition
if(this.settings.slideTransitionType === "fade") {
if(this._useWebkitTransition || ('WebKitCSSMatrix' in window && 'm11' in new WebKitCSSMatrix())) {
this._animateCSS3Opacity = true;
} else {
this._animateCSS3Opacity = false;
}
this._fadeContainer = $("").appendTo(this._slidesWrapper);
}
// Setup Slideshow
if(this.settings.slideshowEnabled && this.settings.slideshowDelay > 0) {
if(!this.hasTouch && this.settings.slideshowPauseOnHover) {
this.slider.hover(
function() {
self._isHovering = true;
self._stopSlideshow(true);
},
function() {
self._isHovering = false;
self._resumeSlideshow(true);
}
);
}
this.slideshowEnabled = true;
} else {
this.slideshowEnabled = false;
}
this._setGrabCursor();
// Setup control nav (thumbs/bullets)
if(this.settings.controlNavEnabled) {
var _navigation;
this._navigationContainer = '';
var _thumbsAndArrowsContainer;
if(!self.settings.controlNavThumbs) {
this._navigationContainer = $('');
_navigation = this._navigationContainer.find('.mtabControlNavCenterer');
} else {
this.slider.addClass('with-thumbs');
if(self.settings.controlNavThumbsNavigation) {
_thumbsAndArrowsContainer = $('');
this.thumbsArrowLeft = $("");
this.thumbsArrowRight = $("");
_thumbsAndArrowsContainer.append(this.thumbsArrowLeft);
_thumbsAndArrowsContainer.append(this.thumbsArrowRight);
// get size of thumbs scroller based on slider size and thumbs arrows size
var thumbArrowLeftWidth = parseInt(this.thumbsArrowLeft.outerWidth(), 10);
//_navigationContainer = $('');
this._navigationContainer = $('');
_navigation = this._navigationContainer.find('.mtabControlNavThumbsContainer');
} else {
this._navigationContainer = $('');
_navigation = this._navigationContainer.find(".mtabControlNavCenterer");
}
}
var cSlideId = 0;
this.slides.each(function(index){
if(self.settings.controlNavThumbs) {
_navigation.append('' + (index + 1) + '');
} else {
if(self.settings.controlNavThumbsTxt) {
if (typeof $(this).attr("data-menu") != "undefined") {
// _navigation.append('
');
_navigation.append('
');
} else {
_navigation.append('' + $(this).attr("data-title") + '');
}
} else {
_navigation.append('');
}
}
cSlideId++;
});
this.navItems = _navigation.children();
if(_thumbsAndArrowsContainer) {
_thumbsAndArrowsContainer.append(this._navigationContainer);
this._slidesWrapper.after(_thumbsAndArrowsContainer);
} else {
this._slidesWrapper.after(this._navigationContainer);
}
// Thumbnails navigation
if(self.settings.controlNavThumbs && self.settings.controlNavThumbsNavigation) {
this._thumbsArrowLeftBlocked = true;
this._thumbsArrowRightBlocked = false;
this._thumbsNavContainer = _navigation;
if(this._useWebkitTransition) {
this._thumbsNavContainer.css({'-webkit-transition-duration': this.settings.controlNavThumbsSpeed + "ms",
'-webkit-transition-property': '-webkit-transform',
'-webkit-transition-timing-function': "ease-in-out"
});
}
this._numThumbItems = cSlideId;
var firstItem = this.navItems.eq(0);
this._outerThumbWidth = firstItem.outerWidth(true);
this._thumbsTotalWidth = this._outerThumbWidth * this._numThumbItems;
this._thumbsNavContainer.css("width",this._thumbsTotalWidth);
this._thumbsSpacing = parseInt(firstItem.css("marginRight"), 10);
this._thumbsTotalWidth -= this._thumbsSpacing;
this._currThumbsX = 0;
this._recalculateThumbsScroller();
this.thumbsArrowLeft.click(function(e){
e.preventDefault();
if(!self._thumbsArrowLeftBlocked) {
self._animateThumbs(self._currThumbsX + self._thumbsContainerWidth + self._thumbsSpacing);
}
});
this.thumbsArrowRight.click(function(e){
e.preventDefault();
if(!self._thumbsArrowRightBlocked) {
self._animateThumbs(self._currThumbsX - self._thumbsContainerWidth - self._thumbsSpacing);
}
});
}
this._updateControlNav();
}
//Direction navigation (arrows)
if(this.settings.directionNavEnabled) {
this._slidesWrapper.after("");
// this._slidesWrapper.after("");
this.arrowLeft = this.slider.find("a.arrow.left");
this.arrowRight = this.slider.find("a.arrow.right");
if(this.arrowLeft.length < 1 || this.arrowRight.length < 1) {
this.settings.directionNavEnabled = false;
} else if(this.settings.directionNavAutoHide) {
this.arrowLeft.hide();
this.arrowRight.hide();
this.slider.one("mousemove.arrowshover",function() {
self.arrowLeft.fadeIn("fast");
self.arrowRight.fadeIn("fast");
});
this.slider.hover(
function() {
self.arrowLeft.fadeIn("fast");
self.arrowRight.fadeIn("fast");
},
function() {
self.arrowLeft.fadeOut("fast");
self.arrowRight.fadeOut("fast");
}
);
}
this._updateDirectionNav();
}
// Manage window resize event with 100ms delay
this.sliderWidth = 0;
this.sliderHeight = 0;
var resizeTimer;
this._resizeEvent = 'onorientationchange' in window ? 'orientationchange.mtabslider' : 'resize.mtabslider';
$(window).bind(this._resizeEvent, function() {
if (resizeTimer) {
clearTimeout(resizeTimer);
}
resizeTimer = setTimeout(function() { self.updateSliderSize(); }, 100);
});
this.updateSliderSize();
this.settings.beforeLoadStart.call(this);
// loading screen handling
var firstSlide = this.slidesArr[this.currentSlideId];
if(this.currentSlideId != 0) {
if(!this._useWebkitTransition) {
this._dragContainer.css({ 'left':-this.currentSlideId * this.slideWidth});
} else {
this._dragContainer.css({ '-webkit-transition-duration':'0', '-webkit-transition-property': 'none' });
this._dragContainer.css({ '-webkit-transform': 'translate3d(' + -this.currentSlideId * this.slideWidth + 'px, 0, 0)' });
}
}
if(this.settings.welcomeScreenEnabled) {
// gets url of image to preload (background-image of slide)
function hideWelcomeScreen(preloadNearby) {
self.settings.loadingComplete.call(self);
if(preloadNearby && self.settings.preloadNearbyImages) {
self._preloadNearbyImages(self.currentSlideId);
}
self.slider.find('.mtabLoadingScreen').fadeOut(self.settings.welcomeScreenShowSpeed);
setTimeout(function(){ self._startSlider(); }, self.settings.welcomeScreenShowSpeed + 100);
}
if(firstSlide.preload) {
// lazy-load image
this._preloadNearbyImages(this.currentSlideId, function(){
hideWelcomeScreen( false );
});
} else {
slideImg = firstSlide.slide.find( 'img.mtabImage' )[0];
if(slideImg) {
if(this._isImageLoaded(slideImg)) {
hideWelcomeScreen( true );
$(slideImg).css('opacity',0);
$(slideImg).animate({"opacity":1}, "fast");
} else {
// create new image and wait it to load (IE bug)
$(slideImg).css('opacity',0);
$('
').load( function(){
hideWelcomeScreen( true );
$(slideImg).animate({"opacity":1}, "fast");
}).attr('src', slideImg.src);
}
}
else {
// no image tag, just start slider
hideWelcomeScreen( true );
}
}
} else {
if(firstSlide.preload) {
// lazy-load image
this._preloadImage(firstSlide, function(){
self.settings.loadingComplete.call(self);
if(self.settings.preloadNearbyImages) {
self._preloadNearbyImages(self.currentSlideId);
}
});
} else {
slideImg = firstSlide.slide.find( 'img.mtabImage' )[0];
if(slideImg) {
if(this._isImageLoaded(slideImg)) {
$(slideImg).css('opacity',0).animate({"opacity":1}, "fast");
} else {
$(slideImg).css('opacity',0);
$('
').load( function(){
$(slideImg).animate({"opacity":1}, "fast");
}).attr('src', slideImg.src);
}
}
this.settings.loadingComplete.call(this);
}
setTimeout(function(){ self._startSlider(); },100);
}
} /* MtabSlider Constructor End */
/* -------------------------------------MtabSlider Prototype------------------------------------------------------*/
MtabSlider.prototype = {
/**
* Move to slide with specified id.
* @id Slide id (integer).
* @silent Go to slide without animation
* @fromNav Used for advanced thumbs navigation (boolean). Don't touch it ;)
*/
goTo:function(id, silent, fromNav, fromTouch, customSpeed) {
if(!this.isAnimating) {
this.isAnimating = true;
var self = this;
this.lastSlideId = this.currentSlideId;
this.currentSlideId = id;
this._dragBlocked = true;
this._blockClickEvents = true;
if(this.lastSlideId != id) {
this._updateControlNav(fromNav);
this._preloadNearbyImages(id);
}
this._updateDirectionNav();
this.settings.beforeSlideChange.call(this);
if(this.slideshowEnabled && this.slideshowTimer) {
this.wasSlideshowPlaying = true;
this._stopSlideshow();
}
// Animate slide
var slideAnimSpeed = !silent ? this.settings.slideTransitionSpeed : 0;
if(fromTouch || silent || this.settings.slideTransitionType === "move") {
var easing;
if(customSpeed > 0) {
slideAnimSpeed = customSpeed;
} else {
easing = this.settings.slideTransitionEasing;
}
if(!this._useWebkitTransition) {
if(parseInt(this._dragContainer.css("left"), 10) !== -this.currentSlideId * this.slideWidth){
this._dragContainer.animate(
{left: -this.currentSlideId * this.slideWidth},
slideAnimSpeed,
(customSpeed > 0 ? "easeOutSine" : this.settings.slideTransitionEasing),
function(){self._onSlideAnimationComplete();
});
} else {
this._onSlideAnimationComplete();
}
} else {
if(this._getWebkitTransformX() !== -this.currentSlideId * this.slideWidth) {
this._dragContainer.bind("webkitTransitionEnd.rs", function(e) {
if(e.target == self._dragContainer.get(0)) {
self._dragContainer.unbind("webkitTransitionEnd.rs");
self._onSlideAnimationComplete();
}
});
this._dragContainer.css({
'-webkit-transition-duration': slideAnimSpeed + "ms",
'-webkit-transition-property': '-webkit-transform',
'-webkit-transition-timing-function': (customSpeed > 0 ? "ease-out" : "ease-in-out"),
'-webkit-transform': 'translate3d(' + -this.currentSlideId * this.slideWidth + 'px, 0, 0)'
});
} else {
this._onSlideAnimationComplete();
}
}
} else {
// Fade transition
var currSlide = this.slidesArr[this.lastSlideId].slide;
var newSlide = currSlide.clone().appendTo(this._fadeContainer);
if(!this._animateCSS3Opacity) {
this._dragContainer.css({left: -this.currentSlideId * this.slideWidth});
newSlide.animate({opacity:0}, slideAnimSpeed, this.settings.slideTransitionEasing, function() {
newSlide.remove();
self._onSlideAnimationComplete();
});
} else {
if(!this._useWebkitTransition) {
this._dragContainer.css({left: -this.currentSlideId * this.slideWidth});
} else {
this._dragContainer.css({
'-webkit-transition-duration': '0',
'-webkit-transform': 'translate3d(' + -this.currentSlideId * this.slideWidth + 'px, 0, 0)',
'opacity':'1'
});
}
setTimeout(function(){
newSlide.bind("webkitTransitionEnd.rs", function(e) {
if(e.target == newSlide.get(0)) {
newSlide.unbind("webkitTransitionEnd.rs");
newSlide.remove();
self._onSlideAnimationComplete();
}
});
newSlide.css({
'-webkit-transition-duration': slideAnimSpeed + "ms",
'-webkit-transition-property': 'opacity',
'-webkit-transition-timing-function': "ease-in-out"
});
newSlide.css('opacity', 0);
}, 100);
}
}
}
},
//go to slide without animation
goToSilent:function(id) {
this.goTo(id, true);
},
// go to prev slide (cyclic)
prev:function() {
if(this.currentSlideId <= 0) {
this.goTo(this.numSlides - 1);
} else {
this._moveSlideLeft();
}
},
// go to next slide (cyclic)
next:function() {
//go from last to first
if(this.currentSlideId >= this.numSlides - 1) {
this.goTo(0);
} else {
this._moveSlideRight();
}
},
// handling browser resize onresize
updateSliderSize:function() {
var self = this;
var newWidth;
var newHeight;
if(this.settings.autoScaleSlider) {
newWidth = this.slider.width();
if(newWidth != this.sliderWidth) {
this.slider.css("height", newWidth * this.sliderScaleRatio);
}
}
newWidth = this.slider.width();
newHeight = this.slider.height();
if(newWidth != this.sliderWidth || newHeight != this.sliderHeight) {
this.sliderWidth = newWidth;
this.sliderHeight = newHeight;
this.slideWidth = this.sliderWidth + this.settings.slideSpacing;
var arLen=this.slidesArr.length;
var _currItem, _currImg;
for ( var i=0, len=arLen; i 0 && i < arLen - 1) {
_currItem.slide.css("cssText", "margin-right:"+ this.settings.slideSpacing +"px !important;");
}
_currItem.slide.css({height: self.sliderHeight, width: self.sliderWidth});
}
if(!this._useWebkitTransition) {
this._dragContainer.css({"left":-this.currentSlideId * this.slideWidth, width:this.slideWidth * this.numSlides});
} else {
if(!this._dragBlocked) {
this._dragContainer.css({'-webkit-transition-duration':'0',
'-webkit-transition-property': 'none'});
this._dragContainer.css({
'-webkit-transform': 'translate3d(' + -this.currentSlideId * this.slideWidth + 'px, 0, 0)',
width:this.slideWidth * this.numSlides
});
}
}
if(this.settings.controlNavThumbs && this.settings.controlNavThumbsNavigation) {
this._recalculateThumbsScroller();
}
}
},
stopSlideshow: function() {
this._stopSlideshow();
this.slideshowEnabled = false;
this.wasSlideshowPlaying = false;
},
resumeSlideshow: function() {
this.slideshowEnabled = true;
if(!this.wasSlideshowPlaying) {
this._resumeSlideshow();
}
},
// destroy slider instance
destroy: function() {
this._stopSlideshow();
this._dragContainer.unbind(this._downEvent);
$(document).unbind(this._moveEvent).unbind(this._upEvent);
$(window).unbind(this._resizeEvent);
if(this.settings.keyboardNavEnabled) {
$(document).unbind("keydown.rs");
}
this.slider.remove();
delete this.slider;
},
_preloadNearbyImages: function(id, firstLoadedCallback) {
if(this.settings.preloadNearbyImages) {
var self = this;
this._preloadImage(this.slidesArr[id], function() {
if(firstLoadedCallback) {
firstLoadedCallback.call();
}
self._preloadImage(self.slidesArr[id + 1], function() {
self._preloadImage(self.slidesArr[id - 1]);
});
});
} else {
this._preloadImage(this.slidesArr[id], firstLoadedCallback);
}
},
_updateControlNav:function(fromNav) {
if(this.settings.controlNavEnabled) {
if (typeof $(this.navItems[this.currentSlideId]).find("img").attr("data-menuover") != "undefined") {
var lastsrc = $(this.navItems[this.lastSlideId]).find("img").attr("data-menu");
var tihssrc = $(this.navItems[this.currentSlideId]).find("img").attr("data-menuover");
var tihssrcOrg = $(this.navItems[this.currentSlideId]).find("img").attr("data-menuorg");
$(this.navItems[this.lastSlideId]).find("img").attr("src",lastsrc);
$(this.navItems[this.currentSlideId]).find("img").attr("src",tihssrc);
/*
$(this.navItems[this.currentSlideId]).find("img").mouseout(function() {
$(this).attr("src",tihssrcOrg);
});
*/
} else {
this.navItems.eq(this.lastSlideId).removeClass('current');
this.navItems.eq(this.currentSlideId).addClass("current");
}
// thumbnails scroller navigation
if(this.settings.controlNavThumbs && this.settings.controlNavThumbsNavigation) {
var _thumbX = this.navItems.eq(this.currentSlideId).position().left;
var _currThumbVisiblePosition = _thumbX - Math.abs(this._currThumbsX);
if(_currThumbVisiblePosition > this._thumbsContainerWidth - this._outerThumbWidth * 2 - 1 - this._thumbsSpacing) {
if(!fromNav) {
this._animateThumbs(-_thumbX + this._outerThumbWidth);
} else {
this._animateThumbs(-_thumbX - this._outerThumbWidth * 2 + this._thumbsContainerWidth + this._thumbsSpacing);
}
} else if (_currThumbVisiblePosition < this._outerThumbWidth * 2 - 1) {
if(!fromNav) {
this._animateThumbs(-_thumbX - this._outerThumbWidth * 2 + this._thumbsContainerWidth + this._thumbsSpacing);
} else {
this._animateThumbs(-_thumbX + this._outerThumbWidth);
}
}
}
}
},
_updateDirectionNav:function() {
if(this.settings.directionNavEnabled)
{
if(this.settings.hideArrowOnLastSlide) {
if(this.currentSlideId == 0) {
this._arrowLeftBlocked = true;
this.arrowLeft.addClass("disabled");
if(this._arrowRightBlocked) {
this._arrowRightBlocked = false;
this.arrowRight.removeClass("disabled");
}
} else if(this.currentSlideId == this.numSlides - 1) {
this._arrowRightBlocked = true;
this.arrowRight.addClass("disabled");
if(this._arrowLeftBlocked) {
this._arrowLeftBlocked = false;
this.arrowLeft.removeClass("disabled");
}
} else {
if(this._arrowLeftBlocked) {
this._arrowLeftBlocked = false;
this.arrowLeft.removeClass("disabled");
} else if(this._arrowRightBlocked) {
this._arrowRightBlocked = false;
this.arrowRight.removeClass("disabled");
}
}
}
}
},
_resumeSlideshow: function(playedFromHover){
if(this.slideshowEnabled) {
var self = this;
if(!this.slideshowTimer) {
this.slideshowTimer = setInterval(function() { self.next(); }, this.settings.slideshowDelay);
}
}
},
_stopSlideshow: function(stoppedFromHover){
if(this.slideshowTimer) {
clearInterval(this.slideshowTimer);
this.slideshowTimer = '';
}
},
_preloadImage: function(slideObj, completeCallback) {
if(slideObj) {
if(slideObj.preload) {
var self = this;
var img = new Image();
var jqImg = $(img);
jqImg.css("opacity",0);
jqImg.addClass("mtabImage");
slideObj.slide.prepend(jqImg);
// add preloader
slideObj.slide.prepend(this._preloader);
slideObj.preload = false;
jqImg.load(function() {
self._scaleImage(jqImg, self.sliderWidth, self.sliderHeight);
jqImg.animate({"opacity":1}, 300, function() {
slideObj.slide.find(".mtabPreloader").remove();
});
if(completeCallback) {
completeCallback.call();
}
}).attr('src', slideObj.preloadURL);
} else {
if(completeCallback) {
completeCallback.call();
}
}
} else {
if(completeCallback) {
completeCallback.call();
}
}
},
// calculate thumbnails scroller size on start and on window resize
_recalculateThumbsScroller:function() {
this._thumbsContainerWidth = parseInt(this._navigationContainer.width(), 10);
this._minThumbsX = -(this._thumbsTotalWidth - this._thumbsContainerWidth);
// move to 0 position, if thumbs width is less then container width
if(this._thumbsContainerWidth >= this._thumbsTotalWidth) {
this._thumbsArrowRightBlocked = true;
this._thumbsArrowLeftBlocked = true;
this.thumbsArrowRight.addClass("disabled");
this.thumbsArrowLeft.addClass("disabled");
this._blockThumbnailsScroll = true;
this._setThumbScrollerPosition(0);
} else {
this._blockThumbnailsScroll = false;
var _thumbX = this.navItems.eq(this.currentSlideId).position().left;
this._animateThumbs(-_thumbX + this._outerThumbWidth);
}
},
// animate thumbnails scroller
_animateThumbs:function(newPosition) {
if(!this._blockThumbnailsScroll && newPosition != this._currThumbsX) {
if(newPosition <= this._minThumbsX) {
newPosition = this._minThumbsX;
this._thumbsArrowLeftBlocked = false;
this._thumbsArrowRightBlocked = true;
this.thumbsArrowRight.addClass("disabled");
this.thumbsArrowLeft.removeClass("disabled");
} else if(newPosition >= 0) {
newPosition = 0;
this._thumbsArrowLeftBlocked = true;
this._thumbsArrowRightBlocked = false;
this.thumbsArrowLeft.addClass("disabled");
this.thumbsArrowRight.removeClass("disabled");
} else {
if(this._thumbsArrowLeftBlocked) {
this._thumbsArrowLeftBlocked = false;
this.thumbsArrowLeft.removeClass("disabled");
}
if (this._thumbsArrowRightBlocked) {
this._thumbsArrowRightBlocked = false;
this.thumbsArrowRight.removeClass("disabled");
}
}
this._setThumbScrollerPosition(newPosition);
this._currThumbsX = newPosition;
}
},
_setThumbScrollerPosition:function(newPosition) {
if(!this._useWebkitTransition) {
this._thumbsNavContainer.animate(
{left: newPosition},
this.settings.controlNavThumbsSpeed,
this.settings.controlNavThumbsEasing);
} else {
this._thumbsNavContainer.css({'-webkit-transform': 'translate3d(' + newPosition + 'px, 0, 0)'});
}
},
_startSlider:function() {
var self = this;
this.slider.find(".mtabLoadingScreen").remove();
if(this.settings.controlNavEnabled) {
this.navItems.bind("click", function(e){
e.preventDefault();
if(!self._blockClickEvents) {
self._onNavItemClick(e);
}
});
this.navItems.bind("mouseover", function(e){
e.preventDefault();
if(!self._blockClickEvents) {
self._onNavItemClick(e);
}
});
}
if(this.settings.directionNavEnabled) {
this.arrowRight.click(function(e) {
e.preventDefault();
if(!self._arrowRightBlocked && !self._blockClickEvents) {
self.next();
}
});
this.arrowLeft.click(function(e) {
e.preventDefault();
if(!self._arrowLeftBlocked && !self._blockClickEvents) {
self.prev();
}
});
}
// keyboard nav
if(this.settings.keyboardNavEnabled) {
$(document).bind("keydown.rs", function(e) {
if(!self._blockClickEvents) {
if (e.keyCode === 37) {
// left
self.prev();
}
else if (e.keyCode === 39) {
// right
self.next();
}
}
});
}
this.wasSlideshowPlaying = true;
this._onSlideAnimationComplete();
this._dragContainer.bind(this._downEvent, function(e) {
if(!self._dragBlocked) {
self._onDragStart(e);
} else if(!self.hasTouch) {
e.preventDefault();
}
});
if(this.slideshowEnabled && !this.settings.slideshowAutoStart) {
this._stopSlideshow();
}
this.settings.allComplete.call(this);
},
_setGrabCursor:function() {
this._dragContainer.removeClass('grabbing-cursor');
this._dragContainer.addClass('grab-cursor');
},
_setGrabbingCursor:function() {
this._dragContainer.removeClass('grab-cursor');
this._dragContainer.addClass('grabbing-cursor');
},
_moveSlideRight:function(fromTouch, customSpeed) {
if(this.currentSlideId < this.numSlides - 1) {
this.goTo(this.currentSlideId+1, false, false, fromTouch, customSpeed);
} else {
this.goTo(this.currentSlideId, false, false, fromTouch, customSpeed);
}
},
_moveSlideLeft:function(fromTouch, customSpeed) {
if(this.currentSlideId > 0) {
this.goTo(this.currentSlideId-1, false, false, fromTouch, customSpeed);
} else {
this.goTo(this.currentSlideId, false, false, fromTouch, customSpeed);
}
},
_onNavItemClick:function(e) {
this.goTo($(e.currentTarget).index(), false , true);
},
// Thanks to @benpbarnett
_getWebkitTransformX:function(){
var transform = window.getComputedStyle(this._dragContainer.get(0), null).getPropertyValue("-webkit-transform");
var explodedMatrix = transform.replace(/^matrix\(/i, '').split(/, |\)$/g);
return parseInt(explodedMatrix[4], 10);
},
// Start dragging the slide
_onDragStart:function(e) {
if(!this._isDragging) {
var point;
if(this.hasTouch) {
this._lockYAxis = false;
//parsing touch event
var currTouches = e.originalEvent.touches;
if(currTouches && currTouches.length > 0) {
point = currTouches[0];
}
else {
return false;
}
} else {
point = e;
e.preventDefault();
}
if(this.slideshowEnabled) {
if(this.slideshowTimer) {
this.wasSlideshowPlaying = true;
this._stopSlideshow();
} else {
this.wasSlideshowPlaying = false;
}
}
this._setGrabbingCursor();
this._isDragging = true;
var self = this;
if(this._useWebkitTransition) {
self._dragContainer.css({'-webkit-transition-duration':'0', '-webkit-transition-property': 'none'});
}
$(document).bind(this._moveEvent, function(e) { self._onDragMove(e); });
$(document).bind(this._upEvent, function(e) { self._onDragRelease(e); });
if(!this._useWebkitTransition) {
this._startPos = this._tx = parseInt(this._dragContainer.css("left"), 10);
} else {
this._startPos = this._tx = this._getWebkitTransformX();
}
this._successfullyDragged = false;
this._accelerationX = this._tx;
this._startTime = (e.timeStamp || new Date().getTime());
this._startMouseX = point.clientX;
this._startMouseY = point.clientY;
}
return false;
},
_onDragMove:function(e) {
var point;
if(this.hasTouch) {
if(this._lockYAxis) {
return false;
}
var touches = e.originalEvent.touches;
// If touches more then one, so stop sliding and allow browser do default action
if(touches.length > 1) {
return false;
}
point = touches[0];
// If drag direction on mobile is vertical, so stop sliding and allow browser to scroll
if(Math.abs(point.clientY - this._startMouseY) > Math.abs(point.clientX - this._startMouseX) + 3) {
if(this.settings.lockAxis) {
this._lockYAxis = true;
}
return false;
}
e.preventDefault();
} else {
point = e;
e.preventDefault();
}
// Helps find last direction of drag move
this._lastDragPosition = this._currentDragPosition;
var distance = point.clientX - this._startMouseX;
if(this._lastDragPosition != distance) {
this._currentDragPosition = distance;
}
if(distance != 0)
{
if(this.currentSlideId == 0) {
if(distance > 0) {
distance = Math.sqrt(distance) * 5;
}
} else if(this.currentSlideId == (this.numSlides -1)) {
if(distance < 0) {
distance = -Math.sqrt(-distance) * 5;
}
}
if(!this._useWebkitTransition) {
this._dragContainer.css("left", this._tx + distance);
} else {
this._dragContainer.css({'-webkit-transform': 'translate3d(' + (this._tx + distance) + 'px, 0, 0)'});
}
}
var timeStamp = (e.timeStamp || new Date().getTime());
if (timeStamp - this._startTime > 350) {
this._startTime = timeStamp;
this._accelerationX = this._tx + distance;
}
return false;
},
_onDragRelease:function(e) {
if(this._isDragging) {
var self = this;
this._isDragging = false;
this._setGrabCursor();
if(!this._useWebkitTransition) {
this.endPos = parseInt(this._dragContainer.css("left"), 10);
} else {
this.endPos = this._getWebkitTransformX();
}
this.isdrag = false;
$(document).unbind(this._moveEvent).unbind(this._upEvent);
if(this.slideshowEnabled) {
if(this.wasSlideshowPlaying) {
if(!this._isHovering) {
this._resumeSlideshow();
}
this.wasSlideshowPlaying = false;
}
}
if(this.endPos == this._startPos) {
this._successfullyDragged = false;
return;
} else {
this._successfullyDragged = true;
}
var dist = (this._accelerationX - this.endPos);
var duration = Math.max(40, (e.timeStamp || new Date().getTime()) - this._startTime);
// For nav speed calculation F=ma :)
var v0 = Math.abs(dist) / duration;
var newDist = this.slideWidth - Math.abs(this._startPos - this.endPos);
var newDuration = Math.max((newDist * 1.08) / v0, 200);
newDuration = Math.min(newDuration, 600);
function returnToCurrent() {
newDist = Math.abs(self._startPos - self.endPos);
newDuration = Math.max((newDist * 1.08) / v0, 200);
newDuration = Math.min(newDuration, 500);
self.goTo(self.currentSlideId, false, false, true, newDuration );
}
// calculate slide move direction
if(this._startPos - this.settings.minSlideOffset > this.endPos) {
if(this._lastDragPosition < this._currentDragPosition) {
returnToCurrent();
return false;
}
this._moveSlideRight(true, newDuration);
} else if(this._startPos + this.settings.minSlideOffset < this.endPos) {
if(this._lastDragPosition > this._currentDragPosition) {
returnToCurrent();
return false;
}
this._moveSlideLeft(true, newDuration);
} else {
returnToCurrent();
}
}
return false;
},
// Slide animation complete handler
_onSlideAnimationComplete:function() {
var self = this;
if(this.slideshowEnabled) {
if(this.wasSlideshowPlaying) {
if(!this._isHovering) {
this._resumeSlideshow();
}
this.wasSlideshowPlaying = false;
}
}
this._blockClickEvents = false;
this._dragBlocked = false;
if(this.settings.captionAnimationEnabled && this.lastSlideId != this.currentSlideId) {
// hide last slide caption
if(this.lastSlideId != -1 ) {
this.slidesArr[this.lastSlideId].caption.css("display", "none");
}
self._showCaption(self.currentSlideId);
}
this.isAnimating = false;
this.settings.afterSlideChange.call(this);
},
// Show caption with specified id
_showCaption:function (id) {
var caption = this.slidesArr[id].caption;
if(caption && caption.length > 0) {
caption.css("display", "block");
var self = this;
var currItem,
fadeEnabled,
moveEnabled,
effectName,
effectsObject,
moveEffectProperty,
currEffects,
newEffectObj,
moveOffset,
delay,
speed,
easing,
moveProp;
var captionItems = caption.children();
// clear previous animations
if(this._captionAnimateTimeouts.length > 0) {
for(var a = this._captionAnimateTimeouts.length - 1; a > -1; a--) {
clearTimeout(this._captionAnimateTimeouts.splice(a, 1));
}
}
if(this._captionAnimateProperties.length > 0) {
var cItemTemp;
for(var k = this._captionAnimateProperties.length - 1; k > -1; k--) {
cItemTemp = this._captionAnimateProperties[k];
if(cItemTemp) {
if(!this._useWebkitTransition) {
if(cItemTemp.running) {
cItemTemp.captionItem.stop(true, true);
} else {
cItemTemp.captionItem.css(cItemTemp.css);
}
}
}
this._captionAnimateProperties.splice(k, 1);
}
}
// parse each caption item on slide
for(var i = 0; i < captionItems.length; i++) {
currItem = $(captionItems[i]);
effectsObject = {};
fadeEnabled = false;
moveEnabled = false;
moveEffectProperty = "";
if(currItem.attr("data-show-effect") == undefined) {
currEffects = this.settings.captionShowEffects;
} else {
currEffects = currItem.attr("data-show-effect").split(" ");
}
// parse each effect in caption
for(var q = 0; q < currEffects.length; q++) {
if(fadeEnabled && moveEnabled) {
break;
}
effectName = currEffects[q].toLowerCase();
if(!fadeEnabled && effectName == "fade") {
fadeEnabled = true;
effectsObject['opacity'] = 1;
} else if(moveEnabled) {
break;
} else if(effectName == "movetop") {
moveEffectProperty = "margin-top";
} else if(effectName == "moveleft") {
moveEffectProperty = "margin-left";
} else if(effectName == "movebottom") {
moveEffectProperty = "margin-bottom";
} else if(effectName == "moveright") {
moveEffectProperty = "margin-right";
}
if(moveEffectProperty != "") {
effectsObject['moveProp'] = moveEffectProperty;
if(!self._useWebkitTransition) {
effectsObject['moveStartPos'] = parseInt(currItem.css(moveEffectProperty), 10);
} else {
effectsObject['moveStartPos'] = 0;
}
moveEnabled = true;
}
}
moveOffset = parseInt(currItem.attr("data-move-offset"), 10);
if(isNaN(moveOffset)) {
moveOffset = this.settings.captionMoveOffset;
}
delay = parseInt(currItem.attr("data-delay"), 10);
if(isNaN(delay)) {
delay = self.settings.captionShowDelay * i;
}
speed = parseInt(currItem.attr("data-speed"), 10);
if(isNaN(speed)) {
speed = self.settings.captionShowSpeed;
}
easing = currItem.attr("data-easing");
if(!easing) {
easing = self.settings.captionShowEasing;
}
newEffectObj = {};
if(moveEnabled) {
moveProp = effectsObject.moveProp;
if(moveProp == "margin-right") {
moveProp = "margin-left";
newEffectObj[moveProp] = effectsObject.moveStartPos + moveOffset;
} else if(moveProp == "margin-bottom") {
moveProp = "margin-top";
newEffectObj[moveProp] = effectsObject.moveStartPos + moveOffset;
} else {
newEffectObj[moveProp] = effectsObject.moveStartPos - moveOffset;
}
}
if(!self._removeFadeAnimation && fadeEnabled) {
currItem.css("opacity",0);
}
if(!self._useWebkitTransition) {
currItem.css("visibility","hidden");
currItem.css(newEffectObj);
if(moveEnabled) {
newEffectObj[moveProp] = effectsObject.moveStartPos;
}
if(!self._removeFadeAnimation && fadeEnabled) {
newEffectObj.opacity = 1;
}
} else {
var cssObj = {};
if(moveEnabled) {
cssObj['-webkit-transition-duration'] = "0";
cssObj['-webkit-transition-property'] = "none";
cssObj["-webkit-transform"] = "translate3d(" +
(isNaN(newEffectObj["margin-left"]) ? 0 : (newEffectObj["margin-left"] + "px")) +
", " +
(isNaN(newEffectObj["margin-top"]) ? 0 : (newEffectObj["margin-top"] + "px")) +
",0)";
delete newEffectObj["margin-left"];
delete newEffectObj["margin-top"];
newEffectObj["-webkit-transform"] = "translate3d(0,0,0)";
}
newEffectObj.visibility = "visible";
newEffectObj.opacity = 1;
if(!self._removeFadeAnimation && fadeEnabled) {
cssObj["opacity"] = 0;
}
cssObj["visibility"] = "hidden";
currItem.css(cssObj);
}
this._captionAnimateProperties.push({captionItem:currItem, css:newEffectObj, running:false});
// animate caption
this._captionAnimateTimeouts.push(setTimeout((function (cItem, animateData, cSpeed, cEasing, cId, objFadeEnabled, objMoveEnabled) {
return function() {
self._captionAnimateProperties[cId].running = true;
if(!self._useWebkitTransition) {
cItem.css("visibility","visible").animate(animateData, cSpeed, cEasing, function(){
if(self._isIE8 && objFadeEnabled) {
cItem.get(0).style.removeAttribute('filter');
}
delete self._captionAnimateProperties[cId];
});
} else {
cItem.css({'-webkit-transition-duration': (cSpeed + "ms"),
'-webkit-transition-property': 'opacity' + (objMoveEnabled ? ', -webkit-transform' : ''),
'-webkit-transition-timing-function':'ease-out'});
cItem.css(animateData);
}
};
})(currItem, newEffectObj, speed, easing, i, fadeEnabled, moveEnabled), delay));
}
}
}, /* _showCaption end */
// scale image and center it if needed
_scaleImage:function(img, containerWidth, containerHeight) {
var imgScaleMode = this.settings.imageScaleMode;
var imgAlignCenter = this.settings.imageAlignCenter;
if(imgAlignCenter || imgScaleMode == "fill" || imgScaleMode == "fit") {
var isReloaded = false;
function scaleImg () {
var hRatio, vRatio, ratio, nWidth, nHeight;
var _tempImg = new Image();
// fix android and BB bug, load again…
_tempImg.onload = function() {
var imgWidth = this.width;
var imgHeight = this.height;
var imgBorderSize = parseInt(img.css("borderWidth"), 10);
imgBorderSize = isNaN(imgBorderSize) ? 0 : imgBorderSize;
if(imgScaleMode == "fill" || imgScaleMode == "fit") {
hRatio = containerWidth / imgWidth;
vRatio = containerHeight / imgHeight;
if (imgScaleMode == "fill") {
ratio = hRatio > vRatio ? hRatio : vRatio;
} else if (imgScaleMode == "fit") {
ratio = hRatio < vRatio ? hRatio : vRatio;
} else {
ratio = 1;
}
nWidth = parseInt(imgWidth * ratio, 10) - imgBorderSize;
nHeight = parseInt(imgHeight * ratio, 10) - imgBorderSize;
img.attr({"width":nWidth, "height":nHeight}).css({"width": nWidth, "height": nHeight});
} else {
nWidth = imgWidth - imgBorderSize;
nHeight = imgHeight - imgBorderSize;
img.attr("width",nWidth).attr("height",nHeight);
}
// center image in needed
if (imgAlignCenter) {
img.css({"margin-left": Math.floor((containerWidth - nWidth) / 2), "margin-top":Math.floor((containerHeight - nHeight) / 2)});
}
};
_tempImg.src = img.attr("src");
};
img.removeAttr('height').removeAttr('width');
if (!this._isImageLoaded(img.get(0))) {
$('
').load( function(){
scaleImg();
}).attr('src', img.attr("src"));
} else {
scaleImg();
}
}
}, /* _scaleImage end */
_isImageLoaded:function (img) {
if(img) {
if (!img.complete) {
return false;
}
if (typeof img.naturalWidth != "undefined" && img.naturalWidth == 0) {
return false;
}
} else {
return false;
}
return true;
} /* _isImageLoaded end */
}; /* MtabSlider.prototype end */
$.fn.mtabSlider = function(options) {
return this.each(function(){
var mtabSlider = new MtabSlider($(this), options);
$(this).data("mtabSlider", mtabSlider);
});
};
$.fn.mtabSlider.defaults = {
lockAxis: true, // Drag navigation only on one axis
preloadNearbyImages:true, // Preloads two nearby images, if lazy loading is enabled.
imageScaleMode:"none", // Scale mode of images. "fill", "fit" or "none"
imageAlignCenter:false, // Aligns all images to center.
keyboardNavEnabled:false, // Keyboard arrows navigation
directionNavEnabled:true, // Direction (arrow) navigation (true or false)
directionNavAutoHide:false, // Direction (arrow) navigation auto hide on hover. (On touch devices arrows are always shown)
hideArrowOnLastSlide:true, // Auto hide right arrow on last slide and left on first slide. Always true for touch devices.
slideTransitionType: "move", // "fade" or "move"
slideTransitionSpeed:400, // Slide transition speed in ms (1000ms = 1s)
slideTransitionEasing:"easeInOutSine", // Easing type for slide transition. Types: http://hosted.zeh.com.br/tweener/docs/en-us/misc/transitions.html
captionAnimationEnabled:true, // Set to false if you want to remove all animations from captions
captionShowEffects:["fade","moveleft"], // Default array of effects:
// ["fade" or "" + "moveleft", or "moveright", or "movetop", or "movebottom"]
captionMoveOffset:20, // Default distance for move effect in px
captionShowSpeed:400, // Default caption show speed in ms
captionShowEasing:"easeOutCubic", // Default caption show easing
captionShowDelay:200, // Default delay between captions on one slide show
controlNavEnabled:true, // Control navigation (bullets, thumbs) enabled
controlNavThumbs:false, // Use thumbs for control navigation (use data-thumb="myThumb.jpg" attribute in html mtabSlide item)
controlNavThumbsNavigation:true, // Enables navigation for thumbs
controlNavThumbsSpeed:400, // Thumbnails navigation move speed (1000ms = 1s)
controlNavThumbsEasing:"easeInOutSine", // Thumbnails navigation easing type
slideshowEnabled:false, // Autoslideshow enabled
slideshowDelay:5000, // Delay between slides in slideshow
slideshowPauseOnHover:true, // Pause slideshow on hover
slideshowAutoStart:true, // Auto start slideshow
welcomeScreenEnabled:false, // Welcome (loading) screen enabled
welcomeScreenShowSpeed:500, // Welcome screen fade out speed
minSlideOffset:20, // Minimum distance in pixels to show next slide while dragging
disableTranslate3d:false, // Disables CSS3 transforms on touch devices
removeCaptionsOpacityInIE8:false, // If animated caption with fade effect has no background color, so turn this option on.
// Fix for pixelated text bug in IE8 and lower. Removes fade effect animation.
startSlideIndex: 0, // Start slide index (starting from 0).
slideSpacing: 0, // Distance between slides in pixels.
blockLinksOnDrag:true, // Blocks all links when dragging.
nonDraggableClassEnabled:true, // Prevents dragging on all elements that have 'non-draggable' class inside slide.
dragUsingMouse:true, // Drag using mouse on non-touch devices
autoScaleSlider: false, // Overrides css slider size settings. Sets slider height based on base width and height. Don't forget to set slider width to 100%.
autoScaleSliderWidth: 960, // Base slider width
autoScaleSliderHeight: 400, // Base slider height
beforeSlideChange: function(){}, // Callback, triggers before slide transition
afterSlideChange: function(){}, // Callback, triggers after slide transition
beforeLoadStart:function() {}, // Callback, triggers before first image loading starts
loadingComplete: function() {}, // Callback, triggers after loading complete, but before welcome screen animation
allComplete: function() {} // Callback, triggers after loading and welcome screen animation
}; /* default options end */
$.fn.mtabSlider.settings = {};
})(jQuery);