Swap Product Image instead of Lightbox?

I installed a zoom, but am unable to swap default product image when clicking on thumbnail.  

I believe that this was around on the older versions before lightbox. What do I have to change to make this a option again?


Example:
http://www.happycoral.com/products/452-purple-rain-acropora-sp-frag.aspx

Hi,

did you find a solution to this? I am facing the same issue as well.

Haven't found a solution yet

hi thrifty34,

the solution is simple and it is sort of already present. if you notice the html source file of the onevariant.ascx, you will find the below piece of code present, which actually replaces the default image with the thumbnail images.

function UpdateMainImage(url) {
                var imgMain = document.getElementById('<%=defaultImage.ClientID%>');
                imgMain.src = url;
            }

all you got to do is this

go to the thumbnail listview and in the itemtemplate put a value of "#" in the href and call the above function on 'onclick'.

<a href="#" title="<%= lProductName.Text%>" onclick="javascript:UpdateMainImage('<%#this.PictureService.GetPictureUrl((Picture)Container.DataItem, 460)%>')
    <img src="<%#this.PictureService.GetPictureUrl((Picture)Container.DataItem, 120)%>"
                                    alt="Product image" /></a>

hope this helps.

It is still not swapping images?

Got it to work.  It was missing a """.  

How do I have it so the image zoom reloads to that image after it swaps?


Here is my code

<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) {
                var imgMain = document.getElementById('<%=defaultImage.ClientID%>');
                imgMain.src = url;
            }
        </script>
  
        <div class="picture">
            <a runat="server" id="lnkMainLightbox" class="jqZoom" rel="lightbox-p" >
                <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%>"
                        onclick="javascript:UpdateMainImage('<%#this.PictureService.GetPictureUrl((Picture)Container.DataItem, 250)%>')"
    <img src="<%#this.PictureService.GetPictureUrl((Picture)Container.DataItem, 60)%>"
                                    alt="Product image" /></a>
                </ItemTemplate>
            </asp:ListView>
            
        </div>
        <div position= "relative" class="overview">
      <h1 class="productname">
                <asp:Literal ID="lProductName" runat="server" />
            </h1>
            <div class="clear">
            </div>
            <div class="shortdescription">
                <asp:Literal ID="lShortDescription" runat="server" />
            </div>
            <asp:PlaceHolder runat="server" ID="phSKU">
                <div class="clear">
                </div>
                <div class="sku">
                    <%=GetLocaleResourceString("Products.SKU")%> <asp:Literal runat="server" ID="lSKU" />
                </div>
            </asp:PlaceHolder>
            <asp:PlaceHolder runat="server" ID="phManufacturerPartNumber">
                <div class="clear">
                </div>
                <div class="manufacturerpartnumber">
                    <%=GetLocaleResourceString("Products.ManufacturerPartNumber")%> <asp:Literal runat="server" ID="lManufacturerPartNumber" />
                </div>
            </asp:PlaceHolder>
            <div class="clear">
            </div>
            <asp:PlaceHolder runat="server" ID="phManufacturers">
                <div class="manufacturers">
                    <asp:Literal ID="lManufacturersTitle" runat="server" />
                    <asp:Repeater runat="server" ID="rptrManufacturers">
                        <ItemTemplate>
                            <asp:HyperLink ID="hlManufacturer" runat="server" Text='<%#Server.HtmlEncode(Eval("LocalizedName").ToString()) %>' NavigateUrl='<%#SEOHelper.GetManufacturerUrl((Manufacturer)(Container.DataItem)) %>' />
                        </ItemTemplate>
                        <SeparatorTemplate>
                            ,
                        </SeparatorTemplate>
                    </asp:Repeater>
                </div>
            </asp:PlaceHolder>
            <div class="clear">
            </div>
        <div class="clear">
        </div>
            <div class="product-collateral">
                <nopCommerce:ProductRating ID="ctrlProductRating" runat="server" />
                <br />
                <div class="one-variant-price">
                    <nopCommerce:ProductPrice1 ID="ctrlProductPrice" runat="server" />
                    <nopCommerce:DecimalTextBox runat="server" ID="txtCustomerEnteredPrice" Value="1"
                        RequiredErrorMessage="<% $NopResources:Products.CustomerEnteredPrice.EnterPrice %>"
                        MinimumValue="0" MaximumValue="100000000" Width="100" />
                </div>
                <div class="add-info">
                    <nopCommerce:NumericTextBox runat="server" ID="txtQuantity" Value="1" RequiredErrorMessage="<% $NopResources:Products.EnterQuantity %>"
                        RangeErrorMessage="<% $NopResources:Products.QuantityRange %>" MinimumValue="1"
                        MaximumValue="999999" Width="50" />
                    <asp:Button ID="btnAddToCart" runat="server" OnCommand="OnCommand" Text="<% $NopResources:Products.AddToCart %>"
                        CommandName="AddToCart" CommandArgument='<%#Eval("ProductVariantId")%>' CssClass="productvariantaddtocartbutton" />
                    <asp:Button ID="btnAddToWishlist" runat="server" OnCommand="OnCommand" Text="<% $NopResources:Wishlist.AddToWishlist %>"
                        CommandName="AddToWishlist" CommandArgument='<%#Eval("ProductVariantId")%>' CssClass="productvariantaddtowishlistbutton" />
                </div>
                <asp:Panel runat="server" ID="pnlDownloadSample" Visible="false" CssClass="one-variant-download-sample">
                    <span class="downloadsamplebutton">
                        <asp:HyperLink runat="server" ID="hlDownloadSample" Text="<% $NopResources:Products.DownloadSample %>" />
                    </span>
                </asp:Panel>
                <br />
                <asp:Panel ID="pnlStockAvailablity" runat="server" class="stock">
                    <asp:Label ID="lblStockAvailablity" runat="server" />
                </asp:Panel>
                <br />
                <nopCommerce:ProductEmailAFriendButton ID="ctrlProductEmailAFriendButton" runat="server" />
                <nopCommerce:ProductAddToCompareList ID="ctrlProductAddToCompareList" runat="server" />
                <div class="clear">
                </div>
                <nopCommerce:ProductShareButton ID="ctrlProductShareButton" runat="server" />
            </div>
        </div>
    </div>
    <div class="clear">
    </div>
    <div class="product-collateral">
        <div class="product-variant-line">
            <asp:Label runat="server" ID="lblError" EnableViewState="false" CssClass="error" />
            <div class="clear">
            </div>
            <nopCommerce:TierPrices ID="ctrlTierPrices" runat="server" />
            <div class="clear">
            </div>
            <div class="attributes">
                <nopCommerce:ProductAttributes ID="ctrlProductAttributes" runat="server" />
            </div>
            <div class="clear">
            </div>
            <nopCommerce:GiftCardAttributes ID="ctrlGiftCardAttributes" runat="server" />
            <div class="clear">
            </div>
            <div class="fulldescription">
                <asp:Literal ID="lFullDescription" runat="server" />
            </div>
                <div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=155610647824757&amp;amp;xfbml=1"></script><fb:comments numposts="10" width="425" publish_feed="true"></fb:comments>
              </div>
        <div class="clear">
        </div>
        <div>
            <nopCommerce:ProductsAlsoPurchased ID="ctrlProductsAlsoPurchased" runat="server" />
        </div>
        <div class="clear">
        </div>
        <div>
            <nopCommerce:RelatedProducts ID="ctrlRelatedProducts" runat="server" />
        </div>
        <div class="clear">
        </div>
        <ajaxToolkit:TabContainer runat="server" ID="ProductsTabs" ActiveTabIndex="1" CssClass="grey">
            <ajaxToolkit:TabPanel runat="server" ID="pnlProductReviews" HeaderText="<% $NopResources:Products.ProductReviews %>">
                <ContentTemplate>
                    <nopCommerce:ProductReviews ID="ctrlProductReviews" runat="server" ShowWriteReview="true" />
                </ContentTemplate>
            </ajaxToolkit:TabPanel>
            <ajaxToolkit:TabPanel runat="server" ID="pnlProductSpecs" HeaderText="<% $NopResources:Products.ProductSpecs %>">
                <ContentTemplate>
                    <nopCommerce:ProductSpecs ID="ctrlProductSpecs" runat="server" />
                </ContentTemplate>
            </ajaxToolkit:TabPanel>
            <ajaxToolkit:TabPanel runat="server" ID="pnlProductTags" HeaderText="<% $NopResources:Products.ProductTags %>">
                <ContentTemplate>
                    <nopCommerce:ProductTags ID="ctrlProductTags" runat="server" />
                </ContentTemplate>
            </ajaxToolkit:TabPanel>
        </ajaxToolkit:TabContainer>
    </div>
</div>

i also used jqzoom and to get the zoom working i wrote it this way and it works like a charm

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

what i have done is that i added another parameter to the function and set the href of the anchor tag to the big image of the new thumbnail. zoom1 is the id of the anchor tag.

the anchor tag calls the function on click and it passes another parameter. i have called the pictureservice.getpictureurl and by passing the value of 1045(which u can change depends on the resolution of the large image), the get the large image generated and ready.

<a href="#" title="<%= lProductName.Text%>" onclick="javascript:UpdateMainImage('<%#this.PictureService.GetPictureUrl((Picture)Container.DataItem, 460)%>', '<%#this.PictureService.GetPictureUrl((Picture)Container.DataItem, 1045)%>')">
                                <img src="<%#this.PictureService.GetPictureUrl((Picture)Container.DataItem, 120)%>"
                                    alt="Product image" /></a>

What am I doing wrong?  I tried this


<script language="javascript" type="text/javascript">
            function UpdateMainImage(url, bigurl) {
                var imgMain = document.getElementById('<%=defaultImage.ClientID%>');
                imgMain.src = url;
                var aMain = document.getElementById('<%=lvProductPictures.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="jqZoom" 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%>" onclick="javascript:UpdateMainImage('<%#this.PictureService.GetPictureUrl((Picture)Container.DataItem, 460)%>', '<%#this.PictureService.GetPictureUrl((Picture)Container.DataItem, 1045)%>')">
                                <img src="<%#this.PictureService.GetPictureUrl((Picture)Container.DataItem, 120)%>"
                                    alt="Product image" /></a>
                </ItemTemplate>
            </asp:ListView>

<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>

It won't switch the zoom.  Everything else works but the jqzoom won't switch to the other image on the link above.