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.
How to install the xZoom plug-in on your website?
You may download/install the plug-in by a number of ways.
git clone firstname.lastname@example.org:payalord/xZoom.git
git clone https://github.com/payalord/xZoom.git
npm install xzoom
bower install xzoom
You may also use the CDN links:
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:
<div class="large-12 column"><p><h2>A Demo with default options</h2></p></div>
<!-- default start -->
<section id="default" class="padding-top0">
<div class="large-12 column"><h3>Bring the mouse over car for Zoom</h3></div>
<div class="large-5 column">
<img class="xzoom" id="xzoom-default" src="images/gallery/preview/01_b_car.jpg" xoriginal="images/gallery/original/01_b_car.jpg" />
<a href="images/gallery/original/01_b_car.jpg"><img class="xzoom-gallery" width="80" src="images/gallery/thumbs/01_b_car.jpg" xpreview="images/gallery/preview/01_b_car.jpg" title="The title becomes the description!"></a>
<a href="images/gallery/original/02_o_car.jpg"><img class="xzoom-gallery" width="80" src="images/gallery/preview/02_o_car.jpg" title="The title becomes the description!"></a>
<a href="images/gallery/original/03_r_car.jpg"><img class="xzoom-gallery" width="80" src="images/gallery/preview/03_r_car.jpg" title="The title becomes the description!"></a>
<a href="images/gallery/original/04_g_car.jpg"><img class="xzoom-gallery" width="80" src="images/gallery/preview/04_g_car.jpg" title="The title becomes the description!"></a>
<div class="large-7 column"></div>
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:
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.
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:
For learning more about this awesome plug-in, visit the developer page.