Javascript xzoom插件中的图像选择无法正常工作

我试图在一个项目中实现缩放库效果。我正在尝试使用xzoom插件来实现这一点。图像缩放效果良好。但当我选择下一幅图像时，它不会在xzoom容器中打开。相反，它被作为一个单独的窗口打开

我的代码如下：

 <spring:url value="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" var="jquery" />
    <script src="${jquery}"></script>
    <spring:url value="/resources/css/xzoom.css" var="smoothproductscs" />
    <link href="${smoothproductscs}" rel="stylesheet" media="all"/>
    <spring:url value="/resources/js/xzoom.min.js" var="smoothprod" />
            <script src="${smoothprod}"></script>

     <script>
             $(document).ready(function (){
                $(".xzoom").xzoom({tint: '#333', Xoffset: 15});
             });
    </script>

    <%
     if(rs.next()){
    %>
    <div class="xzoom-container">
    <img class="xzoom" id="xzoom-default" alt=""src="imagesa/<%= rs.getString("IMGNAME") %>" width="450" xoriginal="imagesa/<%= rs.getString("IMGNAME") %>" />
    <div class="xzoom-thumbs">
      <a href="imagesa/<%= rs.getString("IMGNAME") %>">
       <img class="xzoom-gallery" width="80" src="imagesa/<%= rs.getString("IMGNAME") %>"  xpreview="imagesa/<%= rs.getString("IMGNAME") %>">
      </a>

        <% while(rs.next()){%>

        <a href="imagesa/<%= rs.getString("IMGNAME") %>">
        <img class="xzoom-gallery" width="80" src="imagesa/<%= rs.getString("IMGNAME") %>">
      </a>

 <% }
    } %>
     </div>
     </div>

---

如有任何建议，我们将不胜感激。

请尝试将xzoom初始化代码更改为：

$(".xzoom").xzoom({tint: '#333', Xoffset: 15});

对于这一点：

$(".xzoom, .xzoom-gallery").xzoom({tint: '#333', Xoffset: 15});

---

谢谢成功了。但是你能解释一下吗？xZoom使用jQuery选择器有两种方式。例如，使用1个类名$.xzoom.xzoom初始化；或者使用2个或更多类名$.xzoom、.xzoom-gallery.xzoom初始化；他们是不同的。您可以在中阅读更多信息