javascript - Jquery zoom, zooms only one image on hover

Im trying to make a product page with gallery (clickable small thumbnails on the side) which opens a large image on the right side. Jquery zoom only displays the zoom on the first image, when the other images are displayed the zoom is still on the first image.

Here is my code: HTML

<section class="product-page">
        <div class="thumbnails">
            <div class="thumb"><a href="#"><img src="img/nike/shoes/Air-force1/Thumbnails/thumb-air-force-right-side.png" alt="thumb-air-force-right-side" onclick="right()"></a></div>
            <div class="thumb"><a href="#"><img src="img/nike/shoes/Air-force1/Thumbnails/thumb-air-force-left-side.png" alt="thumb-air-force-left-side" onclick="left()"></a></div>
            <div class="thumb"><a href="#"><img src="img/nike/shoes/Air-force1/Thumbnails/thumb-air-force-bottom-side.png" alt="thumb-air-force-bottom-side" onclick="bottom()"></a></div>
            <div class="thumb"><a href="#"><img src="img/nike/shoes/Air-force1/Thumbnails/thumb-air-force-pair-side.png" alt="thumb-air-force-pair-side" onclick="pairSide()"></a></div>
            <div class="thumb"><a href="#"><img src="img/nike/shoes/Air-force1/Thumbnails/thumb-air-force-pair-top.png" alt="thumb-air-force-pair-top" onclick="pairTop()"></a></div>
        </div>
        <div class="img-display">
            <span class='zoom' id='shoe1'>
                <img id="img-area" src="img/nike/shoes/Air-force1/air-force-right-side.png" alt="air-force-right-side" width="320" height="320">
            </span>
            <span class='zoom1' id='shoe1'>
                <img class="hidden" id="img-area" src="img/nike/shoes/Air-force1/air-force-left-side.png" alt="air-force-left-side" width="320" height="320">
            </span>
            <span class='zoom' id='shoe3'>
                <img class="hidden" id="img-area" src="img/nike/shoes/Air-force1/air-force-bottom-side.png" alt="air-force-bottom-side">
            </span>
            <span class='zoom' id='shoe4'>
                <img class="hidden" id="img-area" src="img/nike/shoes/Air-force1/air-force-pair-side.png" alt="air-force-pair-side">
            </span>
            <span class='zoom' id='shoe5'>
                <img class="hidden" id="img-area" src="img/nike/shoes/Air-force1/air-force-pair-top.png" alt="air-force-pair-top">
            </span>
        </div>
    </section>

JS for image changing while clicking on the thumbnail images

    var img = document.getElementById("img-area");
        function right(){
            img.src='img/nike/shoes/Air-force1/air-force-right-side.png';
        }
        function left(){
            img.src='img/nike/shoes/Air-force1/air-force-left-side.png';
        }
        function bottom(){
            img.src='img/nike/shoes/Air-force1/air-force-bottom-side.png';
        }
        function pairSide(){
            img.src='img/nike/shoes/Air-force1/air-force-pair-side.png';
        }
        function pairTop(){
            img.src='img/nike/shoes/Air-force1/air-force-pair-top.png';
        }

And the Jquery code

$(document).ready(function(){
    $('#shoe1').zoom();
    $('#shoe2').zoom();
    $('#shoe3').zoom();
    $('#shoe4').zoom();
    $('#shoe5').zoom();
});

How to make the changed image zoom in on hover? Thanks in advance.

Here is my code: HTML

<section class="product-page">
        <div class="thumbnails">
            <div class="thumb"><a href="#"><img src="img/nike/shoes/Air-force1/Thumbnails/thumb-air-force-right-side.png" alt="thumb-air-force-right-side" onclick="right()"></a></div>
            <div class="thumb"><a href="#"><img src="img/nike/shoes/Air-force1/Thumbnails/thumb-air-force-left-side.png" alt="thumb-air-force-left-side" onclick="left()"></a></div>
            <div class="thumb"><a href="#"><img src="img/nike/shoes/Air-force1/Thumbnails/thumb-air-force-bottom-side.png" alt="thumb-air-force-bottom-side" onclick="bottom()"></a></div>
            <div class="thumb"><a href="#"><img src="img/nike/shoes/Air-force1/Thumbnails/thumb-air-force-pair-side.png" alt="thumb-air-force-pair-side" onclick="pairSide()"></a></div>
            <div class="thumb"><a href="#"><img src="img/nike/shoes/Air-force1/Thumbnails/thumb-air-force-pair-top.png" alt="thumb-air-force-pair-top" onclick="pairTop()"></a></div>
        </div>
        <div class="img-display">
            <span class='zoom' id='shoe1'>
                <img id="img-area" src="img/nike/shoes/Air-force1/air-force-right-side.png" alt="air-force-right-side" width="320" height="320">
            </span>
            <span class='zoom1' id='shoe1'>
                <img class="hidden" id="img-area" src="img/nike/shoes/Air-force1/air-force-left-side.png" alt="air-force-left-side" width="320" height="320">
            </span>
            <span class='zoom' id='shoe3'>
                <img class="hidden" id="img-area" src="img/nike/shoes/Air-force1/air-force-bottom-side.png" alt="air-force-bottom-side">
            </span>
            <span class='zoom' id='shoe4'>
                <img class="hidden" id="img-area" src="img/nike/shoes/Air-force1/air-force-pair-side.png" alt="air-force-pair-side">
            </span>
            <span class='zoom' id='shoe5'>
                <img class="hidden" id="img-area" src="img/nike/shoes/Air-force1/air-force-pair-top.png" alt="air-force-pair-top">
            </span>
        </div>
    </section>

JS for image changing while clicking on the thumbnail images

    var img = document.getElementById("img-area");
        function right(){
            img.src='img/nike/shoes/Air-force1/air-force-right-side.png';
        }
        function left(){
            img.src='img/nike/shoes/Air-force1/air-force-left-side.png';
        }
        function bottom(){
            img.src='img/nike/shoes/Air-force1/air-force-bottom-side.png';
        }
        function pairSide(){
            img.src='img/nike/shoes/Air-force1/air-force-pair-side.png';
        }
        function pairTop(){
            img.src='img/nike/shoes/Air-force1/air-force-pair-top.png';
        }

And the Jquery code

$(document).ready(function(){
    $('#shoe1').zoom();
    $('#shoe2').zoom();
    $('#shoe3').zoom();
    $('#shoe4').zoom();
    $('#shoe5').zoom();
});

How to make the changed image zoom in on hover? Thanks in advance.

Share Improve this question asked Nov 21, 2019 at 0:47 perocvrc 271 silver badge7 bronze badges

you have multiple id="img-area"'s – Lawrence Cherone Commented Nov 21, 2019 at 0:54
at a glance it looks like you're making this way harder than it needs to be. If you have jquery available, why are you using vanilla JS? Just to learn? – Stan Alachniewicz Commented Nov 21, 2019 at 1:18

Add a ment |

2 Answers 2

Sorted by: Reset to default 6

Something as simple as this could be achievable without causing repetitive strain injury.

For obvious reasons I haven't considered image preloading, etc, but this is something I hope you can take inspiration from.

Your img-display should be treated as a canvas. Bind a single event handler to links wrapped around thumbs who's href attribute contains the larger image you want to load in the canvas area. This event handler simply rotates your thumbnails, but uses the larger image and passes that to both the canvas image and the jQuery zoom plugin API whilst toggling active states of thumbs (as an aesthetic suggestion).

Why href? As an example, screen readers still need to be able to follow these links. I'm thinking accessibility ftw.

Images courtesy of JD Sports.

$(function() {
  $('.zoom').zoom();
  $('.thumb').on('click', 'a', function(e) {
    e.preventDefault();
    var thumb = $(e.delegateTarget);
    if (!thumb.hasClass('active')) {
      thumb.addClass('active').siblings().removeClass('active');
      $('.zoom')
        .zoom({
          url: this.href
        })
        .find('img').attr('src', this.href);
    }
  });
});

img {
  display: block;
  height: auto;
  max-width: 100%;
}

.product-page {
  display: flex;
}

.img-display {
  flex-grow: 1;
  max-width: 372px;
}

.thumb {
  opacity: .7;
  margin: 0 .25rem .25rem 0;
  width: 120px;
  transition: opacity .25s ease-out;
}

.thumb:hover,
.thumb.active {
  opacity: 1;
}

