Merge pull request i-like-robots#43 from i-like-robots/release/2.1.1

Release/2.2.1

README.md

@@ -26,6 +26,10 @@ This work is licensed under a [MIT License][5].
 
 This jQuery plugin was written by [Matt Hinchliffe][6].
 
+Thanks also for contributions from:
+
+- [Steve Lindstrom](https://github.com/slindstr)
+
 [1]: http://github.com/i-like-robots/EasyZoom/
 [2]: http://www.jquery.com
 [3]: http://cssglobe.com/lab/easyzoom/easyzoom.html

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "easyzoom",
-  "version": "2.2.0",
+  "version": "2.2.1",
   "description": "EasyZoom is an elegant, highly optimised jQuery image zoom and panning plugin based on the original work by Alen Grakalic. EasyZoom supports touch-enabled devices and is easily customisable with CSS.",
   "keywords": [
     "zoom",

image-zoom.jquery.json

@@ -1,6 +1,6 @@
 {
   "name": "image-zoom",
-  "version": "2.2.0",
+  "version": "2.2.1",
   "title": "EasyZoom, jQuery image zoom plugin",
   "description": "EasyZoom is an elegant, highly optimised jQuery image zoom and panning plugin based on the original work by Alen Grakalic. EasyZoom supports touch-enabled devices and is easily customisable with CSS.",
   "keywords": [

index.html

@@ -273,10 +273,10 @@ <h1>
 					Removes all events and elements created and attached by EasyZoom.
 				</dd>
 				<dt>
-					<code>.swap(<var>standardSrc</var>, <var>zoomSrc</var>)</code>
+					<code>.swap(<var>standardSrc</var>, <var>zoomSrc</var>, <var>[srcsetStringOrArray]</var>)</code>
 				</dt>
 				<dd>
-					Easily switch the standard and zoom image sources.
+					Easily switch the standard and zoom image sources. To display retina images via the srcset attribute, use the optional srcsetStringOrArray argument.
 				</dd>
 			</dl>
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "EasyZoom",
-  "version": "2.2.0",
+  "version": "2.2.1",
   "devDependencies": {
     "grunt": "0.4.x",
     "grunt-contrib-jshint": "0.9.x",

src/easyzoom.js

@@ -36,7 +36,7 @@
         this.$target = $(target);
         this.opts = $.extend({}, defaults, options);
 
-        if ( this.isOpen === undefined ) {
+        if (this.isOpen === undefined) {
             this._init();
         }
 
@@ -60,7 +60,7 @@
             .on('mouseenter.easyzoom touchstart.easyzoom', function(e) {
                 self.isMouseOver = true;
 
-                if ( ! e.originalEvent.touches || e.originalEvent.touches.length === 1) {
+                if (!e.originalEvent.touches || e.originalEvent.touches.length === 1) {
                     e.preventDefault();
                     self.show(e, true);
                 }
@@ -97,7 +97,7 @@
 
         if (! this.isReady) {
             this._load(this.$link.attr('href'), function() {
-                if (!testMouseOver || self.isMouseOver) {
+                if (self.isMouseOver || !testMouseOver) {
                     self.show(e);
                 }
             });
@@ -158,7 +158,7 @@
         zoom.onload = $.proxy(function() {
 
             // IE may fire a load event even on error so check the image has dimensions
-            if (zoom.width === 0) {
+            if (!zoom.width) {
                 return;
             }
 
@@ -195,17 +195,17 @@
         var offset  = this.$target.offset();
         var pt = ly - offset.top;
         var pl = lx - offset.left;
-        var xt = pt * rh;
-        var xl = pl * rw;
+        var xt = Math.ceil(pt * rh);
+        var xl = Math.ceil(pl * rw);
 
         // Close if outside
         if (xl < 0 || xt < 0 || xl > dw || xt > dh) {
             this.hide();
         }
         else {
             this.$zoom.css({
-                top:  '' + (Math.ceil(xt) * -1) + 'px',
-                left: '' + (Math.ceil(xl) * -1) + 'px'
+                top:  '' + (xt * -1) + 'px',
+                left: '' + (xl * -1) + 'px'
             });
         }
 
@@ -229,8 +229,9 @@
      * Swap
      * @param {String} standardSrc
      * @param {String} zoomHref
+     * @param {String|Array} srcsetStringOrArray (Optional)
      */
-    EasyZoom.prototype.swap = function(standardSrc, zoomHref) {
+    EasyZoom.prototype.swap = function(standardSrc, zoomHref, srcsetStringOrArray) {
         this.hide();
         this.isReady = false;
 
@@ -242,8 +243,15 @@
             this.$notice.detach();
         }
 
+        if ($.isArray(srcsetStringOrArray)) {
+            srcsetStringOrArray = srcsetStringOrArray.join();
+        }
+
         this.$target.removeClass('is-loading is-ready is-error');
-        this.$image.attr('src', standardSrc);
+        this.$image.attr({
+            src: standardSrc,
+            srcset: srcsetStringOrArray
+        });
         this.$link.attr('href', zoomHref);
     };
 
@@ -270,26 +278,26 @@
     };
 
     // jQuery plugin wrapper
-    $.fn.easyZoom = function( options ) {
+    $.fn.easyZoom = function(options) {
         return this.each(function() {
             var api = $.data(this, 'easyZoom');
 
-            if ( ! api) {
+            if (!api) {
                 $.data(this, 'easyZoom', new EasyZoom(this, options));
             }
-            else if ( api.isOpen === undefined ) {
+            else if (api.isOpen === undefined) {
                 api._init();
             }
         });
     };
 
     // AMD and CommonJS module compatibility
-    if ( typeof define === 'function' && define.amd ){
+    if (typeof define === 'function' && define.amd){
         define(function() {
             return EasyZoom;
         });
     }
-    else if ( typeof module !== 'undefined' && module.exports ) {
+    else if (typeof module !== 'undefined' && module.exports) {
         module.exports = EasyZoom;
     }
 

test/spec/easyzoom.js

@@ -127,6 +127,35 @@
 
     });
 
+    test(".swap(standard, zoom, srcsetString)", function() {
+
+        expect(1);
+
+        var standard = "../example-images/test_standard.jpg";
+        var zoom = "../example-images/test_zoom.jpg";
+        var srcsetString = "../example-images/test_standard.jpg 1x, ../example-images/test_zoom.jpg 2x";
+
+        api.swap(standard, zoom, srcsetString);
+
+        equal(api.$image.attr("srcset"), srcsetString, "Standard image SRCSET changed");
+
+    });
+
+    test(".swap(standard, zoom, srcsetArray)", function() {
+
+        expect(1);
+
+        var standard = "../example-images/test_standard.jpg";
+        var zoom = "../example-images/test_zoom.jpg";
+        var srcsetArray = ['../example-images/test_standard.jpg 1x', '../example-images/test_zoom.jpg 2x'];
+        var srcsetString = '../example-images/test_standard.jpg 1x,../example-images/test_zoom.jpg 2x';
+
+        api.swap(standard, zoom, srcsetArray);
+
+        equal(api.$image.attr("srcset"), srcsetString, "Standard image SRCSET changed");
+
+    });
+
     test(".teardown()", function() {
 
         api.teardown();