301 lines
10 KiB
JavaScript
301 lines
10 KiB
JavaScript
|
(function ($) {
|
||
|
|
|
||
|
|
var methods = {
|
||
|
|
|
||
|
|
init : function(options) {
|
||
|
|
var defaults = {
|
||
|
|
indicators: true,
|
||
|
|
height: 400,
|
||
|
|
transition: 500,
|
||
|
|
interval: 6000
|
||
|
|
};
|
||
|
|
options = $.extend(defaults, options);
|
||
|
|
|
||
|
|
return this.each(function() {
|
||
|
|
|
||
|
|
// For each slider, we want to keep track of
|
||
|
|
// which slide is active and its associated content
|
||
|
|
var $this = $(this);
|
||
|
|
var $slider = $this.find('ul.slides').first();
|
||
|
|
var $slides = $slider.find('li');
|
||
|
|
var $active_index = $slider.find('.active').index();
|
||
|
|
var $active;
|
||
|
|
if ($active_index != -1) { $active = $slides.eq($active_index); }
|
||
|
|
|
||
|
|
// Transitions the caption depending on alignment
|
||
|
|
function captionTransition(caption, duration) {
|
||
|
|
if (caption.hasClass("center-align")) {
|
||
|
|
caption.velocity({opacity: 0, translateY: -100}, {duration: duration, queue: false});
|
||
|
|
}
|
||
|
|
else if (caption.hasClass("right-align")) {
|
||
|
|
caption.velocity({opacity: 0, translateX: 100}, {duration: duration, queue: false});
|
||
|
|
}
|
||
|
|
else if (caption.hasClass("left-align")) {
|
||
|
|
caption.velocity({opacity: 0, translateX: -100}, {duration: duration, queue: false});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// This function will transition the slide to any index of the next slide
|
||
|
|
function moveToSlide(index) {
|
||
|
|
if (index >= $slides.length) index = 0;
|
||
|
|
else if (index < 0) index = $slides.length -1;
|
||
|
|
|
||
|
|
$active_index = $slider.find('.active').index();
|
||
|
|
|
||
|
|
// Only do if index changes
|
||
|
|
if ($active_index != index) {
|
||
|
|
$active = $slides.eq($active_index);
|
||
|
|
$caption = $active.find('.caption');
|
||
|
|
|
||
|
|
$active.removeClass('active');
|
||
|
|
$active.velocity({opacity: 0}, {duration: options.transition, queue: false, easing: 'easeOutQuad',
|
||
|
|
complete: function() {
|
||
|
|
$slides.not('.active').velocity({opacity: 0, translateX: 0, translateY: 0}, {duration: 0, queue: false});
|
||
|
|
} });
|
||
|
|
captionTransition($caption, options.transition);
|
||
|
|
|
||
|
|
|
||
|
|
// Update indicators
|
||
|
|
if (options.indicators) {
|
||
|
|
$indicators.eq($active_index).removeClass('active');
|
||
|
|
}
|
||
|
|
|
||
|
|
$slides.eq(index).velocity({opacity: 1}, {duration: options.transition, queue: false, easing: 'easeOutQuad'});
|
||
|
|
$slides.eq(index).find('.caption').velocity({opacity: 1, translateX: 0, translateY: 0}, {duration: options.transition, delay: options.transition, queue: false, easing: 'easeOutQuad'});
|
||
|
|
$slides.eq(index).addClass('active');
|
||
|
|
|
||
|
|
|
||
|
|
// Update indicators
|
||
|
|
if (options.indicators) {
|
||
|
|
$indicators.eq(index).addClass('active');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Set height of slider
|
||
|
|
// If fullscreen, do nothing
|
||
|
|
if (!$this.hasClass('fullscreen')) {
|
||
|
|
if (options.indicators) {
|
||
|
|
// Add height if indicators are present
|
||
|
|
$this.height(options.height + 40);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
$this.height(options.height);
|
||
|
|
}
|
||
|
|
$slider.height(options.height);
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
// Set initial positions of captions
|
||
|
|
$slides.find('.caption').each(function () {
|
||
|
|
captionTransition($(this), 0);
|
||
|
|
});
|
||
|
|
|
||
|
|
// Move img src into background-image
|
||
|
|
$slides.find('img').each(function () {
|
||
|
|
$(this).css('background-image', 'url(' + $(this).attr('src') + ')' );
|
||
|
|
$(this).attr('src', 'data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==');
|
||
|
|
});
|
||
|
|
|
||
|
|
// dynamically add indicators
|
||
|
|
if (options.indicators) {
|
||
|
|
var $indicators = $('<ul class="indicators"></ul>');
|
||
|
|
$slides.each(function( index ) {
|
||
|
|
var $indicator = $('<li class="indicator-item"></li>');
|
||
|
|
|
||
|
|
// Handle clicks on indicators
|
||
|
|
$indicator.click(function () {
|
||
|
|
var $parent = $slider.parent();
|
||
|
|
var curr_index = $parent.find($(this)).index();
|
||
|
|
moveToSlide(curr_index);
|
||
|
|
|
||
|
|
// reset interval
|
||
|
|
clearInterval($interval);
|
||
|
|
$interval = setInterval(
|
||
|
|
function(){
|
||
|
|
$active_index = $slider.find('.active').index();
|
||
|
|
if ($slides.length == $active_index + 1) $active_index = 0; // loop to start
|
||
|
|
else $active_index += 1;
|
||
|
|
|
||
|
|
moveToSlide($active_index);
|
||
|
|
|
||
|
|
}, options.transition + options.interval
|
||
|
|
);
|
||
|
|
});
|
||
|
|
$indicators.append($indicator);
|
||
|
|
});
|
||
|
|
$this.append($indicators);
|
||
|
|
$indicators = $this.find('ul.indicators').find('li.indicator-item');
|
||
|
|
}
|
||
|
|
|
||
|
|
if ($active) {
|
||
|
|
$active.show();
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
$slides.first().addClass('active').velocity({opacity: 1}, {duration: options.transition, queue: false, easing: 'easeOutQuad'});
|
||
|
|
|
||
|
|
$active_index = 0;
|
||
|
|
$active = $slides.eq($active_index);
|
||
|
|
|
||
|
|
// Update indicators
|
||
|
|
if (options.indicators) {
|
||
|
|
$indicators.eq($active_index).addClass('active');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Adjust height to current slide
|
||
|
|
$active.find('img').each(function() {
|
||
|
|
$active.find('.caption').velocity({opacity: 1, translateX: 0, translateY: 0}, {duration: options.transition, queue: false, easing: 'easeOutQuad'});
|
||
|
|
});
|
||
|
|
|
||
|
|
// auto scroll
|
||
|
|
$interval = setInterval(
|
||
|
|
function(){
|
||
|
|
$active_index = $slider.find('.active').index();
|
||
|
|
moveToSlide($active_index + 1);
|
||
|
|
|
||
|
|
}, options.transition + options.interval
|
||
|
|
);
|
||
|
|
|
||
|
|
|
||
|
|
// HammerJS, Swipe navigation
|
||
|
|
|
||
|
|
// Touch Event
|
||
|
|
var panning = false;
|
||
|
|
var swipeLeft = false;
|
||
|
|
var swipeRight = false;
|
||
|
|
|
||
|
|
$this.hammer({
|
||
|
|
prevent_default: false
|
||
|
|
}).bind('pan', function(e) {
|
||
|
|
if (e.gesture.pointerType === "touch") {
|
||
|
|
|
||
|
|
// reset interval
|
||
|
|
clearInterval($interval);
|
||
|
|
|
||
|
|
var direction = e.gesture.direction;
|
||
|
|
var x = e.gesture.deltaX;
|
||
|
|
var velocityX = e.gesture.velocityX;
|
||
|
|
|
||
|
|
$curr_slide = $slider.find('.active');
|
||
|
|
$curr_slide.velocity({ translateX: x
|
||
|
|
}, {duration: 50, queue: false, easing: 'easeOutQuad'});
|
||
|
|
|
||
|
|
// Swipe Left
|
||
|
|
if (direction === 4 && (x > ($this.innerWidth() / 2) || velocityX < -0.65)) {
|
||
|
|
swipeRight = true;
|
||
|
|
}
|
||
|
|
// Swipe Right
|
||
|
|
else if (direction === 2 && (x < (-1 * $this.innerWidth() / 2) || velocityX > 0.65)) {
|
||
|
|
swipeLeft = true;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Make Slide Behind active slide visible
|
||
|
|
var next_slide;
|
||
|
|
if (swipeLeft) {
|
||
|
|
next_slide = $curr_slide.next();
|
||
|
|
if (next_slide.length === 0) {
|
||
|
|
next_slide = $slides.first();
|
||
|
|
}
|
||
|
|
next_slide.velocity({ opacity: 1
|
||
|
|
}, {duration: 300, queue: false, easing: 'easeOutQuad'});
|
||
|
|
}
|
||
|
|
if (swipeRight) {
|
||
|
|
next_slide = $curr_slide.prev();
|
||
|
|
if (next_slide.length === 0) {
|
||
|
|
next_slide = $slides.last();
|
||
|
|
}
|
||
|
|
next_slide.velocity({ opacity: 1
|
||
|
|
}, {duration: 300, queue: false, easing: 'easeOutQuad'});
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
}).bind('panend', function(e) {
|
||
|
|
if (e.gesture.pointerType === "touch") {
|
||
|
|
|
||
|
|
$curr_slide = $slider.find('.active');
|
||
|
|
panning = false;
|
||
|
|
curr_index = $slider.find('.active').index();
|
||
|
|
|
||
|
|
if (!swipeRight && !swipeLeft) {
|
||
|
|
// Return to original spot
|
||
|
|
$curr_slide.velocity({ translateX: 0
|
||
|
|
}, {duration: 300, queue: false, easing: 'easeOutQuad'});
|
||
|
|
}
|
||
|
|
else if (swipeLeft) {
|
||
|
|
moveToSlide(curr_index + 1);
|
||
|
|
$curr_slide.velocity({translateX: -1 * $this.innerWidth() }, {duration: 300, queue: false, easing: 'easeOutQuad',
|
||
|
|
complete: function() {
|
||
|
|
$curr_slide.velocity({opacity: 0, translateX: 0}, {duration: 0, queue: false});
|
||
|
|
} });
|
||
|
|
}
|
||
|
|
else if (swipeRight) {
|
||
|
|
moveToSlide(curr_index - 1);
|
||
|
|
$curr_slide.velocity({translateX: $this.innerWidth() }, {duration: 300, queue: false, easing: 'easeOutQuad',
|
||
|
|
complete: function() {
|
||
|
|
$curr_slide.velocity({opacity: 0, translateX: 0}, {duration: 0, queue: false});
|
||
|
|
} });
|
||
|
|
}
|
||
|
|
swipeLeft = false;
|
||
|
|
swipeRight = false;
|
||
|
|
|
||
|
|
// Restart interval
|
||
|
|
clearInterval($interval);
|
||
|
|
$interval = setInterval(
|
||
|
|
function(){
|
||
|
|
$active_index = $slider.find('.active').index();
|
||
|
|
if ($slides.length == $active_index + 1) $active_index = 0; // loop to start
|
||
|
|
else $active_index += 1;
|
||
|
|
|
||
|
|
moveToSlide($active_index);
|
||
|
|
|
||
|
|
}, options.transition + options.interval
|
||
|
|
);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
$this.on('sliderPause', function() {
|
||
|
|
clearInterval($interval);
|
||
|
|
});
|
||
|
|
|
||
|
|
$this.on('sliderStart', function() {
|
||
|
|
clearInterval($interval);
|
||
|
|
$interval = setInterval(
|
||
|
|
function(){
|
||
|
|
$active_index = $slider.find('.active').index();
|
||
|
|
if ($slides.length == $active_index + 1) $active_index = 0; // loop to start
|
||
|
|
else $active_index += 1;
|
||
|
|
|
||
|
|
moveToSlide($active_index);
|
||
|
|
|
||
|
|
}, options.transition + options.interval
|
||
|
|
);
|
||
|
|
});
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
},
|
||
|
|
pause : function() {
|
||
|
|
$(this).trigger('sliderPause');
|
||
|
|
},
|
||
|
|
start : function() {
|
||
|
|
$(this).trigger('sliderStart');
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
$.fn.slider = function(methodOrOptions) {
|
||
|
|
if ( methods[methodOrOptions] ) {
|
||
|
|
return methods[ methodOrOptions ].apply( this, Array.prototype.slice.call( arguments, 1 ));
|
||
|
|
} else if ( typeof methodOrOptions === 'object' || ! methodOrOptions ) {
|
||
|
|
// Default to "init"
|
||
|
|
return methods.init.apply( this, arguments );
|
||
|
|
} else {
|
||
|
|
$.error( 'Method ' + methodOrOptions + ' does not exist on jQuery.tooltip' );
|
||
|
|
}
|
||
|
|
}; // Plugin end
|
||
|
|
}( jQuery ));
|