Problem with cloud zoom

Im using nopcommerce 2.65...I cant understand but my cloud zoom just dont seem to work now. I have customized my page and had done manual integrtaion ..but now it doesnt seem to work.. please help me with this..I am posting the code for the various pages related here..
For ProductTemplates.VariantsInGrid:
@model ProductDetailsModel
@using Nop.Core;
@using Nop.Core.Domain.Common;
@using Nop.Core.Infrastructure;
@using Nop.Web;
@using Nop.Web.Models.Catalog;
@{
    Layout = "~/Views/Shared/_ColumnsOne.cshtml";

    //title, meta
    Html.AddTitleParts(!String.IsNullOrEmpty(Model.MetaTitle) ? Model.MetaTitle : Model.Name);
    Html.AddMetaDescriptionParts(Model.MetaDescription);
    Html.AddMetaKeywordParts(Model.MetaKeywords);

    var canonicalUrlsEnabled = EngineContext.Current.Resolve<SeoSettings>().CanonicalUrlsEnabled;
    if (canonicalUrlsEnabled)
    {
        var productUrl = Url.RouteUrl("Product", new { productId = Model.Id, SeName = Model.SeName }, this.Request.Url.Scheme);
        Html.AddCanonicalUrlParts(productUrl);
    }
}
<!--product breadcrumb-->
@Html.Action("ProductBreadcrumb", "Catalog", new { productId = Model.Id })
<div class="clear">
</div>
<div class="page product-details-page">
    <div class="page-body">
        @Html.Widget("productdetails_top")
        @using (Html.BeginRouteForm("Product", new { productId = Model.Id, SeName = Model.SeName }, FormMethod.Post, new { id = "product-details-form" }))
        {
            <div class="productDetailLeft">
            <div class="product-essential">
                @Html.Widget("productdetails_before_pictures")
                <!--product pictures-->
                
                <!-- cloud zoom enabling-->
          @*   @Html.Partial("_ProductDetailsPictures", Model)*@
              @Html.Action("CloudZoom", "CloudZoom", Model)              
                
                 <!-- cloud zoom enabling -->

                @Html.Widget("productdetails_after_pictures")
              
            </div>

      @*      @Html.RenderPartial("RelatedProducts", "Catalog", new { productId = Model.Id })*@

            @{Html.RenderPartial("_ProductVariantImages", Model.ProductVariantModels);
        }

            <div class="full-description">
          
                    @Html.Raw(Model.FullDescription)
            </div>
            
            </div>
            <div class="productDetailRight">
            <div class="overview">
              <div id="cloudZoomWindowElement" style="position: absolute"></div>

               @* putting brand image here*@

             <a href="@Model.YourCategoryPictureModel.FullSizeImageUrl" >
           <div  ><img alt="@Model.YourCategoryPictureModel.AlternateText" width="100" src="@Model.YourCategoryPictureModel.ImageUrl" title="@Model.YourCategoryPictureModel.Title" /></div>
        </a>


                    <h1 class="product-name">
                        @Model.Name
                    </h1>
                    <div class="short-description">
                        @Html.Raw(Model.ShortDescription)
                    </div>

                    <div class="clear">
                    </div>

                    @Html.Widget("productdetails_overview_top")
                    <!--product manufacturers-->
                    @Html.Action("ProductManufacturers", "Catalog", new { productId = Model.Id })
                    <div class="clear">
                    </div>
                    <!--product reviews-->
                    @Html.Action("ProductReviewOverview", "Catalog", new { productId = Model.Id })
                                    
                    <div class="clear">
                    </div>

                     <div id="featureMenu1">
                           <a href="/t/BuyOneGiveOne" title="Мы профи по солнцезащитным очкам">
                          <div class="buy_one_give_one">&nbsp;</div>      

For _ProductVariantLine.cshtml
@model ProductDetailsModel.ProductVariantModel
@using Nop.Web.Models.Catalog;
<div class="product-variant-line">
    @if (!String.IsNullOrWhiteSpace(Model.PictureModel.ImageUrl))
    {
        <div class="variant-picture">
          <img alt="@Model.PictureModel.AlternateText" src="@Model.PictureModel.ImageUrl"
                                    title="@Model.PictureModel.Title" />
                                  
        </div>
    }
    @if (!String.IsNullOrWhiteSpace(Model.Name))
    {
        <div class="variant-name">
            @Model.Name
        </div>
    }
    @if (!String.IsNullOrWhiteSpace(Model.Description))
    {
        <div class="variant-description">
            @Html.Raw(Model.Description)
        </div>
    }
    @Html.Partial("_DownloadSample", Model)
    <div class="clear">
    </div>
    @Html.Action("ProductTierPrices", "Catalog", new { productVariantId = Model.Id })
    <div class="clear">
    </div>
    @{
        var dataDictAttributes = new ViewDataDictionary();
        dataDictAttributes.TemplateInfo.HtmlFieldPrefix = string.Format("attributes_{0}", Model.Id);
        @Html.Partial("_ProductAttributes", Model.ProductVariantAttributes, dataDictAttributes)                  
    }
    <div class="clear">
    </div>
    <!--product SKU, manufacturer part number, stock info-->
    @Html.Partial("_ProductVariant_SKU_Man_Stock", Model)
    <div class="clear">
    </div>
    <!--Back in stock subscription-->
    @Html.Partial("_ProductVariantBackInStockSubscription", Model)
    <div class="clear">
    </div>
    @{
        var dataDictGiftCard = new ViewDataDictionary();
        dataDictGiftCard.TemplateInfo.HtmlFieldPrefix = string.Format("giftcard_{0}", Model.Id);
        @Html.Partial("_GiftCardInfo", Model.GiftCard, dataDictGiftCard)
    }
    <div class="clear">
    </div>
   @{
        var dataDictPrice = new ViewDataDictionary();
        dataDictPrice.TemplateInfo.HtmlFieldPrefix = string.Format("price_{0}", Model.Id);
        @Html.Partial("_ProductVariantPrice", Model.ProductVariantPrice, dataDictPrice)
    }
    @{
        var dataDictAddToCart = new ViewDataDictionary();
        dataDictAddToCart.TemplateInfo.HtmlFieldPrefix = string.Format("addtocart_{0}", Model.Id);
        @Html.Partial("_ProductVariantAddToCart", Model.AddToCart, dataDictAddToCart)
    }
</div>

For _ProductDetailspictures.cshtml

@model ProductDetailsModel
@using Nop.Web.Models.Catalog;
@{
    Html.AddScriptParts(@Url.Content("~/Scripts/slimbox2.js"));

    int productPerRow = 6;
}
<div class="picture">
    @if (Model.DefaultPictureZoomEnabled)
    {
        <a href="@Model.DefaultPictureModel.FullSizeImageUrl" data-gallery="lightbox-pd" title="@Model.Name">
           <div id="lbimage" style="display:block;" ><img alt="@Model.DefaultPictureModel.AlternateText" src="@Model.DefaultPictureModel.ImageUrl" title="@Model.DefaultPictureModel.Title" height="250"width="500"/></div>
        </a>
    }
    else
    {
        <img alt="@Model.DefaultPictureModel.AlternateText" src="@Model.DefaultPictureModel.ImageUrl" title="@Model.DefaultPictureModel.Title" height="250"width="500"/>
    }
@if (Model.PictureModels.Count > 1)
    {
        <table class="picture-thumbs">
            @for (int i = 0; i < Model.PictureModels.Count; i++)
            {
                var picture = Model.PictureModels[i];

                if (i % productPerRow == 0)
                {
                @Html.Raw("<tr>")
                }
                    
                <td class="a-left subImagePDetails">
                    <a href="@picture.FullSizeImageUrl" data-gallery="lightbox-p" title="@Model.Name">
                        <img src="@picture.ImageUrl" alt="@picture.AlternateText" title="@picture.Title" />
                    </a>
                </td>
                                    
                if ((i % productPerRow == (productPerRow - 1)) ||
                    //last image
                    (i == (Model.PictureModels.Count - 1)))
                {
                @Html.Raw("</tr>")
                }
            }
        </table>
    }
</div>

Hi nirmaljoseph,

You need to integrate the Nop Cloud Zoom plugin in ProductTemplates.SilgleVariant.cshtml view. The integration is identical to the one that you have done in ProductTemplates.VariantsInGrid.
After the Cloud Zoom plugin is enabled the _ProductDetailspictures.cshtml view will not be used, so keep in mind that any changes, that you have made there will not take effect.

Also note that if you are using the Nop Quick Tabs plugin with the automatic integration setting enabled, the Nop Cloud Zoom plugin will not work. We have explained this in our online documentation. So in order for the both plugins to work, you need to integrate them both manually.


Ivan Stoyanov