Swap image with jquery and show zoom image
- by Neil Bradley
Hi there,
On my site I have 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. This can be seen in action here;
http://www.wearecapital.com/productdetails-new.asp?id=6626
I was wondering if someone might be able to suggest a solution? My code for the page is here;
<%
if session("qstring") = "" then session("qstring") = "&rf=latest"
maxProducts = 6
prodID = request("id")
if prodID = "" or not isnumeric(prodid) then
response.Redirect("listproducts.asp?err=1" & session("qstring"))
else
prodId = cint(prodId)
end if
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
%>
