Jump to content

Create an Image Magnifier Glass


Recommended Posts

I used the W3 Tutorial to make an image Magnifying Glass
https://www.w3schools.com/howto/howto_js_image_magnifier_glass.asp

I use Bootstrap and I created a carousel.

The Magnifying effect works perfectly on the first slide.

When I change the slide I still see my cursor and the zoom option changes: zoom in and show me a different part of the photo and not the exact point where my cursor is.

This is the code of the carousel (for the moment only the first 2 slides are set with the magnifying effect)

<div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleFade" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleFade" data-slide-to="1"></li>
<li data-target="#carouselExampleFade" data-slide-to="2"></li>
<li data-target="#carouselExampleFade" data-slide-to="3"></li>
<li data-target="#carouselExampleFade" data-slide-to="4"></li>
<li data-target="#carouselExampleFade" data-slide-to="5"></li>
<li data-target="#carouselExampleFade" data-slide-to="6"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<div class="img-magnifier-container">
<img id="myimage" src="carousel/01.png" class="d-block w-100" alt="...">
</div>
</div>

<div class="carousel-item ">
<div class="img-magnifier-container">
<img id="myimage2" src="carousel/02.png" class="d-block w-100" alt="...">
</div>
</div>

<div class="carousel-item">
<img src="carousel/03.png" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="carousel/04.png" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="carousel/05.png" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="carousel/06.png" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="carousel/07.png" class="d-block w-100" alt="...">
</div>
</div>

</div>

 

<script>
	magnify("myimage", 3);
</script>

<script>
	magnify("myimage2", 3);
</script>
 
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...