Sitefinity Ecommerce – Enhance your product images using Magic Zoom Plus - For Sitefinity 5.1 and above

ProductDetailview.ascx

<%@ Control Language="C#" %>
<%@ Import Namespace="System.ComponentModel" %>
<%@ Import Namespace="Telerik.Sitefinity.Ecommerce.Catalog.Model" %>
<%@ Register Assembly="Telerik.Sitefinity.Ecommerce" Namespace="Telerik.Sitefinity.Modules.Ecommerce.Orders.Web.UI"
    TagPrefix="sfOrders" %>
<%@ Register Assembly="Telerik.Sitefinity.Ecommerce" Namespace="Telerik.Sitefinity.Modules.Ecommerce.Catalog.Web.UI.Fields"
    TagPrefix="sfCatalog" %>
<%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI.ContentUI" Assembly="Telerik.Sitefinity" %>
<%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI" Assembly="Telerik.Sitefinity" %>
<%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI.PublicControls.BrowseAndEdit"
    Assembly="Telerik.Sitefinity" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Modules.Ecommerce.Catalog.Web.UI"
    Assembly="Telerik.Sitefinity.Ecommerce" %>
<%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI.Fields"
    TagPrefix="sfFields" %>
<sf:ResourceLinks id="resourcesLinks" runat="server">
    <sf:ResourceFile JavaScriptLibrary="JQueryFancyBox" />
</sf:ResourceLinks>
<sf:ResourceLinks id="resourcesLinks2" runat="server" UseEmbeddedThemes="true" Theme="Default">
    <sf:ResourceFile Name="Telerik.Sitefinity.Resources.Themes.Basic.Styles.fancybox.css"
        Static="true" />
</sf:ResourceLinks>
<div id="widgetStatus" runat="server" visible="false" class="sfErrorSummary sfTopMsg">
    <asp:Label ID="widgetStatusMessage" runat="server" />
</div>
<div class="sfproductDetailsWrp">
<sf:ConditionalTemplateContainer ID="conditionalTemplate" runat="server">
    <templates>
        <sf:ConditionalTemplate Left="IsActive" Operator="Equal" Right="false" runat="server">
            <asp:Literal runat="server" Text="<%$Resources:OrdersResources, ProductNotAvailable %>" />
        </sf:ConditionalTemplate>

        <sf:ConditionalTemplate Left="IsActive" Operator="Equal" Right="true" runat="server">
            <telerik:RadListView ID="SingleItemContainer" ItemPlaceholderID="ItemContainer" AllowPaging="False" runat="server" EnableEmbeddedSkins="false" EnableEmbeddedBaseStylesheet="false">
                <LayoutTemplate>
                    <div class="sfproductDetails sfClearfix">
                        <asp:PlaceHolder ID="ItemContainer" runat="server" />
                    </div>
                </LayoutTemplate>
                <ItemTemplate>
                    <div class="sfproductImgsWrp">
                        <div class="sfproductMainImgWrp">
                            <%-- This is so that we can have the rel="fancybox" without resorting to an Attributes.Add() call --%>
                            <a href='<%# HttpUtility.HtmlAttributeEncode(Eval("PrimaryImageUrl") as string) %>' rel="fancybox">
                                <img src='<%# HttpUtility.HtmlAttributeEncode(Eval("Thumbnail.Url") as string) %>' alt='<%# HttpUtility.HtmlAttributeEncode(Eval("ThumbnailAlternativeText") as string) %>' />
                            </a>
                        </div>

                        <div class="sfproductImgsListWrp">
                            <ul class="sfproductImgsList">
                                <asp:Repeater runat="server" DataSource='<%# new BindingList<ProductImage>(((IEnumerable<ProductImage>)Eval("Images")).Skip(1).ToList()) %>'>
                                    <ItemTemplate>
                                        <li class="sfproductImgWrp">
                                            <a href='<%# DataBinder.Eval(Container.DataItem, "Url") %>' rel="fancybox" class="sfproductImgLnk">
                                                <asp:Image ID="Image1" CssClass="sfproductImg" runat="server" ImageUrl='<%# DataBinder.Eval(Container.DataItem, "ThumbnailUrl") %>' Width='<%# (int)DataBinder.Eval(Container.DataItem, "ThumbnailWidth") %>' Height='<%# (int)DataBinder.Eval(Container.DataItem, "ThumbnailHeight") %>' />
                                            </a>
                                        </li>
                                    </ItemTemplate>
                                </asp:Repeater>
                            </ul>
                        </div>
                        <asp:PlaceHolder ID="socialContainer" runat="server"></asp:PlaceHolder>
                    </div>

                    
                    <div class="sfproductInfoWrp">
                        <h1 class="sfproductTitle">
                            <%# Eval("Title") %>
                        </h1>
                        <div class="sfproductPrice">
                            <sfCatalog:DisplayPriceField runat="server" ObjectType="Product" ObjectId='<%# Eval("Id") %>' />
                        </div>

                        <sf:ProductDynamicFields id="productDynamicFieldsControl" ProductItem='<%# Page.GetDataItem() %>' runat="server" />

                        <div class="sfproductDescription">
                            <%# Eval("Description") %>
                        </div>

                        <div class="sfproductOptions">
                            <sf:ProductOptionsControl id="productOptionsControl" ProductItem='<%# Page.GetDataItem() %>' runat="server" />
                        </div>
                        <sfOrders:AddToCartWidget ID="addToCartWidget" ProductId='<%# Eval("Id") %>' runat="server" />
                    </div>
                </ItemTemplate>
            </telerik:RadListView>
        </sf:ConditionalTemplate>
    </templates>
