[英]With Uranium.io's zoom interaction, what is required for the zoom in/out buttons to find the image to zoom in/out from?
我具有以下結構的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>
當我單擊圖像本身(當前顯示的幻燈片之一)時,放大/縮小有效。 但是,當我單擊圖像上的+
按鈕范圍時,我在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
TypeError的地方。 我跟蹤了它,發現setActive正在發送一個undefined
img參數。
我懷疑我尚未獲得Uranium Zoom交互的數據屬性正確,但是為什么+
按鈕會引發此錯誤?
正確的行為類似於此處的示例: http : //uranium.io/interactions/zoom.html
對於那些發現自己處於我位置的人,我發現了正在發生的事情,這使我了解如何為自己解決問題。
如果滑塊中有多個圖像,則Uranium縮放期望將它們排列在Uranium傳送帶中。 輪播DOM結構意味着包含每個圖像的元素將具有data-ur-state='active'
,因此選擇器$container.find("[data-ur-state='active'] *")
將找到該圖像在當前顯示的幻燈片元素中。
但是,如果您不使用輪播,則可能會看到我看到的null
TypeError。 要在不使用Uranium輪播的情況下解決此問題,有一種方法可以更改您的核心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
並且您的縮放按鈕將使用新代碼並開始工作!
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.