На моем сайте есть классическая 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
%>