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.
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!
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.