jquery.ez-plus resize the zoom frame

Question

jquery.ez-plus resize the zoom frame

Navigation

#1 by (1 votes)

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 size of the screen and consequently the size of the image, the zoom box should also reduce and not reduce.

Can be seen in

link

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

jquery

asked by anonymous 28.05.2018 / 22:28

1 answer

Select all JCheckboxes when clicking button Using java.lang.reflect.Parameter in android applications

score 1 · Accepted Answer

Start the plugin inside an event load and resize . In%% of it will start when the page loads, and load will update the plugin when resizing the screen by 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><scriptsrc="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>