</sf:ConditionalTemplateContainer>
</div>

ProductDetailViewZoom.ascx

<%@ Control Language="C#" %>
<%@ Import Namespace="System.ComponentModel" %>
<%@ Import Namespace="Telerik.Sitefinity.Ecommerce.Catalog.Model" %>
<%@ Register Assembly="Telerik.Sitefinity.Ecommerce" Namespace="Telerik.Sitefinity.Modules.Ecommerce.Orders.Web.UI"
    TagPrefix="sfOrders" %>
<%@ Register Assembly="Telerik.Sitefinity.Ecommerce" Namespace="Telerik.Sitefinity.Modules.Ecommerce.Catalog.Web.UI.Fields"
    TagPrefix="sfCatalog" %>
<%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI.ContentUI" Assembly="Telerik.Sitefinity" %>
<%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI" Assembly="Telerik.Sitefinity" %>
<%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI.PublicControls.BrowseAndEdit"
    Assembly="Telerik.Sitefinity" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Modules.Ecommerce.Catalog.Web.UI"
    Assembly="Telerik.Sitefinity.Ecommerce" %>
<%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI.Fields"
    TagPrefix="sfFields" %>

    <%-- comment out the resouces for Fancybox --%>
    <%-- <sf:ResourceLinks id="resourcesLinks" runat="server">
    <sf:ResourceFile JavaScriptLibrary="JQueryFancyBox" />
</sf:ResourceLinks>
<sf:ResourceLinks id="resourcesLinks2" runat="server" UseEmbeddedThemes="true" Theme="Default">
    <sf:ResourceFile Name="Telerik.Sitefinity.Resources.Themes.Basic.Styles.fancybox.css"
        Static="true" /> 
</sf:ResourceLinks> --%>

<!-- Add link to magiczoomplus.css file -->
<link href="/magiczoomplus/magiczoomplus.css" rel="stylesheet" type="text/css" media="screen" />
<!-- Add link to magiczoomplus.js file -->
<script src="/magiczoomplus/magiczoomplus.js" type="text/javascript"></script>

<div id="widgetStatus" runat="server" visible="false" class="sfErrorSummary sfTopMsg">
    <asp:Label ID="widgetStatusMessage" runat="server" />
