javascript - Elevate Zoom Reinitialize issue on Window Resize -
i trying implement elevate zoom , got slight problem when window resize. working perfect on screen loaded. when window resize take height , width of image remain same when loaded.
html code
<div class="flexembed" style="width:90%;position: relative;text-align: center;"> <img id="zoom_product" class="zoom_img" src="uploads/products/img001.jpg" style="position: relative;left: 0;top: 0;right: 0;bottom: 0;margin: auto;max-width: 100%;max-height: 100%;" data-zoom-image="uploads/products/img001.jpg"/> </div>
jquery code
$(window).on('resize', function(){ var imgsrc = $('#zoom_product').attr('src'); var imgzoom = $('#zoom_product').data('zoom-image'); var zoomimage = $('#zoom_product'); $('.zoomcontainer').remove(); zoomimage.removedata('elevatezoom'); zoomimage.attr('src', imgsrc); zoomimage.data('zoom-image', imgzoom); zoomimage.elevatezoom({ zoomtype: "inner", cursor: "crosshair" }); } $(document).ready(function(){ $('#zoom_product').elevatezoom({ zoomtype: "inner", cursor: "crosshair" }); });
same issue
ReplyDelete