When it comes to creating a viewport function using jquery.viewport, I'm faced with the challenge of integrating it with jQuery UI slider and a custom zoom function for images. I've also utilized a plugin to enhance the viewport functionality.
The issue arises after zooming in on an image - the draggable area seems to be limited, making it impossible to drag certain parts of the content. Is there a solution to this problem? Thanks
Html:
<div id="view">
<img src="demo/Web081112_P002_text.png" id = "largeText"/>
<img src="demo/Web081112_P002_image.jpg" id = "largeImg"/>
</div>
<div id='slider' style='display:block;position:fixed;z-index:105;height:25%;right: 2%;top:25%;'></div>
Javascript
<script>
$(document).ready(function(){
$("#view").css("height",$(window).height());
$("#view").css("width",$(window).width());
/*
$("#box").css("height",$("#largeImg").height());
$("#box").css("width",$("#largeImg").width());
*/
//initiate the viewport
var element = $('#view').viewport();
var content = element.viewport('content');
content.draggable({containment: 'parent'});
content.scraggable({containment: 'parent'});
$( "#slider" ).slider({
orientation: "vertical",
range: "min",
min: 100,
max: 200,
value: 100,
...
});
</script>
css:
<style>
#view {
height:600px;
width:350px;
}
#largeImg {
position:absolute;
display:block;
width: 1250px;
height: 1500px;
z-index: 100;
}
#largeText {
position:absolute;
display:block;
width: 1250px;
height: 1500px;
z-index: 101;
}
body {
width : auto;
height: auto;
overflow:hidden;
}
</style>