Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

is possible initialize dynamically? #24

Closed
KsCorrales opened this issue Oct 18, 2017 · 3 comments
Closed

is possible initialize dynamically? #24

KsCorrales opened this issue Oct 18, 2017 · 3 comments

Comments

@KsCorrales
Copy link

I generate images dynamically because I am doing a SPA but the zoom does not work.

@francoischalifour
Copy link
Owner

You need to attach the zoom to each image added to the DOM. The lib is not observing the DOM for changes.

If I miss your point, please explain further.

@KsCorrales
Copy link
Author

okay i resolve the problem, i use jquery "live on"

$('body').on('DOMNodeInserted', '[data-action="zoom"]', function () {
    mediumZoom('[data-action="zoom"]');
});

but now i have a problem, the plugin create an image at the bottom of the code ok good, but when i out zoom and i open zoom again, create 2 images in the dom and to close y need 2 clicks out of image, when close i click again and create 3 images elements and so on :S

@francoischalifour
Copy link
Owner

That's because you're applying the zoom multiples times on the same images. You should check beforehand if the image has the medium-zoom-image class.

mediumZoom(
  Array.from(document.querySelectorAll('[data-action="zoom"]'))
    .filter(img => !img.classList.contains('medium-zoom-image'));
);

A better way to do it would be to use the event target of the DOMNodeInserted callback:

document.body.addEventListener('DOMNodeInserted', function (event) {
  mediumZoom(event.target);
});

This is plain JavaScript (see reference), it should work with jQuery as well.

Hope it helps!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants