Javascript 含铀.io';s缩放交互,放大/缩小按钮需要什么来查找要放大/缩小的图像?

Javascript 含铀.io';s缩放交互,放大/缩小按钮需要什么来查找要放大/缩小的图像?,javascript,moovweb,Javascript,Moovweb,我有以下结构中的DOM元素: <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&g

我有以下结构中的DOM元素:

<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>
我已经指出了上面代码中抛出的
null
TypeError的位置。我跟踪了它,发现setActive正在发送一个
未定义的
img参数

我怀疑我没有正确获取铀缩放交互的数据属性,但为什么
+
按钮会抛出此错误


正确的行为就像这里的例子一样:

对于那些发现自己处于我的位置的人,我发现了发生了什么,这让我明白了如何为自己解决问题

如果滑块中有多个图像,铀缩放希望它们排列在铀转盘中。carousel DOM结构意味着包含每个图像的元素将具有
data-ur-state='active'
,因此选择器
$container.find(“[data-ur-state='active']*”)将在当前显示的幻灯片元素中查找图像

但是,如果您没有使用旋转木马,那么您可能会看到我看到的
null
TypeError。要在不使用铀转盘的情况下修复此问题,有一种方法可以更改核心铀文件,以捕获适合项目的选择器。但是,您正在更改核心文件,因此请小心处理

要更改的文件名为
assets/javascript/.remote/http\uuuuu-colon\uuuuuuuuuuuuuu-slash\uuuuu-slash\uuuuu-downloads.moovweb.com\uuuuuuuu-slash\uuuu 1.0.167\uuuuuuu-slash\uuuuuuuuu-pretty.js

修改第608行的选择器(如果您有类似版本的铀,代码块看起来像下面的代码块)


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

你好,萨加尔。目前,我正在逐步使用Firebug中的断点和观察表达式。我正在查看$container.find(“[data-ur-state='active']*”),它似乎找不到任何图像,因此过滤器返回一个空列表。
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
});
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     });