Jump to content


  • Posts

  • Joined

  • Last visited

adcoding's Achievements


Newbie (1/7)



  1. 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>
  • Create New...