Estoy tratando de implementar la funcionalidad PanZoom JS en mi Código. El código funciona bien cuando agrego la imagen estática a la página web y le agrego la función PanZoom.

P.ej:

 >>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} })

Pero el problema es que cuando agrego la imagen dinámicamente usando el método Jquery POST y PHP, PanZoom JS deja de funcionar.

El código que probé para agregar la imagen dinámicamente es:

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() { } }); })); });

Subir.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 } } }

Entonces, cuando ejecuto el código anterior, aparece el error:

Error no detectado: no se puede crear panzoom para el tipo actual de elemento dom en createPanZoom

y el efecto Panzoom no funciona.