Zoom on multiple images

[timrombergjakobsson]

Hi thanks for a great lib. Im having some trouble when zooming on mutliple images. US: I have several thumbs in a slider when I click a thumb i changes to that picture which can be seen in a corresponding fullsize version. When I hover over it I can only zoom in on the original one. So even though I change the image to zoom on, it still keeps the original one. How can I change so it zooms in on the correct image?

[timrombergjakobsson]

I tried using the document.querySelectorAllto get all images but I just get Drift requires a DOM element as its first argument? I thought also that maybe I could use this example https://github.com/imgix/drift#driftsetzoomimageurlimageurl but not succeeding. Is there any examples of having multiple images?

[timrombergjakobsson]

Ah maybe this is not a supported lib still? Ill switch to another one that is more up to date, thanks anyhow.

[paulstraw]

Hey @timrombergjakobsson, this comment should give you what you're looking for: https://github.com/imgix/luminous/issues/14#issuecomment-189520375. Different library, but the same concept applies here. 🙂

[timrombergjakobsson]

@paulstraw ah, ok, thanks. So put the new Drift() inside a loop. I tried with the document.querySelectorAll put could only retrieve the first instance. Ill try with this, thanks!

[timrombergjakobsson]

@paulstraw I tried it but not actually working. Im thinking that I might need to reinitialize drift after I switch image?

[paulstraw]

Send through your code and I'll take a look.

[timrombergjakobsson]

The problem is that basically I have only one image in the DOM, and then it is changed with JS. So when I click a thumbnail it changes to its corresponding large image.

This is my zoom class:

class ImageZoom {
  static init() {
    let target = document.querySelectorAll('.wrapper img.fullsize'); <-- this is the image which changes with js
    if (target.length < 1) { return; }
    let container = document.querySelector('.container');

    return $(target).each(function(i, el) {
      let drift = new Drift(
        el, {
        zoomFactor: 8,
        paneContainer: container,
        inlinePane: 900,
        inlineOffsetY: -85,
        containInline: true,
        handleTouch: true,
        hoverBoundingBox: true
      }
      );
    });
  }
}

window.ImageZoom = ImageZoom;

[paulstraw]

Ah, okay! I thought you were trying to do something else. If I'm understanding correctly now, you should be calling Drift#setZoomImageURL(imageURL) each time you update the large image. For this case, you should only need one instance of Drift. Let me know if that makes sense.

[timrombergjakobsson]

Ah ok, yes thats what I was going for at first. Is it necessary to call triggerEl.setAttributealso?

[paulstraw]

For your use case, yes.

[timrombergjakobsson]

@paulstraw thanks for the help. setZoomImageURL and setAttribute did it.

[cinghaman]

@timrombergjakobsson i know its a long while but by chance you have the code you did, i am trying to do similar have a slider and want to do zoom on each image when thy come in viewport my code window.addEventListener('DOMContentLoaded', function() { (function ($) { $(document).ready(function ($) { const driftImgs = document.querySelectorAll('.zoom-it'); console.log('drifImgs', driftImgs); const pane = document.querySelector('.image__container'); driftImgs.map(img => { new Drift(img, { paneContainer: pane, onHide: null }); }); }); // document ready })(jQuery); });