v1.3.0 - fixed image caching, added unbind method

makryl · Jun 23, 2015 · 34fce76 · 34fce76
1 parent 42ef2a2
commit 34fce76
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 26 deletions.
diff --git a/README.md b/README.md
@@ -140,6 +140,12 @@ Also, you can use `data-href` attribute on any element, not only links.
     /* close image */
     $.abigimage.close();
 
+    /* unbind abigimage events */
+    $.abigimage.unbind();
+
+## Changes
+
+- *1.3.0* - fixed image caching, added `unbind` method.
 
 ## License
 

diff --git a/abigimage.jquery.js b/abigimage.jquery.js
@@ -1,6 +1,6 @@
 /**
  * http://aeqdev.com/tools/js/abigimage/
- * v 1.2.8
+ * v 1.3.0
  *
  * Copyright © 2014 Maksim Krylosov <[email protected]>
  *
@@ -78,6 +78,13 @@
         }
     }
 
+    function replaceImage(oldImage, newSrc) {
+        // force clear cache
+        var newImage = oldImage.removeAttr('src').clone(true).attr('src', newSrc);
+        oldImage.replaceWith(newImage);
+        return newImage;
+    }
+
     function open(src, openI) {
         if ('number' === typeof src) {
             if (src === i || src < 0 || src > t.length - 1) {
@@ -98,12 +105,12 @@
 
         opened = true;
 
-        // removeAttr to force image reloading instead of replacing on load
-        img.removeAttr('src').attr('src', src);
+        img = replaceImage(img, src);
+        listenTouchEvents();
         var $tn = $(t[nextI()]);
-        imgNext.removeAttr('src').attr('src', $tn.data('href') || $tn.attr('href'));
+        imgNext = replaceImage(imgNext, $tn.data('href') || $tn.attr('href'));
         var $tp = $(t[prevI()]);
-        imgPrev.removeAttr('src').attr('src', $tp.data('href') || $tp.attr('href'));
+        imgPrev = replaceImage(imgPrev, $tp.data('href') || $tp.attr('href'));
 
         overlay.fadeIn(opts.fadeIn);
         layout.fadeIn(opts.fadeIn);
@@ -131,6 +138,10 @@
         return false;
     }
 
+    function unbind() {
+        t.unbind('click.abigimage');
+    }
+
     prevBtnWrapper.click(function() {
         return prev();
     });
@@ -174,6 +185,14 @@
         bs = box[0].style;
 
     touchReset();
+    listenTouchEvents();
+
+    function listenTouchEvents() {
+        img[0].addEventListener('touchstart', touchstart);
+        img[0].addEventListener('touchmove', touchmove);
+        img[0].addEventListener('touchend', touchend);
+        img[0].addEventListener('touchcancel', touchend);
+    }
 
     function touchReset() {
         x = 0;
@@ -201,7 +220,7 @@
         );
     }
 
-    img[0].addEventListener('touchstart', function(e) {
+    function touchstart(e) {
         if (!opened) return;
         if (e.touches.length > 1) {
             multi = true;
@@ -223,9 +242,9 @@
         dy = 0;
         touches = e.touches;
         e.preventDefault();
-    });
+    }
 
-    img[0].addEventListener('touchmove', function(e) {
+    function touchmove(e) {
         if (!opened) return;
         dx = (med(e.touches, 'X') - med(touches, 'X'));
         dy = (med(e.touches, 'Y') - med(touches, 'Y'));
@@ -254,10 +273,7 @@
         }
         slideQueueAnimate(x, y, s, false);
         e.preventDefault();
-    });
-
-    img[0].addEventListener('touchend', touchend);
-    img[0].addEventListener('touchcancel', touchend);
+    }
 
     function touchend(e) {
         if (!opened) return;
@@ -449,7 +465,8 @@
         open: open,
         next: next,
         prev: prev,
-        close: close
+        close: close,
+        unbind: unbind
     };
 
     $.fn.abigimage.defaults = {

diff --git a/abigimage.jquery.json b/abigimage.jquery.json
@@ -1,6 +1,6 @@
 {
     "name": "abigimage",
-    "version": "1.2.8",
+    "version": "1.3.0",
     "title": "ABigImage - view big versions of images",
     "author": {
         "name": "Maksim Krylosov",
@@ -14,7 +14,7 @@
     "dependencies": {
         "jquery": ">=1.9"
     },
-    "description": "Fit mobile devices. Uses CSS3 transform and transition for smooth touch sliding. Touch slide left or right opens next or previous image, touch slide up or down closes image. Clicking image opens next one, clicking left side opens previous, clicking right side closes image. Hotkeys for next, previous and close buttons. Closing after viewing of all images. Preloading of next and previous images. Uses link's `href` or `data-href` attribute for large images. Fully customizable styles. Customizable bottom area. Customizable `onopen` event.",
+    "description": "Fit mobile devices. Uses CSS3 transform and transition for smooth touch sliding. Touch slide left or right opens next or previous image, touch slide up or down closes image. Clicking image opens next one, clicking left side opens previous, clicking right side closes image. Hotkeys for next, previous and close buttons. Closing after viewing of all images. Preloading of next and previous images. Multi-touch zoom. Uses link's `href` or `data-href` attribute for large images. Fully customizable styles. Customizable bottom area. Customizable `onopen` event.",
     "keywords": [
         "image",
         "picture",