With Uranium.io's zoom interaction, what is required for the zoom in/out buttons to find the image to zoom in/out from?

Question

I have DOM elements in the following structure:

<div class="flexslider" data-ur-set="zoom">
    <div data-ur-zoom-component="loading" data-ur-state="disabled">Loading…</div>
    <div data-ur-zoom-component="button" data-ur-state="disabled">
        <span>+</span><span>−</span>
    </div>
    <ul class="slides" data-ur-zoom-component="view_container">
        <li><img src="//mydomain.com/path/to/small/image" onerror="this.src=altView.src" class="thumbnail selected-thumbnail" data-ur-src="//mydomain.com/path/to/large/image" data-ur-zoom-component="img"></li>
        <li><img src="//mydomain.com/path/to/small/image" onerror="this.src=altView.src" class="thumbnail" data-ur-src="//mydomain.com/path/to/large/image" data-ur-zoom-component="img"></li>
        <li><img src="//mydomain.com/path/to/small/image" onerror="this.src=altView.src" class="thumbnail" data-ur-src="//mydomain.com/path/to/large/image" data-ur-zoom-component="img"></li>
    </ul>
</div>

When I click the image itself (the one for the currently displayed slide) the zoom in/out works. However, when I click the + button span on the image I see an error in the Javascript console that says TypeError: $img.data(...) is null

function setActive(img) {
    if ($img && img != $img[0]) {
        self.state = "enabled-out";
        var zoomImg = $img.data("urZoomImg");
        zoomImg.transform(0, 0, 1);
        zoomImg.transitionEnd();
    }
    $img = $(img);
}

// zoom in/out button, zooms in to the center of the image
$(self.button).on(touchscreen ? "touchstart.ur.zoom" : "click.ur.zoom", function() {
    if (self.img.length > 1)
        setActive($(self.img).filter($container.find("[data-ur-state='active'] *"))[0]);
    else
        setActive(self.img[0]);
    $img.data("urZoomImg").zoom(); // <---- This is the line throwing the error
});

I have indicated where that null TypeError is thrown in the code above. I traced it and found setActive is being sent an undefined img parameter.

I suspect I have not gotten the Uranium Zoom interaction's data attributes correct, but why is the + button throwing this error?

Correct behavior is like in the examples here: http://uranium.io/interactions/zoom.html

Answer 1

For those who find themselves in my position, I found out what was happening and that clued me in to how to fix it for myself.

If multiple images are in a slider, Uranium zoom expects them to be arranged in a Uranium carousel. The carousel DOM structure implies that the element containing each image will have data-ur-state='active' and so the selector $container.find("[data-ur-state='active'] *") will find the image in the currently displayed slide element.

However, if you are not using carousel then you may see the null TypeError I saw. To fix this for situations where you are not using Uranium carousel, there is a way to change your core Uranium files to catch the selector appropriate for your project. However, you are changing core files so please treat with care!

The file to change is named assets/javascript/.remote/http__colon____slash____slash__downloads.moovweb.com__slash__uranium__slash__1.0.167__slash__uranium-pretty.js

Modify the selector at line 608 (the code block looks like the one below if you have a similar version of Uranium).

605     // zoom in/out button, zooms in to the center of the image
606     $(self.button).on(touchscreen ? "touchstart.ur.zoom" : "click.ur.zoom", function() {
607       if (self.img.length > 1)
608         setActive($(self.img).filter($container.find("[data-ur-state='active'] *"))[0]);
609       else
610         setActive(self.img[0]);
611       $img.data("urZoomImg").zoom();
612     });

Restart your moov server so it generates a new assets/javascript/main.js and your zoom buttons will use the new code and work!