Jquery zoom, zooms only one image on hover

Question

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

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.

Cue · Accepted Answer

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;
}

Jquery zoom, zooms only one image on hover

Answers (2)

Related Questions