Question

我正在尝试在项目中实现缩放库效果。我正在尝试使用“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>

任何建议都将不胜感激。

Answer 1

尝试从以下位置更改xzoom初始化代码：

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

到这一个：

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

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

1 个答案: