Professor Cloud Integration V2.xx

I have created simple implementation of Professor Cloud
http://www.professorcloud.com/mainsite/cloud-zoom.htm
for nopCommerce v2.00

In Models>Media>PictureModel.cs add following line:

public string CloudPictureUrl { get; set; }

In Controllers>CatalogController.cs find:

foreach (var picture in pictures)
                {
                    model.PictureModels.Add(new PictureModel()
                    {
                        ImageUrl = _pictureService.GetPictureUrl(picture, 70),
                        CloudPictureUrl = _pictureService.GetPictureUrl(picture, 300), //cloud zoom//
                        FullSizeImageUrl = _pictureService.GetPictureUrl(picture),
                        Title = string.Format(_localizationService.GetResource("Media.Product.ImageLinkTitleFormat"), model.Name),
                        AlternateText = string.Format(_localizationService.GetResource("Media.Product.ImageAlternateTextFormat"), model.Name),

                    });
                }

add line marked in bold.

Open Views/Catalog/Product.cshtml and replace this bit of code after <!--product pictures--> comment

<div class="picture">
                    <script type="text/javascript" src="@Url.Content("~/Scripts/cloud-zoom.1.0.2.min.js")"></script>
                    <script type="text/javascript">
                        function UpdateMainImage(url, bigurl) {
                            var imgMain = document.getElementById('zoom1');
                            imgMain.href = url;
                        }
                    </script>
                    @if (Model.DefaultPictureZoomEnabled)
                    { 
                        <a href="@Model.DefaultPictureModel.FullSizeImageUrl" rel="lightbox-pd" title="@Model.Name">
                            <img alt="@Model.DefaultPictureModel.AlternateText" src="@Model.DefaultPictureModel.ImageUrl" title="@Model.DefaultPictureModel.Title"/>
                        </a>
                    }
                    else
                    {
                        <div>
                            <a href="@Model.DefaultPictureModel.FullSizeImageUrl" id="zoom1" class="cloud-zoom"  rel="useZoom: 'zoom1', showTitle: false, adjustX:-4, adjustY:-4, smallImage: '@Model.DefaultPictureModel.ImageUrl' ">
                                <img alt="@Model.DefaultPictureModel.AlternateText" title="@Model.DefaultPictureModel.Title" src="@Model.DefaultPictureModel.ImageUrl">
                            </a>
                        </div>
                    }
                    @if (Model.PictureModels.Count > 1)
                    {
                        <div class="cloudPicture">
                            @foreach (var picture in Model.PictureModels)
                            {
                                <a id="" class="cloud-zoom-gallery" href="@picture.FullSizeImageUrl" rel="useZoom: 'zoom1', smallImage: '@picture.CloudPictureUrl' " title="@Model.Name">
                                    <img alt="@picture.AlternateText" src="@picture.ImageUrl"/>
                                </a>
                            }
                        </div>
                    }
                    <script type="text/javascript">
                        var i = 1;
                        $(".cloudPicture a").each(function () {
                            $(this).attr('id', '' + i + ''); i++;
                        });
                        $(document).ready(function () {
                            $('#1').click();
                        });
                    </script>
                </div>

This code works with
One Image
http://db.tt/jHe6W7B
and
More than one image
http://db.tt/dsLcMiM

thank you  Wx,  amazing work.. great to find people like you with a sharing spirit

I just would like to add (for the newbies to NOP like me) that you have to download the scripts from here http://www.xneterp.com/ftp/Cloud-Zoom0.png

then add the js them here
http://www.xneterp.com/ftp/Cloud-Zoom1.png

and the css to your theme like this
http://www.xneterp.com/ftp/Cloud-Zoom2.png

Thank you again WX

Wx,
you can also change the line on Views/Catalog/Product.cshtml

to this

<a href="@Model.DefaultPictureModel.FullSizeImageUrl" id="zoom1" class="cloud-zoom"  rel="useZoom: 'zoom1', tint: '#747170',tintOpacity:0.4 ,smoothMove:5,zoomWidth:480,  showTitle: false, adjustX:-4, adjustY:-4, smallImage: '@Model.DefaultPictureModel.ImageUrl' ">


to get a cool effect


Thank you once again for sharing your code

Regards

Excellent work. This is one of the BEST zooms I've seen. Great work.

Just downloaded NOPCommerce 2.0 and the implementation works great!


Just wanted to add the last step (for the newbies like myself). After you've followed Oscar_Agreda's steps, you need to reference to the css file.
http://imageshack.us/photo/my-images/844/finalstep.jpg/


It's really great to see people come together and share their knowledge so everyone will benefit from it!

Thanks for sharing your code and your findings guys. I can only hope that we see more posts like these! :-)

JonJJ wrote:

No reason to load two .css files just add your cloud-zoom classes to your Theme .css file.

Thanks for the clear instructions. Appreciated!

I hate to bring this back from the dead but thank you WX, saved me time trying to get this into 2.2.  I'm sure it's not a high priority, but i'd love to see Default Product size added into the CatalogController so themes don't get broken during version updates.

OK just gave up getting this to work in V2.20 and believe me,  I spent hours trying.

1) There is no products.cshtml (ProductTemplate.VariantsInGrid.cshtml in this version??)
2) so I tried it in ProductTemplate.VariantsInGrid.cshtml
3) I wonder what the UpdateMainImage function is used for, cannot find a single reference where it is actually used
4) Having done everything, using the sample nopCommerce code, I see two pictures of the same item
and partly the zooming works, but the images are there constantly.
Looking at the document I can see that the html contains exactly what is inserted in cshtml. And that should not be the case
as this should be completely reformatted by the cloud-zoom.js . So it looks like this js is not working at all.

I really would like some help with this . Dis someone got it to actually work in 2.20?

Thanks in advance

Geeds

Will post new implementation with v2.2 in the new few days as what you have seen above was created for v2.00