Zooming into specific div with Zoomooz
Question
I have a seatmap that looks a bit small on mobile and currently requires a pinch option to zoom into on mobile.
i was introduced to Zoomooz which looks great, but struggling to get it working on nested divs. Is it possible to zoom into the specific area you require to view a seatplan in more detail?
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>
1 answers
solution1
0 2016-11-11 12:35:18
Just change the cdn link of the Index.html and apply ZoomTarget to each div on which you want to apply zoom functionality Check this plunker
HTML:
<!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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.