Product Zoom Plugin
nopCommerce Product zoom plugin
Detail view of your product using product zoom plugin
Let’s assume that you have already downloaded our plugin package in .zip extention. Then unzipped it and opened the folder for your desired nopCommerce version. Now you have to install the Product zoom plugin in nopCommerce store. For installing plugin do the following :
To install a plugin:
- Upload the plugin to the /plugins folder in your nopCommerce directory.
- Restart your application (or click Reload list of plugins button).
- Scroll down through the list of plugins to find the newly installed plugin.
- Click on the Install link to install the plugin.
- The plugin is displayed in the Plugins windows (Configuration → Plugins → Local Plugins)
For more details check this link : http://docs.nopcommerce.com/display/en/Plugins
Now let's see how we can configure this plugin.
- For Product Zoom plugin configuration; there will be a menu item created under plugin section like the following snap
- Then you have to click here to set all the configuration.
- After that you will find something like the following snap.
- Now in next section we will describe all settings.
This setting define the zoom type. There are three types of zoom available in this plugin.
1. Window: In this zoom type a new window will be appear and the detail image with zoom option will be shown there. Check the following snap for better understanding.
Window Zoom Settings:
In this plugin we have lots of option for modifying window zoom from admin panel. These are given below:
- Enable zoom window fade in: This setting will add a fade in animation when the zoom window appear.
- Enable zoom window fade out: This setting will add a fade out animation when the zoom window disappear.
- Zoom window width: This setting will define zoom window width.
- Zoom window height: This setting will define zoom window width.
- Zoom window position: This setting will define zoom window position.
- Window border size: This settings will define zoom window border width.
- Enable zoom tint fade in: This settings will enable fade in animation in tint appearance.
- Enable zoom tint fade out: This settings will enable fade out animation in tint desappear.
- Enable tint: This settings will enable tint in the picture where zoom will be applied.
2.Inner: This settings will show the zoomed picture in same place. Check the following snap.
3.Lens: This settings will enable zoom with lens. When user mouse hover a picture where zoom plugin is applied the mouse cursor will be converted into a lens. Through that lens user can see the zoomed picture. Check the following snap:
Lens time zoom also have multiple settings to provide users lots of flexibility. Here are those settings given below:
- Lens Shape: Default value is 'square'. It can also be round (note that only modern browsers support round, will default to square in older browsers)
- Lens Size: It is used when zoom Type set to lens, when zoom type is set to window, then the lens size is auto calculated.
- Lens Border: Width in pixels of the lens border. Default value: 1.
- Lens Opacity: Default value is '0.4' .Used in combination with lens Color to make the lens see through. When using tint, this is overridden to 0
- Enable Contain Lens Zoom: Default value is 'false' for use with the Lens Zoom Type. This makes sure the lens does not fall outside the outside of the image.
- Enable Lens Fade In: This settings enable lens fade in animation.
- Enable Lens Fade Out: This settings enable lens fade out animation.
- Enable Lens Zoom: This settings enable lens zoom.
- Enable Zoom Lens: This settings enable zoom lens.
I have use the Elevated Zoom Jquery plugin to develop this plugin. So, most of the credits goes to them
Once again, thank you so much for trying this plugin. I'd be glad to help you if you have any questions relating to this plugin. No guarantees, but I'll do my best to assist. If you have a more general question relating to the plugin on nopCommerce, you might consider visiting the forums and asking your question in this "Item related" section.