Как панорамировать/масштабировать изображение и наложение одновременно?

Question

Я использую jquery.panzoom для панорамирования и масштабирования изображения в ответ на мыши или события касания. Это прекрасно работает, но теперь я хотел бы увеличить изображение вместе с наложением (либо SVG-файл, либо другое изображение). Оверлей и изображение имеют одинаковый размер, я просто хочу, чтобы они вели себя как одно изображение относительно панорамирования и масштабирования.

Я попытался положить их обоих в DIV, например:

<div id="mydiv"> 
    <img src="image.jpg" style="position: fixed; top: 0; left: 0; width: 500; height: 500;"> 
    <img src="overlay.svg" style="position: fixed; top: 0; left: 0; width: 500; height: 500;"> 
</div> 

<script> 
    $("#mydiv").panzoom(); 
</script> 

Компоновка испортится, когда я делаю это.

Как можно панорамировать/масштабировать изображение и наложение (или несколько изображений) одновременно?

(я хотел бы продолжать использовать jquery.panzoom так, что, кажется, работает очень хорошо на моих целевых платформах, но если есть другая библиотека, которая делает то же самое, что также может работать)

Answer 1

По их documentation , это должно работать:

(function() { 
    var $section = $('#collectionId'); 
    $section.find('.panzoom').panzoom({ 
    $set: $section.find('.parent > div') 
    }); 
})(); 

<section id="collectionId"> 
    <div class="parent"> 
    <div class="panzoom"> 
     <img src="image.jpg"> 
    </div> 
    <div> 
     <img src="overlay.svg"> 
    </div> 
    <div> 
     <img src="anotherOverlay.svg"> 
    </div> 
    </div> 
</section>