How to enable right click image save as function, with cloud zoom

Hi to anyone who as this issue How to enable right click image save as function, using cloud zoom I need to allow website visitors to right click on an image and save as so they can download image.  Can anyone help with this  Many Thanks

Hi, 

The Cloud Zoom plugin does not allow users to right-click on the image. It is not a common practice to let users download images. If they want, they can still do it by inspecting the element.

In your case, you can show a link to the picture so the users can download it even easier. You can add it in the end of the _ProductDetailsPictures file like this:

<div><a href="@Model.DefaultPictureModel.FullSizeImageUrl" target="_blank">Download Picture</a></div>

I hope this helped !

Hi Mladen

Thanks For your response - support, really appreciate it,

I tried the code, but it does not seem to work unfortunately,

I pasted your code at the bottom of the page _ProductDetailsPictures
but it does not display a link ?

The website really need this right click image download function to work as their users (opticians) wish to down load images constantly as models change. it has to be easy for them.

It's the large image of the frame they need shown by the cloudzoom function (see at) http://www.whiteopticsglasses.com

If this cannot be achieved with cloudzoom it will have to go.

I had a link sent to me of MagicZoomPlus which seems to do want we want,
Can this be installed on the site instead, have you any more views - thoughts on this.

https://www.magictoolbox.com/magiczoomplus/modules/nopcommerce/

I am very new to using Nop Commerce

Thanks again for your help, your response would be appreciated

Martyn

Hi, 

It is strange that the link is not visible, but it does not matter, because I have thought of even a better way for showing this link. Remove the code I gave you and place this code:

<div><a href="@Model.DefaultPicture.FullSizeImageUrl" target="_blank">Download Picture</a></div>

into this file: /Plugins/SevenSpikes.Nop.Plugins.CloudZoom/Views/CloudZoom/CloudZoom.cshtml right before the closing tag of the <div class="gallery sevenspikes-cloudzoom-gallery"> element.

Other way to download the image is to left-click on the image. This will open the high resolution image in popup and then the customer will be able to download the full-size image.


I hope this helped !

Hi Mladen

Thank you so much. We have real progress, we have a link - hooray !!!!
(but need to try and reposition it - its very close - tight under small image).
 
When you use it on just one frame model it WORKS :)
  
see -  http://www.whiteopticsglasses.com/caravelli-103-c1

but, when it is used with a frame x 3 PictureThumbnailsInCarousel,
it is difficult to access-click on, due to small images displayed in carousel underneath

see - http://www.whiteopticsglasses.com/caravelli-108-c2

Have you any thoughts on how we can improve this ?

----------------------------------------------------
By the way the nop version on this site is 3.10

This is my code from CloudZoom.cshtml
---------------------------------------------
 <div class="gallery">
        <div class="picture" id="sevenspikes-cloud-zoom" data-zoomWindowElementId="@Model.ElementId" 
         data-selectorOfTheParentElementOfTheCloudZoomWindow="@Model.SettingsModel.SelectorOfTheParentElementOfTheCloudZoomWindow" 
         data-defaultImageContainerSelector="@Model.SettingsModel.DefaultImageContainerSelector">
            <a href="@Model.DefaultPicture.FullSizeImageUrl" class="cloud-zoom" id="zoom1" rel="@Model.DefaultPicture.DefaultRelation">
                <img src="@Model.DefaultPicture.SmallImageUrl" alt="@Model.DefaultPicture.AlternateText" title="@Model.DefaultPicture.Title" id="cloudZoomImage" />
            </a>
    <div><a href="@Model.DefaultPicture.FullSizeImageUrl" target="_blank">Download Picture</a></div>  
        </div>
        @if (Model.Pictures.Count > 1)
        {
            <div class="picture-thumbs">
                @if (Model.SettingsModel.EnablePictureThumbnailsInCarousel)
                {
                    <ul id="carousel" class="jcarousel jcarousel-skin-thumbs">
                        @foreach (var picture in Model.Pictures)
                        {
                            <li><a href="@picture.FullSizeImageUrl" class="cloud-zoom-gallery" title="@picture.Title" rel="@picture.GalleryRelation">
                                <img class="cloud-zoom-gallery-img" src="@picture.TinyImageUrl" alt="@picture.AlternateText" title="@picture.Title"/>
                            </a></li>
                        }
                    </ul>
                }
                else
                {
                    foreach (var picture in Model.Pictures)
                    {
                    <a href="@picture.FullSizeImageUrl" class="cloud-zoom-gallery" title="@picture.Title" rel="@picture.GalleryRelation">
                        <img class="cloud-zoom-gallery-img" src="@picture.TinyImageUrl" alt="@picture.AlternateText" title="@picture.Title" />
                    </a>
                    }
                }




            </div>
        }




    </div>
}
--------------------------------------------------

Can we improve this situation ? , hope we can !

Your help is fantastic and really appreciated


Best Regards, 
Martyn

Hi, 

As I said you have to put the code right before the closing tag of the <div class="gallery sevenspikes-cloudzoom-gallery"> element.

Your code should look like this:

