Merge pull request #48 from i-like-robots/pr/45

Add support for srcset
i-like-robots · Sep 12, 2014 · 528f9fd · 528f9fd
2 parents 787ba17 + 009d2f5
commit 528f9fd
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 4 deletions.
diff --git a/README.md b/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

diff --git a/index.html b/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>
 

diff --git a/src/easyzoom.js b/src/easyzoom.js
@@ -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);
     };
 

diff --git a/test/spec/easyzoom.js b/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();