借助Uranium.io的缩放交互功能，放大/缩小按钮需要什么来查找要放大/缩小的图像？

我有以下结构的DOM元素：借助Uranium.io的缩放交互功能，放大/缩小按钮需要什么来查找要放大/缩小的图像？

<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>

当我点击图像本身（一个用于当前显示的幻灯片）/缩小工程变焦。然而，当我点击我看到一个错误在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 
});

我已表明如该null类型错误的代码中引发上述的+按钮跨度。我跟踪它，发现setActive正在发送一个undefined img参数。

我怀疑我没有得到铀缩放交互的数据属性正确，但为什么+按钮会抛出这个错误？

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

来源

2014-07-23 Diwant Vaidya

你好萨加尔。目前我正在逐步使用断点并观察Firebug中的表达式。我正在看$ $ container.find（“[data-ur-state ='active'] *”），它似乎没有找到任何图像，所以过滤器返回一个空列表。 –

对于那些谁发现自己在我的位置上，我发现发生了什么事和我避让中如何解决它自己。

如果滑块中有多个图像，铀放大期望它们排列在铀传送带上。旋转木马DOM结构意味着包含每个图像的元素将具有data-ur-state='active'，因此选择器$container.find("[data-ur-state='active'] *")将在当前显示的滑动元素中找到图像。

但是，如果您不使用传送带，那么您可能会看到我看到的TypeError null。要解决这个问题，你不使用铀传送带，有一种方法可以改变你的核心铀文件，以捕捉适合你的项目的选择器。但是，您正在更换核心文件，请小心处理！

的文件来改变被命名为assets/javascript/.remote/http__colon____slash____slash__downloads.moovweb.com__slash__uranium__slash__1.0.167__slash__uranium-pretty.js

在行608（代码块看起来像下面的一个，如果你有铀的一个类似的版本）修改的选择。

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-23 19:34:27

借助Uranium.io的缩放交互功能，放大/缩小按钮需要什么来查找要放大/缩小的图像？

回答

相关问题