Responsive feature does not destroy zoomContainers

[teej043]

The responsive feature works but it has some serious problem not removing previous zoom containers right after every window resize:

Here's my code:

The site I'm developing is on a responsive layout with elements being fluid (always width 100% of its container) such as the image and the zoom window container so we can expect that they always change sizes.

Maybe it should be attached to an event after on resize so that it won't create containers every step, but still I think there should be something that handles this.

[igorlino]

nice animation showing the issue :+1:

[arbel]

any progress with this?

[devjoseluis]

Use $('.zoomContainer').remove(); before this line.

[igorlino]

mmm, i'm wondering, maybe, we should add an optional option to destroy the container on resize. So, if responsive=true destroyContainerOnResize=true then .remove()

[Hozey]

The original ElevateZoom http://www.elevateweb.co.uk/image-zoom/examples has an inner zoom feature,

`$("#zoom_05").elevateZoom({ zoomType : "inner", cursor: "crosshair" });

It seems to me the idel answer to dealing with large and small screens would be to have the zoom feature change in inner on small screens. But I have no clue how to do that. Any help would be appreciated.

[Hozey]

How can the position be changed to inner when viewed on small screens?

[bircha]

This is something I copy-pasted together to deal with the issue:

// https://github.com/igorlino/elevatezoom-plus
  function initZoom()
  {
    $('.product').ezPlus({ 
      zoomType: 'inner', 
      cursor: 'crosshair',
      zoomWindowFadeIn: 500, 
      zoomWindowFadeOut: 500, 
      lensFadeIn: 500, 
      lensFadeOut: 500
    });
  }

  // http://stackoverflow.com/a/12692647
  $(window).resize(function() {
    if(this.resizeTO) clearTimeout(this.resizeTO);
    this.resizeTO = setTimeout(function() {
      $(this).trigger('resizeEnd');
    }, 250);
  });

  // ezPlus zoom container needs to be resized after window resize
  $(window).bind('resizeEnd', function() {
    $('.zoomContainer').remove();
    initZoom();
  });

  initZoom();

[MikeVirtual]

Adding the following after line 316 in v 1.2.3 fixes it.

$('.' + self.options.container).remove();

There is a similar bug if you set imageCrossfade: true, where the original image gets repeatedly wrapped in zoomWrapper divs on resize.

adding the following code after line 163 in v. 1.2.3 cures it.

if(self.$elem.parent().hasClass('zoomWrapper')){
    self.$elem.unwrap();
}