Swap image with jquery and show zoom image
On my site I have an Classic ASP page that shows 4 thumbnail product images that when clicked on swap the main image. This part is working okay. However, on the main image I'm also trying to use the jQZoom script.
The zoom script works for the most part, except that the zoomed image always displays the zoom of the first image, rather than the one selected.
I was wondering if someone might be able to suggest a solution? My code for the page is here;
<%
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%>" t开发者_如何学运维itle="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
%>
Assuming that mainimg is the id of the image inside a, you only seem to change the thumbnail here, not the main image.
The main image is in a.href, you should change it as well and reinstantiate JQZoom.
Try this:
function switchImg(imgName) {
$('a.MYCLASS').attr('href', '/images/products/' + imgName);
$('a.MYCLASS img').attr('src', '/images/products/' + imgName);
$(".MYCLASS").jqzoom(options);
}
加载中,请稍侯......
精彩评论