General Discussion

Please post here anything related to Nop Cloud Zoom plugin

How do i make thumbnails side by side?

Hi,

Could you give us a link, so that we can take a look and advise you?

Best Regards,
Nop-Templates Support Team

Hi,

You need to make your product picture div a bit wider in order for your big images to fit.
In your styles.css on line 666, simply change the width from 300px to 400px

.product-details-info .picture {
float: left;
width: 400px;
margin-top: 25px;
margin-bottom: 15px;
}

Regards

Does the "Nop Cloud Zoom Plugin" function with the "default clean" theme that is provided with Nop Commerce V3.0.  I have installed the trial version of this plug-in and it is not functioning properly with this theme.  It was working prior to the V3.0 upgrade, however, it was using the Nop-Templates dark orange theme for V2.8.

The zoom function no longer functions (with the new theme).  After initially viewing a product image (with no zoom functioning), then choosing the home page, and subsequently returning to the product, the image is no longer displayed (Only a white square is seen in place of the image).  The problem goes away when the Plugin is disabled.  Any thoughts?

Hi rgraham,

The Nop Cloud Zoom plugin works with all of our themes and the Default Clean theme. I guess that you are using the same database, that you used in nopCommerce 2.8. The thing is that one of the settings of the Nop Cloud Zoom plugin has changed, due to the new HTML. And because you are using the same database, the setting was not changed, when you updated the plugin to the 3.0 version. To fix this problem, please go to the administration of the plugin and set the Default image container selector setting to .product-essential .gallery.

Ivan Stoyanov

Thanks Ivan,
I did get the Nop Cloud Zoom to function with the default theme, however, there appears to be more to the story.  There is no "Automatic Integration" selection in the settings for the v3.0 version, and the installation instructions for this version don't mention manual integration as in the earlier versions.

To get things working properly, I found it necessary to manually integrate the plugin by editing the Views\Catalog\ProductTemplate.SingleVariant.cshtml and the  Views\Catalog\ProductTemplate.VariantsInGrid.cshtml files to replace
@Html.Partial("_ProductDetailsPictures",Model)  with
@Html.Action("CloudZoom","CloudZoom",Model

Also, under the line <div class="overview"> div tag, add <div id="cloudZoomWindowElement" style="position: absolute"></div>

These are the same instructions for manual integration that were provided with earlier versions, however, the lines of code are no longer under the same div tag as before.

It is interesting to note that the "Enable Cloud Zoom as a Widget" setup had to be unchecked to prevent double (side by side) images from appearing, and using IE10 I had to go to compatibility mode to accomplish this while leaving the "Cloud Zoom" enabled.

One last comment, I seem to be finding randomly and on rare occasion that product images are being displayed as blank white areas.  This is rare and so far I have not been able to pin it down to a specific cause.

Please forgive my rambling here, and thanks for all your help.
Bob

Hi rgraham,

The Nop Cloud Zoom plugin no longer requires manual or automatic integration. The plugin now is integrated via widgets. In order for the widget integration to work you need to remove the code that you have added in the ProductTemplate views. Also make sure that the Enable As Widget and Enable settings are checked. Also please make sure, that your selector settings are the same as the ones that we show in our documentation: http://www.nop-templates.com/Help/NopCloudZoom/Version_3_0/lessons/Working_with_the_Nop_Cloud_Zoom.html

Ivan Stoyanov

Do you have a solution for ie10 compatibility view showing a duplicate of the image & it's thumbnails using nop version 2.8?
http://www.mobilemars.com/alabama-crimson-tide-usb-car-charger

Had the exact same problem in version 3.0, until I turned off the widget enable, and integrated the Cloud Zoom as described in my earlier post.  Tried setting things back as directed, but the problem returned.  The Cloud zoom is working perfectly on my site now with version 3.0 and the integration instead of the Widget.  Hope this helps.