藉助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的縮放交互功能，放大/縮小按鈕需要什麼來查找要放大/縮小的圖像？

回答

相關問題