0

我有以下结构的DOM元素：

<div class="flexslider" data-ur-set="zoom">
    <div data-ur-zoom-component="loading" data-ur-state="disabled">Loading…&lt;/div>
    <div data-ur-zoom-component="button" data-ur-state="disabled">
        <span>+</span><span>−&lt;/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>

当我单击图像本身（当前显示的幻灯片的图像）时，放大/缩小工作。但是，当我单击+图像上的按钮 span 时，我在 Javascript 控制台中看到一个错误，上面写着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
});

我已经在上面的代码中指出了nullTypeError 的抛出位置。我跟踪它，发现 setActive 正在发送一个undefinedimg 参数。

我怀疑我没有正确获取 Uranium Zoom 交互的数据属性，但为什么+按钮会抛出此错误？

正确的行为就像这里的例子：http: //uranium.io/interactions/zoom.html

4

1 回答 1

1

对于那些发现自己处于我的位置的人，我发现了正在发生的事情，这为我提供了如何为自己解决问题的线索。

如果滑块中有多个图像，Uranium zoom 期望它们被排列在 Uranium carousel 中。carousel DOM 结构意味着包含每个图像的元素将具有data-ur-state='active'，因此选择器$container.find("[data-ur-state='active'] *")将在当前显示的幻灯片元素中找到图像。

但是，如果您没有使用 carousel，那么您可能会看到null我看到的 TypeError。要在不使用 Uranium carousel 的情况下解决此问题，有一种方法可以更改核心 Uranium 文件以捕获适合您项目的选择器。但是，您正在更改核心文件，因此请小心处理！

要更改的文件名为assets/javascript/.remote/http__colon____slash____slash__downloads.moovweb.com__slash__uranium__slash__1.0.167__slash__uranium-pretty.js

修改第 608 行的选择器（如果您有类似的 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     });

重新启动您的 moov 服务器，以便它生成一个新的assets/javascript/main.js，并且您的缩放按钮将使用新代码并工作！

于 2014-07-23T19:34:27.377 回答