<div class="gallery">
  <div class="picture" id="sevenspikes-cloud-zoom" data-zoomWindowElementId="@Model.ElementId" 
   data-selectorOfTheParentElementOfTheCloudZoomWindow="@Model.SettingsModel.SelectorOfTheParentElementOfTheCloudZoomWindow" 
   data-defaultImageContainerSelector="@Model.SettingsModel.DefaultImageContainerSelector">
    <a href="@Model.DefaultPicture.FullSizeImageUrl" class="cloud-zoom" id="zoom1" rel="@Model.DefaultPicture.DefaultRelation">
      <img src="@Model.DefaultPicture.SmallImageUrl" alt="@Model.DefaultPicture.AlternateText" title="@Model.DefaultPicture.Title" id="cloudZoomImage" />
    </a>
  </div>
  @if (Model.Pictures.Count > 1)
  {
    <div class="picture-thumbs">
      @if (Model.SettingsModel.EnablePictureThumbnailsInCarousel)
      {
        <ul id="carousel" class="jcarousel jcarousel-skin-thumbs">
          @foreach (var picture in Model.Pictures)
          {
            <li><a href="@picture.FullSizeImageUrl" class="cloud-zoom-gallery" title="@picture.Title" rel="@picture.GalleryRelation">
              <img class="cloud-zoom-gallery-img" src="@picture.TinyImageUrl" alt="@picture.AlternateText" title="@picture.Title"/>
            </a></li>
          }
        </ul>
      }
      else
      {
        foreach (var picture in Model.Pictures)
        {
        <a href="@picture.FullSizeImageUrl" class="cloud-zoom-gallery" title="@picture.Title" rel="@picture.GalleryRelation">
          <img class="cloud-zoom-gallery-img" src="@picture.TinyImageUrl" alt="@picture.AlternateText" title="@picture.Title" />
        </a>
        }
      }
    </div>
  }




  <div><a href="@Model.DefaultPicture.FullSizeImageUrl" target="_blank">Download Picture</a></div>
</div>

I hope this helped !

Hi Mladen 

re copied code to page, works much better now
see: http://www.whiteopticsglasses.com

Users will have to select each specific model page
as it won't work when small image changes from small carousel
underneath.

But the specific model image dowload facility is now avaialble.
If you have anymore thoughts on improving this, please let me know

I thank you so much for your help and support, invaluable

Will be in touch,

Best regards
Martyn

Hi, 

We can make the link to be changed on change of the main image.

To do this, you have to find the /Plugins/SevenSpikes.Nop.Plugins.CloudZoom/Views/CloudZoom/CloudZoom.cshtml file and find the <div class="picture-thumbs"> element. Before its closing tag add this code:

<script type="text/javascript">
  (function() {
    $('.cloud-zoom-gallery').on('click', function() {
      $('.downloadPictureLink').attr('href', $(this).attr('href'));
    });
  })();
</script>

I hope this helped !

Hi again,

Can't get this to work, don't think if i have the code in the right place ?

code:

   <div class="gallery">
        <div class="picture" id="sevenspikes-cloud-zoom" data-zoomWindowElementId="@Model.ElementId" 
         data-selectorOfTheParentElementOfTheCloudZoomWindow="@Model.SettingsModel.SelectorOfTheParentElementOfTheCloudZoomWindow" 
         data-defaultImageContainerSelector="@Model.SettingsModel.DefaultImageContainerSelector">
            <a href="@Model.DefaultPicture.FullSizeImageUrl" class="cloud-zoom" id="zoom1" rel="@Model.DefaultPicture.DefaultRelation">
                <img src="@Model.DefaultPicture.SmallImageUrl" alt="@Model.DefaultPicture.AlternateText" title="@Model.DefaultPicture.Title" id="cloudZoomImage" />
            </a>
        </div>
        @if (Model.Pictures.Count > 1)
        {
            <div class="picture-thumbs">
                @if (Model.SettingsModel.EnablePictureThumbnailsInCarousel)
                {
                    <ul id="carousel" class="jcarousel jcarousel-skin-thumbs">
                        @foreach (var picture in Model.Pictures)
                        {
                            <li><a href="@picture.FullSizeImageUrl" class="cloud-zoom-gallery" title="@picture.Title" rel="@picture.GalleryRelation">
                                <img class="cloud-zoom-gallery-img" src="@picture.TinyImageUrl" alt="@picture.AlternateText" title="@picture.Title"/>
                            </a></li>
                        }
                    </ul>
               }
                else
                {
                    foreach (var picture in Model.Pictures)
                    {
                    <a href="@picture.FullSizeImageUrl" class="cloud-zoom-gallery" title="@picture.Title" rel="@picture.GalleryRelation">
                        <img class="cloud-zoom-gallery-img" src="@picture.TinyImageUrl" alt="@picture.AlternateText" title="@picture.Title" />
                    </a>
                    }
                }
 <script type="text/javascript">
  (function() {
    $('.cloud-zoom-gallery').on('click', function() {
      $('.downloadPictureLink').attr('href', $(this).attr('href'));
    });
  })();
</script>  
            </div>
        }
  
     <div><a href="@Model.DefaultPicture.FullSizeImageUrl" target="_blank">Download Picture</a></div>
  
    </div>
}

Hi Mladen

Just to let you know

I have tried putting the code in various places ?

but no succes

What do you think ?

Once again, Great appreciation for your help on this

Martyn - bizsol