diff --git a/src/touchTouch.css b/src/touchTouch.css
index 16797e7..6cf2ac8 100644
--- a/src/touchTouch.css
+++ b/src/touchTouch.css
@@ -20,30 +20,34 @@
 #galleryOverlay.visible {
     opacity: 1;
 }
-#gallerySlider {
+.gallery-slider {
     position: absolute;
+    display: block;
     width: 100%;
     height: 100%;
     margin: 0;
+    padding: 0;
+    border: 0;
+    font-size: 0;
     top: 0;
     left: 0;
-    font-size: 0;
+    z-index: 1;
     white-space: nowrap;
     -moz-transition: left 0.4s ease;
     -webkit-transition: left 0.4s ease;
     transition: left 0.4s ease;
 }
-#gallerySlider.rightSpring {
+.gallery-slider.rightSpring {
     -moz-animation: rightSpring 0.3s;
     -webkit-animation: rightSpring 0.3s;
     animation: rightSpring 0.3s;
 }
-#gallerySlider.leftSpring {
+.gallery-slider.leftSpring {
     -moz-animation: leftSpring 0.3s;
     -webkit-animation: leftSpring 0.3s;
     animation: leftSpring 0.3s;
 }
-#gallerySlider .placeholder {
+.gallery-slider .placeholder {
     width: 100%;
     height: 100%;
     display: inline-block;
@@ -55,7 +59,7 @@
 }
 /* The before element moves the
 * image halfway from the top */
-#gallerySlider .placeholder:before {
+.gallery-slider .placeholder:before {
     position: relative;
     display: inline-block;
     content: "";
@@ -66,14 +70,15 @@
     margin: 0;
     margin-right: -1px;
 }
-#gallerySlider .placeholder img {
+.gallery-slider .placeholder img {
     display: inline-block;
     vertical-align: middle;
     width: auto;
     height: auto;
 }
 /* Arrows */
-#prevArrow, #nextArrow {
+#galleryOverlay .prev-arrow,
+#galleryOverlay .next-arrow {
     border: none;
     text-decoration: none;
     background: transparent url('./arrows.png') no-repeat;
@@ -83,21 +88,23 @@
     width: 43px;
     height: 58px;
     top: 50%;
+    z-index: 2;
     margin-top: -29px;
     -moz-transition: opacity 0.2s ease;
     -webkit-transition: opacity 0.2s ease;
     transition: opacity 0.2s ease;
 }
-#prevArrow:hover, #nextArrow:hover {
+#galleryOverlay .prev-arrow:hover,
+#galleryOverlay .next-arrow:hover {
     opacity: 1;
 }
-#prevArrow {
+#galleryOverlay .prev-arrow {
     height: 80px;
     border: 3px solid white;
     background-position: left top;
     left: 10%;
 }
-#nextArrow{
+#galleryOverlay .next-arrow {
     height: 80px;
     border: 3px solid white;
     background-position: right top;
@@ -128,32 +135,34 @@
 
 @media (max-width: 1080px) {
 /* hide arrows if small enough touchscreen */
-#galleryOverlay.is-touch-screen #prevArrow,
-#galleryOverlay.is-touch-screen #nextArrow {
+#galleryOverlay.is-touch-screen .prev-arrow,
+#galleryOverlay.is-touch-screen .next-arrow {
     display: none !important;
 }
 }
 @media (orientation: landscape) {
-#gallerySlider .placeholder img {
+.gallery-slider .placeholder img {
+    max-width: none;
     max-height: 100%;
 }
 }
 @media (orientation: portrait) {
-#gallerySlider .placeholder img {
+.gallery-slider .placeholder img {
+    max-height: none;
     max-width: 100%;
 }
 }
