Image zoom for e-commerce
Folks this time lets make some fun with implementing product image zoom for e-commerce site by using jQuery and customizing some jQuery plugins. Now lots of new frameworks and libraries available for the JavaScript. Even though jQuery still hold its better position. It is still used because of its flexibility and easy manipulation of the dom elements.
Mission
Today the mission is to implement a product zoom for a popular e-commerce site which is using jQery for dom manipulations.
Mission Accomplished
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
Vertical Carousel
Product Zoom
Enlarged Gallery
Mega Enlarge with PanZoom
Hotlink for demo and the working example links are dropped below just check it out!
Demo | Download
Plugin Credits
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.
Happy Coding!
About Author
Suresh ThangarasuUI Developer who try something new in programming and try to keep me updated with latest programming trends."In vain have you acquired knowledge if you have not imparted it to others".
Hi,
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
Ajeet
Hello
how we will convert horizontally please tell me
js/Zoom.js:
$(“#gallery_pdp”).rcarousel({
orientation: “horizontal”,
…