</div>
<div class="sfproductDetailsWrp">
    <sf:conditionaltemplatecontainer id="conditionalTemplate" runat="server">
    <templates>
        <sf:ConditionalTemplate Left="IsActive" Operator="Equal" Right="false" runat="server">
            <asp:Literal ID="Literal1" runat="server" Text="<%$Resources:OrdersResources, ProductNotAvailable %>" />
        </sf:ConditionalTemplate>

        <sf:ConditionalTemplate Left="IsActive" Operator="Equal" Right="true" runat="server">
            <telerik:RadListView ID="SingleItemContainer" ItemPlaceholderID="ItemContainer" AllowPaging="False" runat="server" EnableEmbeddedSkins="false" EnableEmbeddedBaseStylesheet="false">
                <LayoutTemplate>
                    <div class="sfproductDetails sfClearfix">
                        <asp:PlaceHolder ID="ItemContainer" runat="server" />
                    </div>
                </LayoutTemplate>
                <ItemTemplate>
                    <div class="sfproductImgsWrp">
                        <div class="sfproductMainImgWrp">

                          <%-- Added Magic Toolbox Magic Zoom Plus below, including ID and REL tags and class--%>
                            <a href='<%# Eval("PrimaryImageUrl") %>' id="Zoomer2" rel="zoom-position: inner;  expand-position: center; zoom-position: #zoomWindow;  zoom-width: 400px; zoom-width: 450px;  selectors-effect: fade; selectors-change: mouseover;" class="MagicZoomPlus" >
                                <img src='<%# Eval("ThumbnailUrl") %>' alt='<%# Eval("ThumbnailAlternativeText") %>' />
                            </a>
                            <%--  
                            <a href='<%# HttpUtility.HtmlAttributeEncode(Eval("PrimaryImageUrl") as string) %>' >
                                <img src='<%# HttpUtility.HtmlAttributeEncode(Eval("Thumbnail.Url") as string) %>' alt='<%# HttpUtility.HtmlAttributeEncode(Eval("ThumbnailAlternativeText") as string) %>' />
                            </a>  --%>
                        </div>

                        <div class="sfproductImgsListWrp">
                            <ul class="sfproductImgsList">
                            <%--  The repeater below has been changed to not skip over the main image, but to include this as a selectable iamge --%>
                            <asp:Repeater ID="Repeater2" runat="server" Visible='<%# new BindingList<ProductImage>(((IEnumerable<ProductImage>)Eval("Images")).ToList()).Count() > 1 %>' DataSource='<%# new BindingList<ProductImage>(((IEnumerable<ProductImage>)Eval("Images")).ToList()) %>'>
                                    <ItemTemplate>
                                        <li class="sfproductImgWrp">
                                    <%-- Added Magic Toolbox rel tag and created an HREF pointing to the large image--%>
                                            <a rel="zoom-id: Zoomer2"  rev="<%# DataBinder.Eval(Container.DataItem, "ThumbnailUrl") %>" href='<%# DataBinder.Eval(Container.DataItem, "Url") %>'>
                                                <asp:Image ID="Image2" runat="server" ImageUrl='<%# DataBinder.Eval(Container.DataItem, "ThumbnailUrl") %>' Width='<%# (int)DataBinder.Eval(Container.DataItem, "ThumbnailWidth") %>' Height='<%# (int)DataBinder.Eval(Container.DataItem, "ThumbnailHeight") %>' />
                                            </a>
                                        </li>
                                    </ItemTemplate>
                                </asp:Repeater>
                                <%-- 
                                <asp:Repeater ID="Repeater1" runat="server" DataSource='<%# new BindingList<ProductImage>(((IEnumerable<ProductImage>)Eval("Images")).Skip(1).ToList()) %>'>
                                    <ItemTemplate>
                                        <li class="sfproductImgWrp">
                                            <a href='<%# DataBinder.Eval(Container.DataItem, "Url") %>' rel="" class="sfproductImgLnk">
                                                <asp:Image ID="Image1" CssClass="sfproductImg" runat="server" ImageUrl='<%# DataBinder.Eval(Container.DataItem, "ThumbnailUrl") %>' Width='<%# (int)DataBinder.Eval(Container.DataItem, "ThumbnailWidth") %>' Height='<%# (int)DataBinder.Eval(Container.DataItem, "ThumbnailHeight") %>' />
                                            </a>
                                        </li>
                                    </ItemTemplate>
                                </asp:Repeater>  --%>
                            </ul>
                        </div>
                        <asp:PlaceHolder ID="socialContainer" runat="server"></asp:PlaceHolder>
                    </div>

                    
                    <div class="sfproductInfoWrp">
                        <h1 class="sfproductTitle">
                            <%# Eval("Title") %>
                        </h1>
                        <div class="sfproductPrice">
                            <sfCatalog:DisplayPriceField ID="DisplayPriceField1" runat="server" ObjectType="Product" ObjectId='<%# Eval("Id") %>' />
                        </div>

                        <sf:ProductDynamicFields id="productDynamicFieldsControl" ProductItem='<%# Page.GetDataItem() %>' runat="server" />

                        <div class="sfproductDescription">
                            <%# Eval("Description") %>
                        </div>
                         <%-- Added Magic Toolbox Magic Zoom ID to define where I want my zoom window located--%>
                         <div id="zoomWindow" style="position: absolute;  top: 1px"></div>

                        <div class="sfproductOptions">
                            <sf:ProductOptionsControl id="productOptionsControl" ProductItem='<%# Page.GetDataItem() %>' runat="server" />
                        </div>
                        <sfOrders:AddToCartWidget ID="addToCartWidget" ProductId='<%# Eval("Id") %>' runat="server" />
                    </div>
                </ItemTemplate>
            </telerik:RadListView>
        </sf:ConditionalTemplate>
    </templates>
</sf:conditionaltemplatecontainer>
</div>