Question

在我的网站上，我有一个经典ASP页面，显示4个缩略图产品图像，当点击交换主图像时。这部分工作正常。但是，在主图像上我也尝试使用jQZoom脚本。

缩放脚本大部分都有效，但缩放图像始终显示第一张图像的缩放，而不是所选的缩放。

我想知道是否有人能提出解决方案？我的页面代码在这里;

<%

SQL = "Select * from products,subcategories,labels where subcat_id = prod_subcategory and label_id = prod_label and prod_id = " & prodID

set conn = server.CreateObject("ADODB.connection")
conn.Open(Application("DATABASE"))
set rs = conn.Execute(SQL)

if rs.eof then
    ' product is not valid
    name = "Error - product id " & prodID & " is not available"
else

    image1      = rs.fields("prod_image1")
    image1Desc  = rs.fields("prod_image1Desc")
    icon        = rs.fields("prod_icon")
    subcat      = rs.fields("prod_subcategory")
    image2      = rs.fields("prod_image2")
    image2Desc  = rs.fields("prod_image2Desc")
    image3      = rs.fields("prod_image3")
    image3Desc  = rs.fields("prod_image3Desc")
    image4      = rs.fields("prod_image4")
    image4Desc  = rs.fields("prod_image4Desc")
    zoomimg     = rs.Fields("prod_zoomimg")
    zoomimg2    = rs.Fields("prod_zoomimg2")
    zoomimg3    = rs.Fields("prod_zoomimg3")
    zoomimg4    = rs.Fields("prod_zoomimg4")

    thumb1 = rs.fields("prod_preview1").value
    thumb2 = rs.fields("prod_preview2").value
    thumb3 = rs.fields("prod_preview3").value
    thumb4 = rs.fields("prod_preview4").value

end if
set rs = nothing

conn.Close
set conn = nothing

%>
<!-- #include virtual="/includes/head-product.asp" -->

<body id="detail">
<!-- #include virtual="/includes/header.asp" -->
<script type="text/javascript" language="javascript">

function switchImg(imgName) {
    var ImgX = document.getElementById("mainimg");
    ImgX.src="/images/products/" + imgName;
}

</script>

<script type="text/javascript">

$(document).ready(function(){
    var options = {
        zoomWidth: 466,
        zoomHeight: 260,
        xOffset: 34,
        yOffset: 0,
        title: false,
        position: "right" //and MORE OPTIONS
};
    $(".MYCLASS").jqzoom(options);
});

</script>

<!-- #include virtual="/includes/nav.asp" -->

<div id="column-left">
    <div id="main-image">
            <% if oldie = false then %><a href="/images/products/<%=zoomimg%>" class="MYCLASS"  title="MYTITLE"><img src="/images/products/<%=image1%>" title="IMAGE TITLE" name="mainimg" id="mainimg" style="width:425px; height:638px;" ></a><% end if %>

    </div>

</div>
<div id="column-right">
    <div id="altviews">
    <h3 class="altviews">Alternative Views</h3>
    <ul>
        <%
                if oldie = false then
                writeThumb thumb1,image1,zoomimg,image1desc
                writeThumb thumb2,image2,zoomimg2,image2desc
                writeThumb thumb3,image3,zoomimg3,image3desc
                writeThumb thumb4,image4,zoomimg4,image4desc
                end if
        %>
    </ul>
    </div>

</div>

<!-- #include virtual="/includes/footer-test.asp" -->
<%

sub writeThumb(thumbfile, imgfile, zoomfile, thumbdesc)
    response.Write "<li>"
    if thumbfile <> "65/default_preview.jpg" and thumbfile <> "" and not isnull(thumbfile) then 
        if imgFile <> "" and not isnull(imgfile) then rimgfile = replace(imgfile,"/","//") else rimgfile = ""
        if thumbdesc <> "" and not isnull(thumbdesc) then rDescription = replace(thumbdesc,"""","&quot;") else rDescription = ""
        response.write "<img src=""/images/products/"& thumbfile &""" style=""cursor: pointer"" border=""0"" style=""width:65px; height:98px;"" title="""& rDescription &""" onclick=""switchImg('" & rimgfile & "')"" />" & vbcrlf
    else
        response.write "<img src=""/images/products/65/default_preview.jpg"" alt="""" />" & vbCrLF
    end if
    response.write "</li>" & vbCrLF
end sub

%>

Answer 1

假设mainimg是id内图片的a，您似乎只是在这里更改缩略图，而不是主图像。

主要图片位于a.href，您也应该更改它并重新JQZoom。

试试这个：

function switchImg(imgName) {
    $('a.MYCLASS').attr('href', '/images/products/' + imgName);
    $('a.MYCLASS img').attr('src', '/images/products/' + imgName);
    $(".MYCLASS").jqzoom(options);
}

使用jquery交换图像并显示缩放图像

1 个答案: