I am trying to implement the PanZoom JS Functionality in my Code. The Code works fine when I add the static Image to the The WebPage and add the PanZoom Function to it.
Eg:
>>HTML
<div class="imageSection">
<div class="image-box" id="targetLayer">
<img id="scene" class="image-preview" src="uploads/Jack-Ceph.jpg" class="upload-preview" />
</div>
</div>
>>JS
var element = document.getElementById('scene')
panzoom(element,{
maxZoom: 5,
minZoom: 0.5,
transformOrigin: {x: 0.5, y: 0.5}
})
But the Problem is that When I add the Image dynamically using the Jquery POST method and PHP The PanZoom JS stops working.
The Code I tried for adding the Image dynamically is :
HTML
<form id="uploadForm" action="upload.php" method="post" enctype="multipart/form-data">
<input id="picture" name="picture" type="file" >
<p>Drag your files here or click in this area.</p>
<button id="upload" name="upload" type="submit">Upload</button>
</form>
JS
// Upload image using Ajax
$(document).ready(function (e) {
$("#uploadForm").on('submit',(function(e) {
e.preventDefault();
$.ajax({
url: "upload.php",
type: "POST",
data: new FormData(this),
contentType: false,
cache: false,
processData:false,
success: function(data)
{
$("#targetLayer").html(data);
},
error: function()
{
}
});
}));
});
Upload.php
if(is_array($_FILES)) {
if(is_uploaded_file($_FILES['picture']['tmp_name'])) {
$sourcePath = $_FILES['picture']['tmp_name'];
$targetPath = "uploads/".$_FILES['picture']['name'];
if(move_uploaded_file($sourcePath,$targetPath)) {
?>
<img id="scene" class="image-preview" src="<?php echo $targetPath; ?>" class="upload-preview" />
<?php
}
}
}
So When I run the above code, i get the error :
Uncaught Error: Cannot create panzoom for the current type of dom element at createPanZoom
and the Panzoom effect doesn't work.