在另一个php文件中调用php文件jQuery海拔变焦不起作用

Question

我是初学者，所以请容忍我。

我正在使用jquery.elevatezoom.js放大图像。

它运行得很好，但问题是当我使用PHP函数在我的showimage.php中命名这个文件时，showimage.php中定义的jquery函数没有执行，因此我没有得到缩放。

我有仪表盘。当我单击一个按钮时，它被绑定到一个JavaScript函数，该函数在仪表板中加载页面，加载的页面是一个包含showimage.php的PHP文件。

1. 在仪表板的load事件中调用Jquery.min。
2. 仪表板有一个按钮，当单击该按钮时，将加载一个php文件，该文件首先使用php的include函数加载showimage.php。

以下是showimage.php的代码

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'/>
    <title>jQuery elevateZoom Demo</title>
    <script src='jquery.elevatezoom.js'></script>
</head>
<body>
<h1>Basic Zoom Example</h1>
<img id="zoom_01" src='images/large/image1.jpg' width="250px" height="250px"  data-zoom-image="images/large/image1.jpg"/>
<br />
<script>
    $('#zoom_01').elevateZoom({easing : true}); 
</script>
</body>
</html>

details.php
<?PHP
include 'showimage.php';
?>

有人能帮我确定为什么变焦不起作用吗？

Answer 1

也许脚本是在html完成之前执行以添加元素，所以您可以尝试在几秒钟后调用它，类似于showimage.php文件中的内容。

 <script type="text/javascript">

   setTimeout(function(){

      $('#zoom_01').elevateZoom({easing : true});

   }, 3000);

 </script>

Answer 2

使用ready并让jquery调用如下：

<script>
$(document).ready(function(){
   $('#zoom_01').elevateZoom({easing : true}); 
});

​

并将javascript放在包含的php文件之后。

顺便说一下，您的文档中没有包含jquery库吗？

Answer 3

只在文档准备好时才尝试使用它。您已经包含了jquery，因此请执行以下操作：

$(document).ready(function(){
    // you move it to here so only when your page is done loading it will add the event handler
    $('#zoom_01').elevateZoom({easing : true});
})