Zoomed image not closing in browsers not supporting srcset (IE11 and Edge 13-15)

[jaxtheking]

I know (and understand) this issue won't get much attention, but I'd still like to file a report for those poor souls who still have to try supporting old browsers like IE11. Apart from the fact this library is awesome, I also chose it because it states support for IE.

In browsers not supporting the srcset attribute, after clicking on an image to open it, the cloned image does not animate at all; furthermore, one can't close the modal which has become stuck. This is due to the onload event not firing in browsers not supporting srcset, therefore the _animate() function is never called and the opened event never fired.

For users experiencing the same issue, this can be easily fixed by removing the srcset attribute upon clicking the image:

var imageZoom = mediumZoom(my_images);

imageZoom.on('open', (evt) => {
    // use your methods below to detect browsers not supporting srcset
    if (browser.is('msie') || browser.supports('respImages')) {
        var img = this.imageZoom.getZoomedImage();
        img.removeAttribute('srcset');
    }
});

I guess a better way would be adding a responsive image polyfill to the project, but I thought it'd be an overkill in my case.

Last possible solution would be for the maintainer to add a basic check for responsive images support:

function respImagesSupport() {
  var testImage = document.createElement('img');
  return ('sizes' in testImage) && ('srcset' in testImage);
}

then modify the promise returned by the open() function to something like this:

...
if (active.original.getAttribute('data-zoom-src') && respImagesSupport()) {
  ...
} else if (active.original.hasAttribute('srcset') && respImagesSupport()) {
  ...
} else {
  _animate();
}
...

so that _animate() finally gets called in these old browsers too.

I hope this helps anyone. Luca