Reloading JqZoom after swapping image?

I have added a swap image, but the Jqzoom still uses the old image after swapping it?  What am I missing?


<script src="/js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="/js/jquery.jqzoom1.0.1.js" type="text/javascript"></script>

<link rel="stylesheet" href="/css/jqzoom.css" type="text/css">
<style type"text/css">
div.notes{
  font-size:12px;
}
div.notes a{
  color:#990000;
}

</style>
<script type="text/javascript">

$(document).ready(function(){
  var options = {
      zoomWidth: 100,
      zoomHeight: 100,
            xOffset: 50,
            yOffset: 50,
            position: "right" //and MORE OPTIONS

};

  $(".jqZoom").jqzoom();
});
</script>
</head>


<ajaxToolkit:ToolkitScriptManager runat="Server" EnableScriptGlobalization="true"
    EnableScriptLocalization="true" ID="sm1" ScriptMode="Release" CompositeScript-ScriptMode="Release" />
<% if (this.SettingManager.GetSettingValueBoolean("Media.CategoryBreadcrumbEnabled"))
   { %>
<nopCommerce:ProductCategoryBreadcrumb ID="ctrlProductCategoryBreadcrumb" runat="server" />
<% } %>
<div class="clear">
</div>
<div class="product-details-page">
    <div class="product-essential product-details-info">

        <script language="javascript" type="text/javascript">
            function UpdateMainImage(url, bigurl) {
                var imgMain = document.getElementById('<%=defaultImage.ClientID%>');
                imgMain.src = url;
                var aMain = document.getElementById('<%=lnkMainLightbox.ClientID%>');
                aMain.href = bigurl;
            }
            
        </script>
  
        <div class="picture">
            <a runat="server" id="lnkMainLightbox" class="jqZoom" >
                <asp:Image ID="defaultImage" runat="server"/>
            </a>
             <br />        (click to zoom)
            <asp:ListView ID="lvProductPictures" runat="server" class="thumbs" GroupItemCount="3">
                <LayoutTemplate>
                    <table style="margin-top: 10px;">
                        <asp:PlaceHolder runat="server" ID="groupPlaceHolder"></asp:PlaceHolder>
                    </table>
                </LayoutTemplate>
                <GroupTemplate>
                    <tr>
                        <asp:PlaceHolder runat="server" ID="itemPlaceHolder"></asp:PlaceHolder>
                    </tr>
                </GroupTemplate>
                <ItemTemplate>
                    <td align="left">
                        <a href="#" title="<%= lProductName.Text%>" ID="lnkMainLightbox" onclick="javascript:UpdateMainImage('<%#this.PictureService.GetPictureUrl((Picture)Container.DataItem, 250)%>', '<%#this.PictureService.GetPictureUrl((Picture)Container.DataItem, 1000)%>')">
                                <img src="<%#this.PictureService.GetPictureUrl((Picture)Container.DataItem, 120)%>"
                                    alt="Product image" /></a>

Hello,
Do you find the answer? I've the same problem with professor cloud?
Thanks.

André

Chrom-Andre wrote:

Me too... I'm getting frustrated. I tried everything but nothing happens. Any update?

Here is my integration with Professor Cloud and works fine.

In Modules/ProductInfo.ascx

 <script language="javascript" type="text/javascript">
            function UpdateMainImage(url, bigurl) {
                var imgMain = document.getElementById('zoom1');
                imgMain.href = url;
            }     
</script>

<div class="product-details-info">
    <div class="picture">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/JavaScript" src="/Scripts/cloud-zoom.1.0.2.min.js"></script>
      <a href="" class='cloud-zoom' id="zoom1" rel="position: 'inside' , showTitle: false, adjustX:0, adjustY:0">
      <asp:Image ID="defaultImage" runat="server" />
      </a>
      <div class="clear"></div>
        <asp:ListView ID="lvProductPictures" runat="server" GroupItemCount="3">
            <LayoutTemplate>
                <div class="thumbnails">
                    <asp:PlaceHolder runat="server" ID="groupPlaceHolder"></asp:PlaceHolder>
                </div>
            </LayoutTemplate>
            <GroupTemplate>
                    <asp:PlaceHolder runat="server" ID="itemPlaceHolder"></asp:PlaceHolder>
            </GroupTemplate>
            <ItemTemplate>
                <a id="" href="<%#this.PictureService.GetPictureUrl((Picture)Container.DataItem)%>" class="cloud-zoom-gallery" title='<%= lProductName.Text%>' rel="useZoom: 'zoom1', smallImage: '<%#this.PictureService.GetPictureUrl((Picture)Container.DataItem, 350)%>' ">
        <img src="<%#this.PictureService.GetPictureUrl((Picture)Container.DataItem, 50)%>" alt="Product image" /></a>    
            </ItemTemplate>
        </asp:ListView>
                 
<script type="text/javascript">

var i = 1;
 $(".thumbnails a").each(function (){
 $(this).attr('id', ''+i+'');
  i++;
 });
 
 $(document).ready(function () {
   $('#1').click();
});

</script>

</div>