adcoding Posted November 10, 2020 Share Posted November 10, 2020 I used the W3 Tutorial to make an image Magnifying Glasshttps://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 comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now