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!