Zoom - Professor Cloud Integration working fine

wxDevelopment wrote:

@wxDevelopment: If you don't mind, can you send me the working code? I would appreciate it much

akumiro wrote:

Just send you PM with download link. Hope this will help you.

wxDevelopment wrote:

Just one more favor. Can you post the CSS classes you're using?

Hi,

I've implemented the Zoom - Professor Cloud but I get an exception appear in the log every time a user goes to the product page.

This is documented in https://www.nopcommerce.com/boards/t/10473/version-19-error-log-keeps-growing-the-file-productdetailsaspx-does-not-exist.aspx#42744

Has anyone else experienced this issue and managed to resolve it?

Thanks a lot to all the people who have made this awesome idea a reality. I was just more than happy to learn that there will be an extension of zoom-professor cloud in nop 2.0. I have been trying to implement this on nop 1.9. While the plugin seems to work (Although only the solution proposed by Kambui.Nurse only works for me) I would like to ask if there is a way you can increase the zoom i.e make a zoom on a small area as shown on the first demo of this page http://www.yellowlemon.net/demo/1/cloud-zoom/index.html

I have been trying to implement this as suggested on this website http://www.yellowlemon.net/javascript/images/cloud-zoom but I cannot make it work as expected. Below is the code I am using for ProductInfo.ascx

<%@ Control Language="C#" AutoEventWireup="True" Inherits="NopSolutions.NopCommerce.Web.Modules.ProductInfoControl"
    CodeBehind="ProductInfo.ascx.cs" %>
<%@ Register TagPrefix="nopCommerce" TagName="ProductShareButton" Src="~/Modules/ProductShareButton.ascx" %>
<script language="javascript" type="text/javascript">
    function UpdateMainImage(url, bigurl) {
        var imgMain = document.getElementById('zoom1');
        imgMain.href = url;
    }
    function showHref(elementId) {
        document.getElementById('fullview').href = document.getElementById(elementId).href;
        document.getElementById('fullview').title = document.getElementById(elementId).title;
    }

</script>
<script src="../Scripts/cloud-zoom.1.0.2.min.js" type="text/javascript"></script>
<link href="../css/cloud-zoom.css" rel="stylesheet" type="text/css" />
<div class="product-details-info">
    <div class="picture">
        <div class="section-zoom" style="width: 248px;">
            <div class="Small-zoom-Image" style="border: 4px #CCC Solid;">
                <asp:HyperLink ClientIDMode="Static" NavigateUrl="" CssClass='cloud-zoom' ID="zoom1"
                    rel="tint: '# ff0000', tintOpacity: 0.5, smoothMove: 5, zoomWidth: 480, adjustY: -4, adjustX: 10"
                    runat="server">
                    <asp:Image ID="defaultImage" runat="server" />
                </asp:HyperLink>
            </div>
        </div>
    </div>
    <div class="overview">
        <h1 class="productname">
            <asp:Literal ID="lProductName" runat="server" />
        </h1>
        <div class="shortdescription">
            <asp:Literal ID="lShortDescription" runat="server" />
        </div>
        <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>
        <a id="fullview" href="" rel="lightbox-p" title="">View Full Size Image</a>
        <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="" onclick="showHref(this.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>
        <div class="clear">
        </div>
        <div class="fulldescription">
            <asp:Literal ID="lFullDescription" runat="server" />
        </div>
        <nopCommerce:ProductShareButton ID="ctrlProductShareButton" runat="server" />
    </div>
    <script type="text/javascript">
        var i = 1;
        $(".thumbnails a").each(function () {
            $(this).attr('id', '' + i + '');
            i++;
        });
        $(document).ready(function () {
            $('#1').click();
        });
    </script>
</div>

P.S: Regarding the various css classes in this code. I am not sure if they come with the plugin or if I had to develop them myself. For example, can someone give more details on classes like: section-zoom, Small-zoom-Image, cloud-zoom, and cloud-zoom-gallery? Please give your thoughts and comment if you have made this plugin working for you.
Thanks in advance!

By the way, PM me the source code if you're willing to share it :(

Hi,

