$('#pictureFilePreview').css('overflow','scroll');
$('#pictureFilePreviewImg')
.attr("src", "http://url.of.the.image")
.css("display","block")
.bind("load", function(){ //wait for complete load of the image
// Slider
var initHeight = parseInt($('#pictureFilePreviewImg').attr("height"));
var initWidth = parseInt($('#pictureFilePreviewImg').attr("width"));
if ($('#pictureFilePreview').width() < initWidth
|| $('#pictureFilePreview').height() < initHeight) {
var deltaW = $('#pictureFilePreview').width() - initWidth;
var deltaH = $('#pictureFilePreview').height() - initHeight;
var ratio = 0;
if (deltaW < deltaH) {
ratio = ($('#pictureFilePreview').width() / initWidth) * 100;
} else {
ratio = ($('#pictureFilePreview').height() / initHeight) * 100;
}
$('#pictureSlider').slider({
range: false,
min : ratio,
values: [100],
change: function(event, ui) {
var newHeight = ((initHeight) * ui.value / 100);
var newWidth = ((initWidth) * ui.value / 100);
$('#pictureFilePreviewImg').attr("height",newHeight);
$('#pictureFilePreviewImg').attr("width",newWidth);
$('#pictureFilePreview').css('overflow',ui.value === 0?'visible':'scroll');
}
});
}
});
As this question has now been seen more than 1k times, I add my solution to it. Feel free to copy and adapt.
The solution involves jQuery UI slider plugin. Mainly we create a div with fixed size, overflow:scroll, containing a img tag, and we add a slider under it. The slider 'change' event is bound to a rescale of the img@width/@height attributes.
Don't know if it's worth the effort for you, but there's some terrific libraries that do exactly this in Cappuccino. The tutorial walkthrough shows you how to build an app that zooms and rotates images:
发布评论
评论（2）
由于这个问题现在已经被看到超过 1k 次，所以我将我的解决方案添加到其中。 随意复制和改编。
该解决方案涉及 jQuery UI 滑块插件。 主要是我们创建一个固定大小的div，overflow:scroll，包含一个img标签，并在其下面添加一个滑块。 滑块“更改”事件绑定到 img@width/@height 属性的重新缩放。
以下是我们所做的摘录：
HTML
JS
As this question has now been seen more than 1k times, I add my solution to it. Feel free to copy and adapt.
The solution involves jQuery UI slider plugin. Mainly we create a div with fixed size, overflow:scroll, containing a img tag, and we add a slider under it. The slider 'change' event is bound to a rescale of the img@width/@height attributes.
Here is an excerpt of what we did :
HTML
JS
不知道这是否值得你付出努力，但是有一些很棒的库可以在 Cappuccino 中做到这一点。 本教程演练向您展示如何构建缩放和旋转图像的应用程序：
剪贴簿教程< /a>
Don't know if it's worth the effort for you, but there's some terrific libraries that do exactly this in Cappuccino. The tutorial walkthrough shows you how to build an app that zooms and rotates images:
Scrapbook tutorial