4 Demos to Create Product Galleries with Zoom feature by jQuery

The jQuery Product Zoom plug-in

The xZoom plug-in which is based on jQuery is useful, particularly for the e-commerce websites with product galleries. The plug-in enables zooming a part of the focused image in different views.

For example, you may use the lens option where focused part of the image will zoom in. Similarly, the zoomed image can be displayed in an output window or in a fancy box and magnified pop-up.

You may use a number of images in product gallery, so a user may first select an image before using the zoom feature. Have a look at the demos and set up instructions below.

Demo1 Demo2 Demo3
Developer page Download plug-in

How to install the xZoom plug-in on your website?

You may download/install the plug-in by a number of ways.

Via Git:

git clone git@github.com:payalord/xZoom.git

git clone https://github.com/payalord/xZoom.git

Via Npm:

npm install xzoom

Via Bower:

bower install xzoom

You may also use the CDN links:

https://unpkg.com/xzoom/dist/xzoom.min.js

https://unpkg.com/xzoom/dist/xzoom.css

And finally, download the package from the GitHub website from the above given link or visit the developer page.

After downloading the plug-in, include the dependency files and use the markup and jQuery code for initiating the plug-in as shown in the demos below.

A demo with default options

Click the image or link below to see a live demo with default options. By default, the left image is selected and brought into view of the larger window above the thumbnails. Hover the mouse around in the big image area and you will see the Zoomed image towards the right window:

jQuery product zoom

See online demo and code

The markup:

 

See the complete code on the demo page.

A demo with output window

In this demo, the zoomed view of the product gallery image is displayed in the output window, have a look:

See online demo and code

Lens view demo

Rather than showing zoomed image in an output window or adjacent div outside of the large image in product gallery, you may use the lens view. In that case, the magnified view of the focused part of the image is displayed in a lens view.

jQuery zoom lens

See online demo and code

An example with magnifying popup

In this example, the product image’s magnified view is available in the adjacent div as well as in a pop-up window with the full view. The popup displays as you click the large image in a gallery. Once the popup is displayed with full view of the image, the user may also navigate through the other gallery images by using the right and left arrows:

jQuery zoom popup

See online demo and code

For learning more about this awesome plug-in, visit the developer page.