jquery.ez-plus resize zoom frame

Asked

Viewed 58 times

0

I have the following code

<div class='fotosPlanos'>
  <img 
      class='elevate-image' 
      src='_img/_fotos/corsa.jpg'
      data-zoom-image='_img/_fotos/corsa.jpg'
  />
</div>

<script> 
    $('.elevate-image').ezPlus({
    zoomType: 'inner',
    cursor: 'crosshair'     
  });
</script>

It creates a zoom box on the container image.

But the problem is that as we reduce the screen size and consequently the image size, the zoom box should also reduce and not reduce.

Can be seen in

http://funerariasaopedro.net.br/novo/showroom.php

How to link the zoom box size to the image size with the ez-plu plugin?

jquery

  • Yes, it seems that there is no way. Because the plugin is jQuery and does not run like css at runtime. Therefore, when reducing the dimensions of the browser and consequently the image, the plugin does not follow and after giving a refresh there then it takes the resolution adjusts the zoom to the image box.

1 answer

1


Launch the plugin within an event load and resize. In the load it will start when the page is loaded and on resize will update the plugin when there is resizing of the screen, adjusting the dimensions of the zoom window.

Example:

$(window).on("load resize", function(){
   $('.elevate-image').ezPlus({
       zoomType: 'inner',
       cursor: 'crosshair'
   });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://dvdteste.websiteseguro.com/jquery.ez-plus.js"></script>
<div class='fotosPlanos' style="width: 100%; max-width: 600px;">
  <img style="width: 100%;" 
      class='elevate-image' 
      src='https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg'
      data-zoom-image='http://dvdteste.hospedagemdesites.ws/zoom2.jpg'
  />
</div>

  • Perfect! thank you very much: it was just that!

Browser other questions tagged jquery

You are not signed in. Login or sign up in order to post.