2016-11-11 1 views
0

모바일에서 약간 작아 보이는 시트 맵이 있으며 현재 모바일에서 확대하려면 핀치 옵션이 필요합니다.Zoomooz를 사용하여 특정 div로 확대하기

Zoomooz에 소개되었지만 중첩 된 div에서 작업하는 데 어려움을 겪고 있습니다. 더 자세하게 좌석 배치도를 보는 데 필요한 특정 영역을 확대 할 수 있습니까?

https://plnkr.co/edit/9VL3mDS34bKAe7qRxHYE?p=preview

<div id="theatre"> 
 
<div class="container"> 
 
    <div id="bmessage">Select the seats that you need.</div> 
 
    <div id="seats" class="zoomTarget"> 
 
    <div class="s1 std grey" si="0" title="A16" style="top:16%; left:8.5%;"></div> 
 
    <div class="s1 std grey" si="1" title="A15" style="top:16%; left:12%;"></div> 
 
    <div class="s1 std grey" si="2" title="A14" style="top:16%; left:15.5%;"></div> 
 
    <div class="s1 std grey" si="3" title="A13" style="top:16%; left:19%;"></div> 
 
    </div> 
 
</div>

답변

0

는 그냥 Index.html의 CDN 링크를 변경하고 줌 기능을 확인이 plunker

HTML을 적용하려는 각 divZoomTarget을 적용

<!DOCTYPE html> 
<html> 

    <head> 
    <meta charset="utf-8" /> 
    <title></title> 
    <link rel="stylesheet" href="style.css" /> 
    <script data-require="jquery" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script> 
    <script src="script.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/zoomooz/1.1.6/jquery.zoomooz.min.js"></script> 
    </head> 

    <body> 
    <div id="theatre" class="zoomViewport"> 
    <div class="zoomContainer container"> 
     <div id="bmessage">Select the seats that you need.</div> 
     <div id="seats"> 
     <div data-closeclick="true" class="zoomTarget s1 std grey" si="0" title="A16" style="top:16%; left:8.5%;"></div>  
     <div data-closeclick="true" class="zoomTarget s1 std grey" si="1" title="A15" style="top:16%; left:12%;"></div> 
     <div data-closeclick="true" class="zoomTarget s1 std grey" si="2" title="A14" style="top:16%; left:15.5%;"></div>  
     <div data-closeclick="true" class="zoomTarget s1 std grey" si="3" title="A13" style="20px;top:16%; left:19%;"></div> 
    </div> 
</div> 
</div> 
    </body> 

</html>