在我的网站上，我有一个经典 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,"""",""") 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
%>
最佳答案
假设mainimg是a内图像的id，你似乎只改变了这里的缩略图，而不是主图像。
主图像位于a.href中，您也应该更改它并重新实例化JQZoom。
试试这个:
function switchImg(imgName) {
$('a.MYCLASS').attr('href', '/images/products/' + imgName);
$('a.MYCLASS img').attr('src', '/images/products/' + imgName);
$(".MYCLASS").jqzoom(options);
}
关于javascript - 用 jquery 交换图像并显示缩放图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/2607078/