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

  1. Vertical Thumb image gallery carousel.
  2. Product Zoom
  3. Enlarged Gallery
  4. Mega Enlarge

Vertical Carousel

iZoom - ecommerce product zoomProduct Zoom

iZoom - ecommerce product zoom

Enlarged Gallery

iZoom - ecommerce product zoom

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!

 

Add Your Comment