Масштабирование в конкретный div с Zoomooz

У меня есть карта сиденья, которая выглядит немного малой на мобильном телефоне и в настоящее время требует возможности щепотки для увеличения на мобильном устройстве.Масштабирование в конкретный div с Zoomooz

Я был представлен 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>

источник

2016-11-11 me9867

Просто изменить ссылку КДС в Index.html и применять ZoomTarget к каждому div, на которой вы хотите применить функцией масштабирования Проверьте это 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>

источник

2016-11-11 12:35:18 RonyLoud

Масштабирование в конкретный div с Zoomooz

ответ

Смежные вопросы