Profile: bizsol

Hi Mladen

It's worked perfectly !!! - well done you

really really appreciated your help - support on this issue.

I need and will be upgrading my sites to latest nop versions
so may need a little help if things don't quite work out.

I'm also wanting to create a better and busier home page so if you know of any links to learning docs - resources, please let me know.

Be in touch, 
Thank You so much.

Martyn - Bizsol

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

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 

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 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 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 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 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