-@media (max-width: 360px) {
-#gallerySlider .placeholder img,
-#gallerySlider .placeholder img {
+/*@media (max-width: 360px) {
+.gallery-slider .placeholder img,
+.gallery-slider .placeholder img {
     max-height: none;
     max-width: 100%;
 }
 }
 @media (max-height: 360px) {
-#gallerySlider .placeholder img,
-#gallerySlider .placeholder img {
+.gallery-slider .placeholder img,
+.gallery-slider .placeholder img {
     max-width: none;
     max-height: 100%;
 }
-}
+}*/
diff --git a/src/touchTouch.js b/src/touchTouch.js
index 8c8ea13..12f5098 100644
--- a/src/touchTouch.js
+++ b/src/touchTouch.js
@@ -1,7 +1,7 @@
 /**
 *  touchTouch.js
 *  Vanilla JavaScript version of https://github.com/tutorialzine/touchTouch Optimized Mobile Gallery by Martin Angelov
-*  @VERSION: 1.1.0
+*  @VERSION: 1.2.0
 *  @license: MIT License
 *
 *  https://github.com/foo123/touchTouch
@@ -10,20 +10,13 @@
 (function() {
 "use strict";
 
-var $ = '$tT', eventOptionsSupported = null,
+var eventOptionsSupported = null,
     trim_re = /^\s+|\s+$/g,
     trim = String.prototype.trim
         ? function(s) {return s.trim();}
         : function(s) {return s.replace(trim_re, '');}
 ;
 
-// add custom property to Element.prototype to avoid browser issues
-if (
-    window.Element
-    && !Object.prototype.hasOwnProperty.call(window.Element.prototype, $)
-)
-    window.Element.prototype[$] = null;
-
 function hasEventOptions()
 {
     var passiveSupported = false, options = {};
@@ -46,6 +39,7 @@ function addEvent(target, event, handler, options)
     if (null == eventOptionsSupported) eventOptionsSupported = hasEventOptions();
     if (target.attachEvent) target.attachEvent('on' + event, handler);
     else target.addEventListener(event, handler, eventOptionsSupported ? options : ('object' === typeof(options) ? !!options.capture : !!options));
+    return target;
 }
 function removeEvent(target, event, handler, options)
 {
@@ -53,16 +47,19 @@ function removeEvent(target, event, handler, options)
     // if (el.removeEventListener) not working in IE11
     if (target.detachEvent) target.detachEvent('on' + event, handler);
     else target.removeEventListener(event, handler, eventOptionsSupported ? options : ('object' === typeof(options) ? !!options.capture : !!options));
+    return target;
 }
 function addClass(el, className)
 {
     if (el.classList) el.classList.add(className);
     else el.className = '' === el.className ? className : (el.className + ' ' + className);
+    return el;
 }
 function removeClass(el, className)
 {
     if (el.classList) el.classList.remove(className);
     else el.className = trim((' ' + el.className + ' ').replace(' ' + className + ' ', ' '));
+    return el;
 }
 function closest(el, id)
 {
@@ -75,71 +72,62 @@ function closest(el, id)
 }
 function hide(el)
 {
-    el[$] = el[$] || {};
-    el[$].display = el.style.getPropertyValue('display');
-    if ('' === el[$].display) el[$].display = null;
+    el.style.setProperty('--touchTouchDisplay', el.style.getPropertyValue('display'));
     el.style.display = 'none';
     return el;
 }
 function show(el)
 {
     if ('none' === el.style.display)
-        el.style.display = el[$] && el[$].display ? el[$].display : 'block';
+        el.style.display = '' !== el.style.getPropertyValue('--touchTouchDisplay') ? el.style.getPropertyValue('--touchTouchDisplay') : 'block';
     return el;
 }
 
-/* Private variables */
-var overlay = null, slider = null,
-    prevArrow = null, nextArrow = null,
-    overlayVisible = false, touchmove = null;
+/* Global private variables */
+var activeInstance = null, overlay = null, overlayVisible = false, id = 0;
 
 function setup()
 {
-    if (!overlay && !slider)
+    if (!overlay)
     {
         // Appending the markup to the page
         overlay = document.createElement('div');
-        slider = document.createElement('div');
-        prevArrow = document.createElement('a');
-        nextArrow = document.createElement('a');
         overlay.id = 'galleryOverlay';
-        slider.id = 'gallerySlider';
-        prevArrow.id = 'prevArrow';
-        nextArrow.id = 'nextArrow';
-        if ('ontouchstart' in window) addClass(overlay, 'is-touch-screen');
+        if ('ontouchstart' in window)
+            addClass(overlay, 'is-touch-screen');
         document.body.appendChild(hide(overlay));
-        overlay.appendChild(slider);
-        overlay.appendChild(prevArrow);
-        overlay.appendChild(nextArrow);
+        // listen for esc/left/right keys
+        addEvent(window, 'keydown', function(e) {
+            if (activeInstance)
+            {
+                if (27 === e.keyCode /*ESC*/) hideOverlay();
+                else if (37 === e.keyCode /*LEFT*/) activeInstance.showPrevious();
+                else if (39 === e.keyCode /*RIGHT*/) activeInstance.showNext();
+            }
+        }, {passive:true, capture:false});
     }
 }
-function showOverlay(index)
+function showOverlay(instance)
 {
     // If the overlay is already shown, exit
     if (overlayVisible) return false;
-    // Show the overlay
-    show(overlay);
-    // Move the slider to the correct image
-    offsetSlider(index);
-    setTimeout(function() {
-        // Trigger the opacity CSS transition
-        addClass(overlay, 'visible');
-    }, 0);
     // Raise the visible flag
     overlayVisible = true;
+    activeInstance = instance;
+    // Show the overlay
+    show(overlay);
+    // Trigger the opacity CSS transition
+    setTimeout(function() {addClass(overlay, 'visible');}, 100);
 }
 function hideOverlay()
 {
     // If the overlay is not shown, exit
     if (!overlayVisible) return false;
+    overlayVisible = false;
+    activeInstance = null;
     // Hide the overlay
     removeClass(hide(overlay), 'visible');
-    overlayVisible = false;
-}
-function offsetSlider(index)
-{
-    // This will trigger a smooth css transition
-    slider.style.left = String(-index * 100) + '%';
+    setTimeout(function() {overlay.textContent = '';}, 0);
 }
 function loadImage(src, callback)
 {
@@ -153,77 +141,84 @@ function loadImage(src, callback)
 }
 
 /* Creating the plugin */
-function touchTouch(items)
+function touchTouch(items, options)
 {
-    setup();
+    var self = this;
+    if (!(self instanceof touchTouch))
+        return new touchTouch(items, options);
 
-    var placeholders, index = 0;
+    /* Private variables */
+    var slider, prevArrow, nextArrow,
+        placeholders, index = 0,
+        itemClick, sliderClick, prevArrowClick, nextArrowClick,
+        sliderTouchStart, sliderTouchMove, sliderTouchEnd;
+
+    options = options || {};
+    setup();
+    slider = document.createElement('div');
+    prevArrow = document.createElement('a');
+    nextArrow = document.createElement('a');
+    slider.id = 'gallerySlider' + String(++id);
+    addClass(slider, 'gallery-slider');
+    if (options.slider)
+        addClass(slider, options.slider);
+    addClass(prevArrow, 'prev-arrow');
+    if (options.prevArrow)
+        addClass(prevArrow, options.prevArrow);
+    addClass(nextArrow, 'next-arrow');
+    if (options.nextArrow)
+        addClass(nextArrow, options.nextArrow);
 
     items = Array.prototype.slice.call(items || []);
 
     // Creating a placeholder for each image
     placeholders = items.map(function(item, i) {
         var placeholder;
-        if (i >= slider.children.length)
-        {
-            placeholder = document.createElement('div');
-            addClass(placeholder, 'placeholder');
-            slider.appendChild(placeholder);
-        }
-        else
-        {
-            placeholder = slider.children[i];
-            placeholder.textContent = '';
-        }
+        placeholder = document.createElement('div');
+        addClass(placeholder, 'placeholder');
+        slider.appendChild(placeholder);
         return placeholder;
     });
 
     // Hide the gallery if the background is touched / clicked
-    addEvent(slider, 'click', function(e) {
-        if ('img' !== e.target.tagName.toLowerCase())
+    addEvent(slider, 'click', sliderClick = function(e) {
+        if (('img' !== e.target.tagName.toLowerCase()))
             hideOverlay();
     }, {passive:true, capture:false});
 
     // listen for prev/next clicks
-    addEvent(prevArrow, 'click', function(e) {
+    addEvent(prevArrow, 'click', prevArrowClick = function(e) {
         e.preventDefault && e.preventDefault();
-        showPrevious();
+        self.showPrevious();
     }, {passive:false, capture:false});
-    addEvent(nextArrow, 'click', function(e) {
+    addEvent(nextArrow, 'click', nextArrowClick = function(e) {
         e.preventDefault && e.preventDefault();
-        showNext();
+        self.showNext();
     }, {passive:false, capture:false});
 
-    // listen for esc/left/right keys
-    addEvent(window, 'keydown', function(e) {
-        if (27 === e.keyCode /*ESC*/) hideOverlay();
-        else if (37 === e.keyCode /*LEFT*/) showPrevious();
-        else if (39 === e.keyCode /*RIGHT*/) showNext();
-    }, {passive:true, capture:false});
-
     // Listen for touch events on the body and check if they
     // originated in #gallerySlider img - the images in the slider.
-    addEvent(document.body, 'touchstart', function(e) {
+    addEvent(slider, 'touchstart', sliderTouchStart = function(e) {
         if (
             'img' !== e.target.tagName.toLowerCase()
-            || !closest(e.target, 'gallerySlider')
+            || !closest(e.target, slider.id)
         ) return false;
 
         var touch = e, startX = touch.changedTouches[0].pageX;
 
-        addEvent(slider, 'touchmove', touchmove = function touchmove(e) {
+        addEvent(slider, 'touchmove', sliderTouchMove = function sliderTouchMove(e) {
             e.preventDefault && e.preventDefault();
             touch = e.touches[0] || e.changedTouches[0];
 
             if (touch.pageX - startX > 10)
             {
-                removeEvent(slider, 'touchmove', touchmove, {passive:false, capture:false});
-                showPrevious();
+                removeEvent(slider, 'touchmove', sliderTouchMove, {passive:false, capture:false});
+                self.showPrevious();
             }
             else if (touch.pageX - startX < -10)
             {
-                removeEvent(slider, 'touchmove', touchmove, {passive:false, capture:false});
-                showNext();
+                removeEvent(slider, 'touchmove', sliderTouchMove, {passive:false, capture:false});
+                self.showNext();
             }
         }, {passive:false, capture:false});
         // Return false to prevent image
@@ -231,29 +226,46 @@ function touchTouch(items)
         return false;
     }, {passive:true, capture:false});
 
-    addEvent(document.body, 'touchend', function() {
-        if (touchmove) removeEvent(slider, 'touchmove', touchmove, {passive:false, capture:false});
+    addEvent(slider, 'touchend', sliderTouchEnd = function() {
+        if (sliderTouchMove) removeEvent(slider, 'touchmove', sliderTouchMove, {passive:false, capture:false});
     }, {passive:true, capture:false});
 
     // Listening for clicks on the thumbnails
-    items.forEach(function(item, i) {
-        addEvent(item, 'click', function(e) {
+    itemClick = items.map(function(item, i) {
+        var click;
+        addEvent(item, 'click', click = function(e) {
             e.preventDefault && e.preventDefault();
-
             // Find the position of this image
             // in the collection
             index = i;
-            showOverlay(index);
-            showImage(index);
+            self.showGallery();
+        }, {passive:false, capture:false});
+        return click;
+    });
 
+    self.showGallery = function showGallery() {
+        if (activeInstance !== self)
+        {
+            // make up the dom structure
+            overlay.textContent = '';
+            overlay.appendChild(slider);
+            overlay.appendChild(prevArrow);
+            overlay.appendChild(nextArrow);
+            // Move the slider to the correct image
+            offsetSlider(index);
+            showOverlay(self);
+            showImage(index);
             // Preload the next image
             preload(index + 1);
-
             // Preload the previous
             preload(index - 1);
+        }
+    };
 
-        }, {passive:false, capture:false});
-    });
+    var offsetSlider = function offsetSlider(index) {
+        // This will trigger a smooth css transition
+        slider.style.left = String(-index * 100) + '%';
+    };
 
     // Preload an image by its index in the items array
     var preload = function preload(index) {
@@ -278,7 +290,8 @@ function touchTouch(items)
         }
     };
 
-    var showNext = function showNext() {
+    self.showNext = function showNext() {
+        if (activeInstance !== self) return;
         // If this is not the last image
         if (index + 1 < items.length)
         {
@@ -290,13 +303,12 @@ function touchTouch(items)
         {
             // Trigger the spring animation
             addClass(slider, 'rightSpring');
-            setTimeout(function() {
-                removeClass(slider, 'rightSpring');
-            }, 500);
+            setTimeout(function() {removeClass(slider, 'rightSpring');}, 500);
         }
     };
 
-    var showPrevious = function showPrevious() {
+    self.showPrevious = function showPrevious() {
+        if (activeInstance !== self) return;
         // If this is not the first image
         if (index > 0)
         {
@@ -308,13 +320,51 @@ function touchTouch(items)
         {
             // Trigger the spring animation
             addClass(slider, 'leftSpring');
-            setTimeout(function() {
-                removeClass(slider, 'leftSpring');
-            }, 500);
+            setTimeout(function() {removeClass(slider, 'leftSpring');}, 500);
+        }
+    };
+
+    self.dispose = function() {
+        if (slider)
+        {
+            if (activeInstance === self) hideOverlay();
+            if (sliderTouchMove) removeEvent(slider, 'touchmove', sliderTouchMove, {passive:false, capture:false});
+            removeEvent(slider, 'touchstart', sliderTouchStart, {passive:true, capture:false});
+            removeEvent(slider, 'touchend', sliderTouchEnd, {passive:true, capture:false});
+            removeEvent(slider, 'click', sliderClick, {passive:true, capture:false});
+            removeEvent(prevArrow, 'click', prevArrowClick, {passive:false, capture:false});
+            removeEvent(nextArrow, 'click', nextArrowClick, {passive:false, capture:false});
+            items.forEach(function(item, i){
+                removeEvent(item, 'click', itemClick[i], {passive:false, capture:false});
+            });
+            slider.textContent = '';
+            slider = null;
+            prevArrow = null;
+            nextArrow = null;
+            placeholders = null;
+            items = null;
+            itemClick = null;
+            sliderTouchMove = null;
+            sliderTouchStart = null;
+            sliderTouchEnd = null;
+            sliderClick = null;
+            prevArrowClick = null;
+            nextArrowClick = null;
+            options = null;
+            self.showGallery = null;
+            self.showNext = null;
+            self.showPrevious = null;
         }
     };
 }
-touchTouch.VERSION = '1.1.0';
+touchTouch.VERSION = '1.2.0';
+touchTouch.prototype = {
+    constructor: touchTouch,
+    dispose: null,
+    showGallery: null,
+    showNext: null,
+    showPrevious: null
+};
 // export it
 window.touchTouch = touchTouch;
 })();
\ No newline at end of file
diff --git a/src/touchTouch.min.css b/src/touchTouch.min.css
index 5520280..be88e5f 100644
--- a/src/touchTouch.min.css
+++ b/src/touchTouch.min.css
@@ -1 +1 @@
-#galleryOverlay{position:fixed;display:none;width:100%;height:100%;margin:0;top:0;left:0;opacity:0;z-index:100000;background-color:#222;background-color:rgba(0,0,0,0.8);overflow:hidden;-moz-transition:opacity 1s ease;-webkit-transition:opacity 1s ease;transition:opacity 1s ease}#galleryOverlay.visible{opacity:1}#gallerySlider{position:absolute;width:100%;height:100%;margin:0;top:0;left:0;font-size:0;white-space:nowrap;-moz-transition:left .4s ease;-webkit-transition:left .4s ease;transition:left .4s ease}#gallerySlider.rightSpring{-moz-animation:rightSpring .3s;-webkit-animation:rightSpring .3s;animation:rightSpring .3s}#gallerySlider.leftSpring{-moz-animation:leftSpring .3s;-webkit-animation:leftSpring .3s;animation:leftSpring .3s}#gallerySlider .placeholder{width:100%;height:100%;display:inline-block;vertical-align:middle;overflow:visible;line-height:1px;text-align:center;background:transparent url(./loader.gif) no-repeat center center}#gallerySlider .placeholder:before{position:relative;display:inline-block;content:"";height:50%;width:1px;border:0;padding:0;margin:0;margin-right:-1px}#gallerySlider .placeholder img{display:inline-block;vertical-align:middle;width:auto;height:auto}#prevArrow,#nextArrow{border:none;text-decoration:none;background:transparent url('./arrows.png') no-repeat;opacity:.5;cursor:pointer;position:absolute;width:43px;height:58px;top:50%;margin-top:-29px;-moz-transition:opacity .2s ease;-webkit-transition:opacity .2s ease;transition:opacity .2s ease}#prevArrow:hover,#nextArrow:hover{opacity:1}#prevArrow{height:80px;border:3px solid white;background-position:left top;left:10%}#nextArrow{height:80px;border:3px solid white;background-position:right top;right:10%}@-webkit-keyframes rightSpring{0%{margin-left:0}50%{margin-left:-30px}100%{margin-left:0}}@-webkit-keyframes leftSpring{0%{margin-left:0}50%{margin-left:30px}100%{margin-left:0}}@keyframes rightSpring{0%{margin-left:0}50%{margin-left:-30px}100%{margin-left:0}}@keyframes leftSpring{0%{margin-left:0}50%{margin-left:30px}100%{margin-left:0}}@media(max-width:1080px){#galleryOverlay.is-touch-screen #prevArrow,#galleryOverlay.is-touch-screen #nextArrow{display:none!important}}@media(orientation:landscape){#gallerySlider .placeholder img{max-height:100%}}@media(orientation:portrait){#gallerySlider .placeholder img{max-width:100%}}@media(max-width:360px){#gallerySlider .placeholder img,#gallerySlider .placeholder img{max-height:none;max-width:100%}}@media(max-height:360px){#gallerySlider .placeholder img,#gallerySlider .placeholder img{max-width:none;max-height:100%}}
\ No newline at end of file
+#galleryOverlay{position:fixed;display:none;width:100%;height:100%;margin:0;top:0;left:0;opacity:0;z-index:100000;background-color:#222;background-color:rgba(0,0,0,0.8);overflow:hidden;-moz-transition:opacity 1s ease;-webkit-transition:opacity 1s ease;transition:opacity 1s ease}#galleryOverlay.visible{opacity:1}.gallery-slider{position:absolute;display:block;width:100%;height:100%;margin:0;padding:0;border:0;font-size:0;top:0;left:0;z-index:1;white-space:nowrap;-moz-transition:left .4s ease;-webkit-transition:left .4s ease;transition:left .4s ease}.gallery-slider.rightSpring{-moz-animation:rightSpring .3s;-webkit-animation:rightSpring .3s;animation:rightSpring .3s}.gallery-slider.leftSpring{-moz-animation:leftSpring .3s;-webkit-animation:leftSpring .3s;animation:leftSpring .3s}.gallery-slider .placeholder{width:100%;height:100%;display:inline-block;vertical-align:middle;overflow:visible;line-height:1px;text-align:center;background:transparent url(./loader.gif) no-repeat center center}.gallery-slider .placeholder:before{position:relative;display:inline-block;content:"";height:50%;width:1px;border:0;padding:0;margin:0;margin-right:-1px}.gallery-slider .placeholder img{display:inline-block;vertical-align:middle;width:auto;height:auto}#galleryOverlay .prev-arrow,#galleryOverlay .next-arrow{border:none;text-decoration:none;background:transparent url('./arrows.png') no-repeat;opacity:.5;cursor:pointer;position:absolute;width:43px;height:58px;top:50%;z-index:2;margin-top:-29px;-moz-transition:opacity .2s ease;-webkit-transition:opacity .2s ease;transition:opacity .2s ease}#galleryOverlay .prev-arrow:hover,#galleryOverlay .next-arrow:hover{opacity:1}#galleryOverlay .prev-arrow{height:80px;border:3px solid white;background-position:left top;left:10%}#galleryOverlay .next-arrow{height:80px;border:3px solid white;background-position:right top;right:10%}@-webkit-keyframes rightSpring{0%{margin-left:0}50%{margin-left:-30px}100%{margin-left:0}}@-webkit-keyframes leftSpring{0%{margin-left:0}50%{margin-left:30px}100%{margin-left:0}}@keyframes rightSpring{0%{margin-left:0}50%{margin-left:-30px}100%{margin-left:0}}@keyframes leftSpring{0%{margin-left:0}50%{margin-left:30px}100%{margin-left:0}}@media(max-width:1080px){#galleryOverlay.is-touch-screen .prev-arrow,#galleryOverlay.is-touch-screen .next-arrow{display:none!important}}@media(orientation:landscape){.gallery-slider .placeholder img{max-width:none;max-height:100%}}@media(orientation:portrait){.gallery-slider .placeholder img{max-height:none;max-width:100%}}
\ No newline at end of file
diff --git a/src/touchTouch.min.js b/src/touchTouch.min.js
index 5135137..942e5dd 100644
--- a/src/touchTouch.min.js
+++ b/src/touchTouch.min.js
@@ -1,10 +1,10 @@
 /**
 *  touchTouch.js
 *  Vanilla JavaScript version of https://github.com/tutorialzine/touchTouch Optimized Mobile Gallery by Martin Angelov
-*  @VERSION: 1.1.0
+*  @VERSION: 1.2.0
 *  @license: MIT License
 *
 *  https://github.com/foo123/touchTouch
 *
 **/
-!function(){"use strict";var n="$tT",a=null,t=/^\s+|\s+$/g,i=String.prototype.trim?function(e){return e.trim()}:function(e){return e.replace(t,"")};function r(){var t=!1,e={};try{Object.defineProperty(e,"passive",{get:function(){return!(t=!0)}}),window.addEventListener("test",null,e),window.removeEventListener("test",null,e)}catch(e){t=!1}return t}function u(e,t,n,i){null==a&&(a=r()),e.attachEvent?e.attachEvent("on"+t,n):e.addEventListener(t,n,a?i:"object"==typeof i?!!i.capture:!!i)}function s(e,t,n,i){null==a&&(a=r()),e.detachEvent?e.detachEvent("on"+t,n):e.removeEventListener(t,n,a?i:"object"==typeof i?!!i.capture:!!i)}function p(e,t){e.classList?e.classList.add(t):e.className=""===e.className?t:e.className+" "+t}function e(e,t){e.classList?e.classList.remove(t):e.className=i((" "+e.className+" ").replace(" "+t+" "," "))}function d(e){return e[n]=e[n]||{},e[n].display=e.style.getPropertyValue("display"),""===e[n].display&&(e[n].display=null),e.style.display="none",e}window.Element&&!Object.prototype.hasOwnProperty.call(window.Element.prototype,n)&&(window.Element.prototype[n]=null);var f=null,v=null,h=null,m=null,c=!1,y=null;function g(e){var t;c||("none"===(t=f).style.display&&(t.style.display=t[n]&&t[n].display?t[n].display:"block"),E(e),setTimeout(function(){p(f,"visible")},0),c=!0)}function w(){c&&(e(d(f),"visible"),c=!1)}function E(e){v.style.left=String(100*-e)+"%"}function o(a){f||v||(f=document.createElement("div"),v=document.createElement("div"),h=document.createElement("a"),m=document.createElement("a"),f.id="galleryOverlay",v.id="gallerySlider",h.id="prevArrow",m.id="nextArrow","ontouchstart"in window&&p(f,"is-touch-screen"),document.body.appendChild(d(f)),f.appendChild(v),f.appendChild(h),f.appendChild(m));var r,n=0;a=Array.prototype.slice.call(a||[]),r=a.map(function(e,t){var n;return t>=v.children.length?(p(n=document.createElement("div"),"placeholder"),v.appendChild(n)):(n=v.children[t]).textContent="",n}),u(v,"click",function(e){"img"!==e.target.tagName.toLowerCase()&&w()},{passive:!0,capture:!1}),u(h,"click",function(e){e.preventDefault&&e.preventDefault(),l()},{passive:!1,capture:!1}),u(m,"click",function(e){e.preventDefault&&e.preventDefault(),o()},{passive:!1,capture:!1}),u(window,"keydown",function(e){27===e.keyCode?w():37===e.keyCode?l():39===e.keyCode&&o()},{passive:!0,capture:!1}),u(document.body,"touchstart",function(e){if("img"!==e.target.tagName.toLowerCase()||!function(e,t){if(e.closest)return e.closest("#"+t);for(;e;){if(t===e.id)return e;e=e.parentNode}}(e.target,"gallerySlider"))return!1;var n=e,i=n.changedTouches[0].pageX;return u(v,"touchmove",y=function e(t){t.preventDefault&&t.preventDefault(),10<(n=t.touches[0]||t.changedTouches[0]).pageX-i?(s(v,"touchmove",e,{passive:!1,capture:!1}),l()):n.pageX-i<-10&&(s(v,"touchmove",e,{passive:!1,capture:!1}),o())},{passive:!1,capture:!1}),!1},{passive:!0,capture:!1}),u(document.body,"touchend",function(){y&&s(v,"touchmove",y,{passive:!1,capture:!1})},{passive:!0,capture:!1}),a.forEach(function(e,t){u(e,"click",function(e){e.preventDefault&&e.preventDefault(),g(n=t),c(n),i(n+1),i(n-1)},{passive:!1,capture:!1})});var i=function(e){if(e<0||e>=a.length)return!1;setTimeout(function(){c(e)},1e3)},c=function(e){if(e<0||e>=a.length)return!1;var t,n,i;r[e].children.length||(t=a[e].href,n=function(){r[e].textContent="",r[e].appendChild(this)},u(i=document.createElement("img"),"load",function e(){s(i,"load",e),p(i,i.height>i.width?"is-portrait":i.height===i.width?"is-square":"is-landscape"),n.call(i)}),i.src=t)},o=function(){n+1<a.length?(E(++n),i(n+1)):(p(v,"rightSpring"),setTimeout(function(){e(v,"rightSpring")},500))},l=function(){0<n?(E(--n),i(n-1)):(p(v,"leftSpring"),setTimeout(function(){e(v,"leftSpring")},500))}}o.VERSION="1.1.0",window.touchTouch=o}();
\ No newline at end of file
+!function(){"use strict";var o=null,t=/^\s+|\s+$/g,n=String.prototype.trim?function(e){return e.trim()}:function(e){return e.replace(t,"")};function i(){var t=!1,e={};try{Object.defineProperty(e,"passive",{get:function(){return!(t=!0)}}),window.addEventListener("test",null,e),window.removeEventListener("test",null,e)}catch(e){t=!1}return t}function w(e,t,n,r){return null==o&&(o=i()),e.attachEvent?e.attachEvent("on"+t,n):e.addEventListener(t,n,o?r:"object"==typeof r?!!r.capture:!!r),e}function g(e,t,n,r){return null==o&&(o=i()),e.detachEvent?e.detachEvent("on"+t,n):e.removeEventListener(t,n,o?r:"object"==typeof r?!!r.capture:!!r),e}function E(e,t){return e.classList?e.classList.add(t):e.className=""===e.className?t:e.className+" "+t,e}function C(e,t){return e.classList?e.classList.remove(t):e.className=n((" "+e.className+" ").replace(" "+t+" "," ")),e}function N(e){return e.style.setProperty("--touchTouchDisplay",e.style.getPropertyValue("display")),e.style.display="none",e}var k=null,x=null,D=!1,P=0;function T(){D&&(D=!1,k=null,C(N(x),"visible"),setTimeout(function(){x.textContent=""},0))}function L(o,e){var i=this;if(!(i instanceof L))return new L(o,e);var a,t,n,c,r,s,u,l,p,h,v,d=0;e=e||{},x||((x=document.createElement("div")).id="galleryOverlay","ontouchstart"in window&&E(x,"is-touch-screen"),document.body.appendChild(N(x)),w(window,"keydown",function(e){k&&(27===e.keyCode?T():37===e.keyCode?k.showPrevious():39===e.keyCode&&k.showNext())},{passive:!0,capture:!1})),a=document.createElement("div"),t=document.createElement("a"),n=document.createElement("a"),a.id="gallerySlider"+String(++P),E(a,"gallery-slider"),e.slider&&E(a,e.slider),E(t,"prev-arrow"),e.prevArrow&&E(t,e.prevArrow),E(n,"next-arrow"),e.nextArrow&&E(n,e.nextArrow),o=Array.prototype.slice.call(o||[]),c=o.map(function(e,t){var n=document.createElement("div");return E(n,"placeholder"),a.appendChild(n),n}),w(a,"click",s=function(e){"img"!==e.target.tagName.toLowerCase()&&T()},{passive:!0,capture:!1}),w(t,"click",u=function(e){e.preventDefault&&e.preventDefault(),i.showPrevious()},{passive:!1,capture:!1}),w(n,"click",l=function(e){e.preventDefault&&e.preventDefault(),i.showNext()},{passive:!1,capture:!1}),w(a,"touchstart",p=function(e){if("img"!==e.target.tagName.toLowerCase()||!function(e,t){if(e.closest)return e.closest("#"+t);for(;e;){if(t===e.id)return e;e=e.parentNode}}(e.target,a.id))return!1;var n=e,r=n.changedTouches[0].pageX;return w(a,"touchmove",h=function e(t){t.preventDefault&&t.preventDefault(),10<(n=t.touches[0]||t.changedTouches[0]).pageX-r?(g(a,"touchmove",e,{passive:!1,capture:!1}),i.showPrevious()):n.pageX-r<-10&&(g(a,"touchmove",e,{passive:!1,capture:!1}),i.showNext())},{passive:!1,capture:!1}),!1},{passive:!0,capture:!1}),w(a,"touchend",v=function(){h&&g(a,"touchmove",h,{passive:!1,capture:!1})},{passive:!0,capture:!1}),r=o.map(function(e,t){return w(e,"click",e=function(e){e.preventDefault&&e.preventDefault(),d=t,i.showGallery()},{passive:!1,capture:!1}),e}),i.showGallery=function(){var e;k!==i&&(x.textContent="",x.appendChild(a),x.appendChild(t),x.appendChild(n),f(d),e=i,D||(D=!0,k=e,"none"===(e=x).style.display&&(e.style.display=""!==e.style.getPropertyValue("--touchTouchDisplay")?e.style.getPropertyValue("--touchTouchDisplay"):"block"),setTimeout(function(){E(x,"visible")},100)),y(d),m(d+1),m(d-1))};var f=function(e){a.style.left=String(100*-e)+"%"},m=function(e){if(e<0||e>=o.length)return!1;setTimeout(function(){y(e)},1e3)},y=function(e){if(e<0||e>=o.length)return!1;var t,n,r;c[e].children.length||(t=o[e].href,n=function(){c[e].textContent="",c[e].appendChild(this)},w(r=document.createElement("img"),"load",function e(){g(r,"load",e),E(r,r.height>r.width?"is-portrait":r.height===r.width?"is-square":"is-landscape"),n.call(r)}),r.src=t)};i.showNext=function(){k===i&&(d+1<o.length?(f(++d),m(d+1)):(E(a,"rightSpring"),setTimeout(function(){C(a,"rightSpring")},500)))},i.showPrevious=function(){k===i&&(0<d?(f(--d),m(d-1)):(E(a,"leftSpring"),setTimeout(function(){C(a,"leftSpring")},500)))},i.dispose=function(){a&&(k===i&&T(),h&&g(a,"touchmove",h,{passive:!1,capture:!1}),g(a,"touchstart",p,{passive:!0,capture:!1}),g(a,"touchend",v,{passive:!0,capture:!1}),g(a,"click",s,{passive:!0,capture:!1}),g(t,"click",u,{passive:!1,capture:!1}),g(n,"click",l,{passive:!1,capture:!1}),o.forEach(function(e,t){g(e,"click",r[t],{passive:!1,capture:!1})}),a.textContent="",e=l=u=s=v=p=h=r=o=c=n=t=a=null,i.showGallery=null,i.showNext=null,i.showPrevious=null)}}L.VERSION="1.2.0",L.prototype={constructor:L,dispose:null,showGallery:null,showNext:null,showPrevious:null},window.touchTouch=L}();
\ No newline at end of file
diff --git a/test/demo.html b/test/demo.html
index 673f947..54b05cf 100644
--- a/test/demo.html
+++ b/test/demo.html
@@ -20,7 +20,7 @@
     text-align: center;
     margin: 40px auto 20px auto;
 }
-#photos {
+.photos {
     position: relative;
     display: block;
     box-sizing: border-box;
@@ -54,7 +54,7 @@
 
 <h1>Vanilla touchTouch Demo</h1>
 
-<div id="photos">
+<div id="gallery1" class="photos">
     <a class="magnifier" href="./imgs/1.jpg"><img src="./imgs/thumbs/1.jpg" /></a>
     <a class="magnifier" href="./imgs/2.jpg"><img src="./imgs/thumbs/2.jpg" /></a>
     <a class="magnifier" href="./imgs/3.jpg"><img src="./imgs/thumbs/3.jpg" /></a>
@@ -63,9 +63,20 @@ <h1>Vanilla touchTouch Demo</h1>
     <a class="magnifier" href="./imgs/6.jpg"><img src="./imgs/thumbs/6.jpg" /></a>
 </div>
 
+<hr />
+
+<div id="gallery2" class="photos">
+    <a class="magnifier" href="./imgs/1.jpg"><img src="./imgs/thumbs/1.jpg" /></a>
+    <a class="magnifier" href="./imgs/2.jpg"><img src="./imgs/thumbs/2.jpg" /></a>
+    <a class="magnifier" href="./imgs/4.jpg"><img src="./imgs/thumbs/4.jpg" /></a>
+    <a class="magnifier" href="./imgs/3.jpg"><img src="./imgs/thumbs/3.jpg" /></a>
+</div>
+
 <script src="../src/touchTouch.js"></script>
 <script>
-touchTouch(document.body.querySelectorAll('.magnifier'));
+// multiple instances
+touchTouch(document.getElementById('gallery1').querySelectorAll('.magnifier'));
+touchTouch(document.getElementById('gallery2').querySelectorAll('.magnifier'));
 </script>
 </body>
 </html>
\ No newline at end of file