diff --git a/ideal-image-slider.js b/ideal-image-slider.js index f8889b4..6a87301 100644 --- a/ideal-image-slider.js +++ b/ideal-image-slider.js @@ -1,9 +1,13 @@ /* - * Ideal Image Slider v1.5.1 + * Ideal Image Slider v1.6.0 * * By Gilbert Pellegrom * http://gilbert.pellegrom.me + * v1.6.0+ By Matthew Sigley + * https://github.com/msigley/ * + * Copyright (C) 2017 Matthew Sigley + * https://github.com/msigley/ * Copyright (C) 2014 Dev7studios * https://raw.githubusercontent.com/gilbitron/Ideal-Image-Slider/master/LICENSE */ @@ -242,7 +246,8 @@ var IdealImageSlider = (function() { start: {}, delta: {}, isScrolling: undefined, - direction: null + direction: null, + moved: false }, start: function(event) { @@ -282,6 +287,7 @@ var IdealImageSlider = (function() { // If user is not trying to scroll vertically if (!_touch.vars.isScrolling) { event.preventDefault(); // Prevent native scrolling + _touch.vars.moved = true; _translate(this._attributes.previousSlide, _touch.vars.delta.x - this._attributes.previousSlide.offsetWidth, 0); _translate(this._attributes.currentSlide, _touch.vars.delta.x, 0); @@ -301,7 +307,7 @@ var IdealImageSlider = (function() { var speed = this.settings.transitionDuration ? this.settings.transitionDuration / 2 : 0; // If not scrolling vertically - if (!_touch.vars.isScrolling) { + if (!_touch.vars.isScrolling && _touch.vars.moved) { if (isChangeSlide) { _touch.vars.direction = direction; @@ -331,6 +337,8 @@ var IdealImageSlider = (function() { _removeClass(this._attributes.container, this.settings.classes.animating); }.bind(this), speed); } + + _touch.vars.moved = false; } }, @@ -431,7 +439,8 @@ var IdealImageSlider = (function() { beforeChange: function() {}, afterChange: function() {} }; - + this.length = 0; + // Parse args if (typeof args === 'string') { this.settings.selector = args; @@ -440,11 +449,35 @@ var IdealImageSlider = (function() { } // Slider (container) element - var sliderEl = document.querySelector(this.settings.selector); - if (!sliderEl) return null; + var sliderEl = false, + rquickExpr = /^(?:#([\w-]+)|(\w+)|\.([\w-]+))$/, + selectionType = rquickExpr.exec( this.settings.selector ), + s, elem; + + // Handle ID, Name, and Class selection + if ((s = selectionType[1])) { + // getElementById can match elements by name instead of ID + if ((elem = document.getElementById( s )) && elem.id === s) + sliderEl = elem; + } else if (selectionType[2]) { + if ((elem = document.getElementsByTagName( this.settings.selector ))) + sliderEl = elem[0]; + } else if ((s = selectionType[1])) { + if ((elem = document.getElementsByClassName( s ))) + sliderEl = elem[0]; + } else { + sliderEl = document.querySelector(this.settings.selector); + } + + if (!sliderEl) { + return null; + } + + //Add loading class + _addClass(sliderEl, 'iis-loading'); // Slides - var origChildren = _toArray(sliderEl.children), + var origChildren = _toArray(sliderEl.cloneNode(true).children), //ensure slideEl is a static nodeList validSlides = []; sliderEl.innerHTML = ''; Array.prototype.forEach.call(origChildren, function(slide, i) { @@ -512,6 +545,9 @@ var IdealImageSlider = (function() { return null; } + // Set length + this.length = 1; + // Create navigation if (!this.settings.disableNav) { var previousNav, nextNav; @@ -542,7 +578,13 @@ var IdealImageSlider = (function() { }.bind(this)); // Touch Navigation - if (('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch) { + if ( (typeof jQuery !== 'undefined' && typeof(jQuery.supportsTrueHover)) == 'function' ? + !jQuery.supportsTrueHover() : + !!('ontouchstart' in window) + || !!('ontouchstart' in document.documentElement) + || !!window.ontouchstart + || (!!window.Touch && !!window.Touch.length) + || !!window.onmsgesturechange || (window.DocumentTouch && window.document instanceof window.DocumentTouch)) { this.settings.effect = 'slide'; previousNav.style.display = 'none'; nextNav.style.display = 'none'; @@ -588,17 +630,16 @@ var IdealImageSlider = (function() { if (_isInteger(this.settings.height)) { this._attributes.container.style.height = this.settings.height + 'px'; } else { - if (_isInteger(this.settings.initialHeight)) { - this._attributes.container.style.height = this.settings.initialHeight + 'px'; - } - // If aspect ratio parse and store if (this.settings.height.indexOf(':') > -1) { var aspectRatioParts = this.settings.height.split(':'); if (aspectRatioParts.length == 2 && _isInteger(parseInt(aspectRatioParts[0], 10)) && _isInteger(parseInt(aspectRatioParts[1], 10))) { this._attributes.aspectWidth = parseInt(aspectRatioParts[0], 10); this._attributes.aspectHeight = parseInt(aspectRatioParts[1], 10); + this._attributes.container.style.height = Math.round( (this._attributes.aspectHeight / this._attributes.aspectWidth) * this._attributes.container.offsetWidth ) + 'px'; } + } else if (_isInteger(this.settings.initialHeight)) { + this._attributes.container.style.height = this.settings.initialHeight + 'px'; } _addEvent(window, 'resize', function() { @@ -627,6 +668,10 @@ var IdealImageSlider = (function() { // Preload next images _loadImg(this._attributes.previousSlide); _loadImg(this._attributes.nextSlide); + + //Remove loading class + _removeClass(sliderEl, 'iis-loading'); + _addClass(sliderEl, 'iis-loaded'); }; Slider.prototype.get = function(attribute) { @@ -643,6 +688,10 @@ var IdealImageSlider = (function() { Slider.prototype.start = function() { if (!this._attributes) return; + if (this._attributes.timerId) { + clearInterval(this._attributes.timerId); + this._attributes.timerId = 0; + } this._attributes.timerId = setInterval(this.nextSlide.bind(this), this.settings.interval); this.settings.onStart.apply(this); @@ -829,4 +878,4 @@ var IdealImageSlider = (function() { Slider: Slider }; -})(); \ No newline at end of file +})();