Question

我从the gzoom site选择了一个名为gzoom的jquery插件，因为它似乎可以做我想要的（变焦）。我也看到这个previous question on stackoverflow似乎已经解决了。我对js和jquery不太熟悉，可能很容易丢失一些东西。

我已将自定义版本的最新jquery-ui（带有jquery） - 版本1.11.2 - 下载到我的PDC文件夹中。我还下载了两个gzoom文件--jquery.gzoom.css和jquery.gzoom.js。我现在正在WordPress环境之外的WAMP上进行测试。

我的html文件（改编自上述来源）是

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>test gzoom</title>

<link rel="stylesheet" href="/PDC/jquery-ui-1.11.2.custom/jquery-ui.min.css">
<script src="/PDC/jquery-ui-1.11.2.custom/external/jquery/jquery.js"></script>
<script src="/PDC/jquery-ui-1.11.2.custom/jquery-ui.min.js"></script>

<link rel="stylesheet" href="/PDC/gzoom/css/jquery.gzoom.css" type="text/css" media="screen">
<script type="text/javascript" src="/PDC/gzoom/jquery/jquery.gzoom.js"></script>
<style>
    div#zoom{
        cursor: crosshair;
    }
</style>
</head>
<body>
<div id="gzoomwrap">
    <div id="zoom" class="zoom minizoompan">
         <img src='/wp/wp-content/uploads/HcN-sign-for-palette.jpg'/>
    </div>
</div>

<script type="text/javascript">
  /*<![CDATA[*/
  $(function() {
    $zoom = $("#zoom").gzoom({
        sW: 300,
        sH: 225,
        lW: 1400,
        lH: 1050,
        lightbox : false
    });
  });
  /*]]>*/
</script>
</body>
</html>

图像和滑块显示OK，但是当我移动滑块时图像不会改变。我能看到的唯一错误（使用Chrome）是

未捕获的TypeError：无法读取属性＆＃39;替换＆＃39;未定义的jquery.gzoom.js：94 这一行是var hiSrc = ig.attr("src").replace(settings.re, settings.replace);

我尝试了一两个不同的jquery版本，但它们都有同样的问题。我做错了什么？感谢

如何让jquery gzoom插件正常工作？

0 个答案: