I need to make an image viewer that allows large images to be loaded into a container and then dragged within the container so that the entire image is viewable but the image is never dragged out of bounds. The below code works perfectly except the scrollbars are not accurately synchronizing with the position of the dragged image and allow the image to be scrolled out of bounds. How can I synchronize the scroll bars with the image while it is being dragged?
Edit:
Here is a working example
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js"></script>
<style>
.container{margin: auto;cursor: move;width: 80%; position: relative; min-width:885px;}
#screen{overflow:auto; width: 80%; height: 600px; clear: both; border: 1px solid black; background-color: #CCCCCC; float:left; margin-right: 15px;}
</style>
</head>
<body>
<div class="container">
<div id="screen">
<img class="drag-image" id="draggable" />
</div>
</div>
</body>
</html>
<script type="text/javascript">
$(function () {
$('#draggable').attr('src', 'http://i.imgur.com/uPjIz.jpg').load(function () {
CreateDraggablePicture();
});
});
function CreateDraggablePicture() {
var x = ($('#draggable').width() - $('#screen').width() - $('#screen').offset().left) * -1;
var y = ($('#draggable').height() - $('#screen').height() - $('#screen').offset().top) * -1;
var x2 = $('#screen').offset().left;
var y2 = $('#screen').offset().top;
$("#draggable").draggable({ containment: [x, y, x2, y2], scroll: true });
}
</script>
These plugins seems to do the same effect you describe here