Я пытаюсь реализовать щепотку для увеличения с помощью hammer.js
Здесь мой HTML -
<script src="//cdnjs.cloudflare.com/ajax/libs/hammer.js/1.0.5/hammer.min.js"></script>
<div id="pinchzoom">
<div>
<img id="rect" src="http://blog.gettyimages.com/wp-content/uploads/2013/01/Siberian-Tiger-Running-Through-Snow-Tom-Brakefield-Getty-Images-200353826-001.jpg" width="2835" height="4289" ondragstart="return false" alt="" />
</div>
</div>
Здесь мой SCRIPT
var hammertime = Hammer(document.getElementById('pinchzoom'), {
transform_always_block: true,
transform_min_scale: 1,
drag_block_horizontal: false,
drag_block_vertical: false,
drag_min_distance: 0
});
var rect = document.getElementById('rect');
var posX=0, posY=0,
scale=1, last_scale,
rotation= 1, last_rotation;
hammertime.on('touch drag transform', function(ev) {
switch(ev.type) {
case 'touch':
last_scale = scale;
last_rotation = rotation;
break;
case 'drag':
posX = ev.gesture.deltaX;
posY = ev.gesture.deltaY;
break;
case 'transform':
rotation = last_rotation + ev.gesture.rotation;
scale = Math.max(1, Math.min(last_scale * ev.gesture.scale, 10));
break;
}
// transform!
var transform =
//"translate3d("+posX+"px,"+posY+"px, 0) " +
"scale3d("+scale+","+scale+", 0) ";
rect.style.transform = transform;
rect.style.oTransform = transform;
rect.style.msTransform = transform;
rect.style.mozTransform = transform;
rect.style.webkitTransform = transform;
});
Он отлично работает, но я не могу прокрутить изображение. На uncommenting transform3d он работает, но изображение теряет свое положение при перетаскивании. Я не могу использовать jQuery.