.zoom {
  display: inline-block;
}

<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/jquery-zoom/1.7.21/jquery.zoom.min.js"></script>

<section class="product-page">
  <div class="thumbnails">
    <div class="thumb active">
      <a href="https://i8.amplience/i/jpl/jd_334285_a?qlt=92&w=750&h=531&v=1">
        <img src="https://i8.amplience/i/jpl/jd_334285_a?qlt=92&w=750&h=531&v=1" alt="thumb-air-force-right-side">
      </a>
    </div>
    <div class="thumb">
      <a href="https://i8.amplience/i/jpl/jd_334285_b?qlt=92&w=950&h=673&v=1">
        <img src="https://i8.amplience/i/jpl/jd_334285_b?qlt=92&w=950&h=673&v=1" alt="thumb-air-force-left-side">
      </a>
    </div>
    <div class="thumb">
      <a href="https://i8.amplience/i/jpl/jd_334285_e?qlt=92&w=950&h=673&v=1">
        <img src="https://i8.amplience/i/jpl/jd_334285_e?qlt=92&w=950&h=673&v=1" alt="thumb-air-force-bottom-side">
      </a>
    </div>
  </div>
  <div class="img-display">
    <span class="zoom">
      <img src="https://i8.amplience/i/jpl/jd_334285_a?qlt=92&w=750&h=531&v=1" alt="">
    </span>
  </div>
</section>

@perocvrc

Please try below code it works perfectly as per your requirement.

<!DOCTYPE html>
<html>
<head>
<style>
img {
  display: block;
  height: auto;
  max-width: 100%;
}

.main-view-page {
  display: flex;
}

.full-screen-img {
  flex-grow: 1;
  max-width: 500px;
}

.sideimg {
  opacity: .7;
  margin: 0 .1rem .1rem 0;
  width: 120px;
  transition: opacity .25s ease-out;
}

.sideimg:hover,
.sideimg.active {
  opacity: 1;
  width:135px;
}

.zoom-in {
  display: inline-block;
}
</style>
<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/jquery-zoom/1.7.21/jquery.zoom.min.js"></script>

<script> 
$(function() {
  $('.zoom-in').zoom();
  $('.sideimg').on('click', 'a', function(e) {
    e.preventDefault();
    var thumb = $(e.delegateTarget);
    if (!thumb.hasClass('active')) {
      thumb.addClass('active').siblings().removeClass('active');
      $('.zoom-in')
        .zoom({
          url: this.href
        })
        .find('img').attr('src', this.href);
    }
  });
});
</script> 
</head>
<body>
<section class="main-view-page">
  <div class="thumbnails">
    <div class="sideimg">
      <a href="https://st2.depositphotos./2038977/8502/i/950/depositphotos_85027142-stock-photo-goats-grazing-on-the-alpine.jpg">
        <img src="https://st2.depositphotos./2038977/8502/i/950/depositphotos_85027142-stock-photo-goats-grazing-on-the-alpine.jpg" alt="thumb-air-force-right-side">
      </a>
    </div>
    <div class="sideimg active">
      <a href="https://wallpaperplay./walls/full/b/1/c/162815.jpg">
        <img src="https://wallpaperplay./walls/full/b/1/c/162815.jpg" alt="thumb-air-force-left-side">
      </a>
    </div>
    <div class="sideimg">
      <a href="https://jooinn./images/cabin-with-beautiful-view.jpg">
        <img src="https://jooinn./images/cabin-with-beautiful-view.jpg" alt="thumb-air-force-bottom-side">
      </a>
    </div>
    <div class="sideimg">
      <a href="https://www.principlesinsight.co.uk/wp-content/uploads/2019/07/clouds-conifer-daylight-371589.jpg">
        <img src="https://www.principlesinsight.co.uk/wp-content/uploads/2019/07/clouds-conifer-daylight-371589.jpg" alt="thumb-air-force-bottom-side">
      </a>
    </div>
  </div>
  <div class="full-screen-img">
    <span class="zoom-in">
      <img src="https://wallpaperplay./walls/full/b/1/c/162815.jpg" alt="main-view-images">
    </span>
  </div>
</section>

</body>
</html>

I hope above code will be useful for you. Thank you.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Jquery zoom, zooms only one image on hover - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)