jquery로 이미지 스왑 및 확대/축소 이미지 표시

내 사이트에서 기본 이미지를 클릭하면 4 개의 미리보기 이미지 제품 이미지가 표시되는 클래식 ASP 페이지가 있습니다. 이 부분은 괜찮습니다. 그러나 주 이미지에서 jQZoom 스크립트를 사용하려고합니다.jquery로 이미지 스왑 및 확대/축소 이미지 표시

줌 스크립트는 대부분 확대/축소 된 이미지가 선택한 이미지가 아닌 첫 번째 이미지의 줌을 표시한다는 점을 제외하고 대부분 작동합니다.

누군가가 솔루션을 제안 할 수 있는지 궁금합니다. 페이지에 대한 내 코드는 여기에 있습니다.

<% 

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 

%>

출처

2010-04-09 doubleplusgood

나는 사이트의 모든 문제를 볼 수 없습니다 ... –

만, 여기가 아닌 메인 이미지를 썸네일을 변경하는 것, 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); 
}

출처

2010-04-09 16:21:37 Quassnoi

jquery로 이미지 스왑 및 확대/축소 이미지 표시

답변

관련 문제