Just following up on my earlier comment.  I've implemented the zoom based in ProductInfo.ascx based upon the examples on here, but I get an exception thrown whenever you go to the product page.

The user does not see the exception.  Its raised by the URLWriting, and gets logged.  Because this happens every time a user views a page, the log is filled with these exceptions.

Has any one experienced this?

The exception is;

System.Web.HttpException (0x80004005): The file '/ProductDetails.aspx' does not exist. at System.Web.UI.Util.CheckVirtualFileExists(VirtualPath virtualPath) at System.Web.Compilation.BuildManager.GetVPathBuildResultInternal(VirtualPath virtualPath, Boolean noBuild, Boolean allowCrossApp, Boolean allowBuildInPrecompile, Boolean throwIfNotFound, Boolean ensureIsUpToDate) at System.Web.Compilation.BuildManager.GetVPathBuildResultWithNoAssert(HttpContext context, VirtualPath virtualPath, Boolean noBuild, Boolean allowCrossApp, Boolean allowBuildInPrecompile, Boolean throwIfNotFound, Boolean ensureIsUpToDate) at System.Web.Compilation.BuildManager.GetVirtualPathObjectFactory(VirtualPath virtualPath, HttpContext context, Boolean allowCrossApp, Boolean throwIfNotFound) at System.Web.Compilation.BuildManager.CreateInstanceFromVirtualPath(VirtualPath virtualPath, Type requiredBaseType, HttpContext context, Boolean allowCrossApp) at System.Web.UI.PageHandlerFactory.GetHandlerHelper(HttpContext context, String requestType, VirtualPath virtualPath, String physicalPath) at System.Web.UI.PageHandlerFactory.GetHandler(HttpContext context, String requestType, String virtualPath, String path) at System.Web.HttpApplication.MaterializeHandlerExecutionStep.System.Web.HttpApplication.IExecutionStep.Execute() at System.Web.HttpApplication.ExecuteStep(IExecutionStep step, Boolean& completedSynchronously)

Check if /ProductDetails.aspx is located where it belongs

Apologies, I was a muppet and pasted the wrong exception.  This is correct exception;

System.Web.HttpException (0x80004005): The file '/products/default.aspx' does not exist. at System.Web.UI.Util.CheckVirtualFileExists(VirtualPath virtualPath) at System.Web.Compilation.BuildManager.GetVPathBuildResultInternal(VirtualPath virtualPath, Boolean noBuild, Boolean allowCrossApp, Boolean allowBuildInPrecompile, Boolean throwIfNotFound, Boolean ensureIsUpToDate) at System.Web.Compilation.BuildManager.GetVPathBuildResultWithNoAssert(HttpContext context, VirtualPath virtualPath, Boolean noBuild, Boolean allowCrossApp, Boolean allowBuildInPrecompile, Boolean throwIfNotFound, Boolean ensureIsUpToDate) at System.Web.Compilation.BuildManager.GetVirtualPathObjectFactory(VirtualPath virtualPath, HttpContext context, Boolean allowCrossApp, Boolean throwIfNotFound) at System.Web.Compilation.BuildManager.CreateInstanceFromVirtualPath(VirtualPath virtualPath, Type requiredBaseType, HttpContext context, Boolean allowCrossApp) at System.Web.UI.PageHandlerFactory.GetHandlerHelper(HttpContext context, String requestType, VirtualPath virtualPath, String physicalPath) at System.Web.UI.PageHandlerFactory.System.Web.IHttpHandlerFactory2.GetHandler(HttpContext context, String requestType, VirtualPath virtualPath, String physicalPath) at System.Web.HttpApplication.MapHttpHandler(HttpContext context, String requestType, VirtualPath path, String pathTranslated, Boolean useAppConfig) at System.Web.HttpApplication.MapHandlerExecutionStep.System.Web.HttpApplication.IExecutionStep.Execute() at System.Web.HttpApplication.ExecuteStep(IExecutionStep step, Boolean& completedSynchronously)

Thanks for both of the solutions, . . but both are having this problem:  it only works if there is more than one image.
If you have just one image for that Product, the zoom doesn't work.
Am I the only having this problem?