Image zoom for e-commerce
Today the mission is to implement a product zoom for a popular e-commerce site which is using jQery for dom manipulations.
Lots of zoom plugins are available online wits lots of various features. Here am not going to give you a plugin and make you use the same for your implementation.
Am just going to explain how I implemented a product zoom by customizing already existing free plugins. sure, this combination and customization will give you a pro look for the product display page’s zoom image.
This customized product zoom has some remarkable function apart from the zooming product image. It holds the enlarged gallery and MegaEnlarge through which you can view the product more clear.
Just Download and go through the code I used simple HTML and Jquery in the way that everyone can understand. Go through the comments in zoom.js & index.html for more clarity.
Demo | Download
This jquery zoom implementation has four features
- Vertical Thumb image gallery carousel.
- Product Zoom
- Enlarged Gallery
- Mega Enlarge
Mega Enlarge with PanZoom
Hotlink for demo and the working example links are dropped below just check it out!
Demo | Download
Product Zoom: ElevateZoom [Free Plugin with numerous options]
Vertical Thum Gallery Carousel: rcarousel [ Support horizontal/vertical ]
Enlarged Gallery: Fancybox
MegaEnlarge : ImagePannign.
The comments section is opened for valuable suggestion.
Thanks for the awesome and precious contribution of zoom effect on any e-Commerce product page.
I was just implementing the plugin but I got an issue.
I have used Current version of jQuery.
I am getting error while clicking on big image (Click to open expanded view) in ZOOM.JS file
The error is ***Uncaught TypeError: Cannot read property ‘mobile’ of undefined
Kindly suggest if I am missing anything, so that I can get rid of the error.
Thanks in advance
how we will convert horizontally please tell me