Uranium.io의 줌 인터랙션으로 확대/축소 버튼을 사용하여 확대/축소 할 이미지를 찾는 데 필요한 것은 무엇입니까?

Question

나는 다음과 같은 구조의 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: $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 
}); 

말한다 나는 자바 스크립트 콘솔에서 오류가 표시 이미지에 + 버튼 범위를 클릭합니다. 나는 그것을 추적하고 setActive가 undefined img 매개 변수를 보내고 있음을 발견했습니다.

우라늄 확대/축소 상호 작용의 데이터 속성이 정확하지 않다고 생각하지만 + 버튼이이 오류를 발생시키는 이유는 무엇입니까?

올바른 동작은 여기에 예제와 같다 : http://uranium.io/interactions/zoom.html 내 위치에 자신을 발견하는 사람들을 위해

Answer 1

, 나는 무슨 일이 일어 났는지 발견하고 자신을 위해 그것을 해결하는 방법에 저를 흘려 주기도한다.

슬라이더에 여러 이미지가있는 경우 우라늄 줌은 이미지가 우라늄 회전식 컨베이어로 배열 될 것으로 예상합니다. 캐 러셀 DOM 구조는 각 이미지를 포함하는 요소가 data-ur-state='active'이므로 선택자 $container.find("[data-ur-state='active'] *")은 현재 표시된 슬라이드 요소에서 이미지를 찾습니다.

그러나 회전식 메뉴를 사용하지 않는 경우 null TypeError가 표시 될 수 있습니다. 우라늄 회전식 컨베이어를 사용하지 않는 상황에서이 문제를 해결하려면 핵심 우라늄 파일을 변경하여 프로젝트에 적합한 선택기를 잡는 방법이 있습니다. 그러나 핵심 파일을 변경하려고하므로 조심해서 다루십시오! 변경

파일은 라인 (608) (당신은 우라늄의 유사한 버전이있는 경우 코드 블록은 아래와 같다)의 선택을 수정

assets/javascript/.remote/http__colon____slash____slash__downloads.moovweb.com__slash__uranium__slash__1.0.167__slash__uranium-pretty.js 지정됩니다. 이 새로운 assets/javascript/main.js를 생성하고 줌 버튼이 새로운 코드를 사용하여 작동 할 수 있도록

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 서버를 다시 시작

!