Мне нужна функциональность, при которой изображение открывается в режиме наложения / всплывающего окна, а затем с помощью мыши прокручивает изображение, увеличивая и уменьшая изображение.
Я пробовал, но прокрутка мыши на наложенном / всплывающем изображении (Увеличение и уменьшение изображения) функциональность не применяется. Ниже мой код:
<html>
<head>
<title>Image Popup with Pinch to Zoom In & Out
</title>
</head>
<body>
<p>
<img class="zoomable" style='width:40%;' src="http://commondatastorage.googleapis.com/codeskulptor-assets/lathrop/nebula_blue.s2014.png" />
</p>
<script src="http://static.tumblr.com/xz44nnc/o5lkyivqw/jquery-1.3.2.min.js"></script>
<script>
$('img.zoomable').css({cursor: 'pointer'}).live('click', function () {
var img = $(this);
var bigImg = $('<img />').css({
'max-width': '100%',
'max-height': '100%',
'display': 'inline'
});
bigImg.attr({
src: img.attr('src'),
alt: img.attr('alt'),
title: img.attr('title')
});
var over = $('<div />').text(' ').css({
'height': '100%',
'width': '100%',
'background': 'rgba(0,0,0,.82)',
'position': 'fixed',
'top': 0,
'left': 0,
'opacity': 0.0,
'cursor': 'pointer',
'z-index': 9999,
'text-align': 'center'
}).append(bigImg).bind('click', function () {
$(this).fadeOut(300, function () {
$(this).remove();
});
}).insertAfter(this).animate({
'opacity': 1
}, 300);
});
</script>
</body>
</html>