Tổng Bài đăng:
12
Karma:
68
Đã tham gia:
05/03/2011
Vị trí:
India
Hi, did you find a solution to this? I am facing the same issue as well.
Tổng Bài đăng:
371
Karma:
2403
Đã tham gia:
30/06/2010
Vị trí:
United States
Haven't found a solution yet
Tổng Bài đăng:
12
Karma:
68
Đã tham gia:
05/03/2011
Vị trí:
India
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.
Tổng Bài đăng:
371
Karma:
2403
Đã tham gia:
30/06/2010
Vị trí:
United States
It is still not swapping images?
Tổng Bài đăng:
371
Karma:
2403
Đã tham gia:
30/06/2010
Vị trí:
United States
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;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>
Tổng Bài đăng:
12
Karma:
68
Đã tham gia:
05/03/2011
Vị trí:
India
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>
Tổng Bài đăng:
371
Karma:
2403
Đã tham gia:
30/06/2010
Vị trí:
United States
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>
Tổng Bài đăng:
12
Karma:
68
Đã tham gia:
05/03/2011
Vị trí:
India
<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>
Tổng Bài đăng:
371
Karma:
2403
Đã tham gia:
30/06/2010
Vị trí:
United States
It won't switch the zoom. Everything else works but the jqzoom won't switch to the other image on the link above.