123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285 |
- /*!
- * jQuery wmuSlider v2.1
- *
- * Copyright (c) 2011 Brice Lechatellier
- * http://brice.lechatellier.com/
- *
- * Licensed under the MIT license: http://www.opensource.org/licenses/mit-license.php
- */
- ;(function($) {
-
- $.fn.wmuSlider = function(options) {
- /* Default Options
- ================================================== */
- var defaults = {
- animation: 'fade',
- animationDuration: 600,
- slideshow: true,
- slideshowSpeed: 7000,
- slideToStart: 0,
- navigationControl: true,
- paginationControl: true,
- previousText: 'Previous',
- nextText: 'Next',
- touch: false,
- slide: 'article',
- items: 1
- };
- var options = $.extend(defaults, options);
-
- return this.each(function() {
- /* Variables
- ================================================== */
- var $this = $(this);
- var currentIndex = options.slideToStart;
- var wrapper = $this.find('.wmuSliderWrapper');
- var slides = $this.find(options.slide);
- var slidesCount = slides.length;
- var slideshowTimeout;
- var paginationControl;
- var isAnimating;
-
-
- /* Load Slide
- ================================================== */
- var loadSlide = function(index, infinite, touch) {
- if (isAnimating) {
- return false;
- }
- isAnimating = true;
- currentIndex = index;
- var slide = $(slides[index]);
- $this.animate({ height: slide.innerHeight() });
- if (options.animation == 'fade') {
- slides.css({
- position: 'absolute',
- opacity: 0
- });
-
- slide.css({'position' : 'relative', 'z-index' : '2'});
- slide.siblings(options.slide).css('z-index' , '1');
- slide.animate({ opacity:1 }, options.animationDuration, function() {
- isAnimating = false;
- });
- } else if (options.animation == 'slide') {
- if (!infinite) {
- wrapper.animate({ marginLeft: -$this.width() / options.items * index }, options.animationDuration, function() {
- isAnimating = false;
- });
- } else {
- if (index == 0) {
- wrapper.animate({ marginLeft: -$this.width() / options.items * slidesCount }, options.animationDuration, function() {
- wrapper.css('marginLeft', 0);
- isAnimating = false;
- });
- } else {
- if (!touch) {
- wrapper.css('marginLeft', -$this.width() / options.items * slidesCount);
- }
- wrapper.animate({ marginLeft: -$this.width() / options.items * index }, options.animationDuration, function() {
- isAnimating = false;
- });
- }
- }
- }
- if (paginationControl) {
- paginationControl.find('a').each(function(i) {
- if(i == index) {
- $(this).addClass('wmuActive');
- } else {
- $(this).removeClass('wmuActive');
- }
- });
- }
-
- // Trigger Event
- $this.trigger('slideLoaded', index);
- };
-
-
- /* Navigation Control
- ================================================== */
- if (options.navigationControl) {
- var prev = $('<a class="wmuSliderPrev">' + options.previousText + '</a>');
- prev.click(function(e) {
- e.preventDefault();
- clearTimeout(slideshowTimeout);
- if (currentIndex == 0) {
- loadSlide(slidesCount - 1, true);
- } else {
- loadSlide(currentIndex - 1);
- }
- });
- $this.append(prev);
-
- var next = $('<a class="wmuSliderNext">' + options.nextText + '</a>');
- next.click(function(e) {
- e.preventDefault();
- clearTimeout(slideshowTimeout);
- if (currentIndex + 1 == slidesCount) {
- loadSlide(0, true);
- } else {
- loadSlide(currentIndex + 1);
- }
- });
- $this.append(next);
- }
-
- /* Pagination Control
- ================================================== */
- if (options.paginationControl) {
- paginationControl = $('<ul class="wmuSliderPagination"></ul>');
- $.each(slides, function(i) {
- paginationControl.append('<li><a href="#">' + i + '</a></li>');
- paginationControl.find('a:eq(' + i + ')').click(function(e) {
- e.preventDefault();
- clearTimeout(slideshowTimeout);
- loadSlide(i);
- });
- });
- $this.append(paginationControl);
- }
-
-
- /* Slideshow
- ================================================== */
- if (options.slideshow) {
- var slideshow = function() {
- if (currentIndex + 1 < slidesCount) {
- loadSlide(currentIndex + 1);
- } else {
- loadSlide(0, true);
- }
- slideshowTimeout = setTimeout(slideshow, options.slideshowSpeed);
- }
- slideshowTimeout = setTimeout(slideshow, options.slideshowSpeed);
- }
-
-
- /* Resize Slider
- ================================================== */
- var resize = function() {
- var slide = $(slides[currentIndex]);
- $this.animate({ height: slide.innerHeight() });
- if (options.animation == 'slide') {
- slides.css({
- width: $this.width() / options.items
- });
- wrapper.css({
- marginLeft: -$this.width() / options.items * currentIndex,
- width: $this.width() * slides.length
- });
- }
- };
-
-
- /* Touch
- ================================================== */
- var touchSwipe = function(event, phase, direction, distance) {
- clearTimeout(slideshowTimeout);
- if(phase == 'move' && (direction == 'left' || direction == 'right')) {
- if (direction == 'right') {
- if (currentIndex == 0) {
- wrapper.css('marginLeft', (-slidesCount * $this.width() / options.items) + distance);
- } else {
- wrapper.css('marginLeft', (-currentIndex * $this.width() / options.items) + distance);
- }
- } else if (direction == 'left') {
- wrapper.css('marginLeft', (-currentIndex * $this.width() / options.items) - distance);
- }
- } else if (phase == 'cancel' ) {
- if (direction == 'right' && currentIndex == 0) {
- wrapper.animate({ marginLeft: -slidesCount * $this.width() / options.items }, options.animationDuration);
- } else {
- wrapper.animate({ marginLeft: -currentIndex * $this.width() / options.items }, options.animationDuration);
- }
- } else if (phase == 'end' ) {
- if (direction == 'right') {
- if (currentIndex == 0) {
- loadSlide(slidesCount - 1, true, true);
- } else {
- loadSlide(currentIndex - 1);
- }
- } else if (direction == 'left') {
- if (currentIndex + 1 == slidesCount) {
- loadSlide(0, true);
- } else {
- loadSlide(currentIndex + 1);
- }
- } else {
- wrapper.animate({ marginLeft: -currentIndex * $this.width() / options.items }, options.animationDuration);
- }
- }
- };
- if (options.touch && options.animation == 'slide') {
- if (!$.isFunction($.fn.swipe)) {
- $.ajax({
- url: 'jquery.touchSwipe.min.js',
- async: false
- });
- }
- if ($.isFunction($.fn.swipe)) {
- $this.swipe({ triggerOnTouchEnd:false, swipeStatus:touchSwipe, allowPageScroll:'vertical' });
- }
- }
-
-
- /* Init Slider
- ================================================== */
- var init = function() {
- var slide = $(slides[currentIndex]);
- var img = slide.find('img');
- img.load(function() {
- wrapper.show();
- $this.animate({ height: slide.innerHeight() });
- });
- if (options.animation == 'fade') {
- slides.css({
- position: 'absolute',
- width: '100%',
- opacity: 0
- });
- $(slides[currentIndex]).css('position', 'relative');
- } else if (options.animation == 'slide') {
- if (options.items > slidesCount) {
- options.items = slidesCount;
- }
- slides.css('float', 'left');
- slides.each(function(i){
- var slide = $(this);
- slide.attr('data-index', i);
- });
- for(var i = 0; i < options.items; i++) {
- wrapper.append($(slides[i]).clone());
- }
- slides = $this.find(options.slide);
- }
- resize();
-
- $this.trigger('hasLoaded');
-
- loadSlide(currentIndex);
- }
- init();
-
-
- /* Bind Events
- ================================================== */
- // Resize
- $(window).resize(resize);
-
- // Load Slide
- $this.bind('loadSlide', function(e, i) {
- clearTimeout(slideshowTimeout);
- loadSlide(i);
- });
-
- });
- }
-
- })(jQuery);
|