xZoom is a Jquery library created to give a zoom effect to images on websites. It is very simple to use, since it is responsive supported, it works efficiently on mobile devices and compatible with most web browsers.

Since it can be personalized according to needs, it has a more advantageous use. Although the zoom effect is generally used to zoom gallery images on e-commerce sites, it can also be used on blog sites or any content site. In addition, the xZoom library has Apache License 2.0 certificate.

xZoom Effect Types

There are 5 different zoom effects provided by the library.

• Default Options
• Output Window
• Lens Options
• With FancyBox
• With Magnific Pop-up

1. Default Options

This effect provides zooming in the simplest way besides the existing image. In addition, for each image, a caption can be written under the image. The zoom ratio of the image changes when the middle wheel of the mouse is used during the zoom effect.

2. Output Window

Compared to the previous effect, it shows the screen it zooms on as smaller. The description title cannot be written under the image on this effect.

NOTE: The zoom screen normally appears just to the right of the images, but since the example is projected on Jsfiddle.net, it shows in a narrow area, so it slides the zoom screen to the bottom.

3. Lens Options

The lens option has a magnifying effect. The size of the lens can be adjusted with the middle wheel of the mouse or the touchpad.

4. With FancyBox

In the With FancyBox effect, when the user drags the mouse over the image, it zooms in on the image. If you click on the image, it opens the clicked image in a larger size. Apart from this, it is possible to switch from the opened large image to other images.

5. With Magnific Pop-up

The difference in the FancyBox effect of the Magnific Pop-up effect is that when the full-screen zoom that opens with one touch in the mobile view is tapped twice, a pop-up zooming effect occurs. But this view does not occur in the FanycBox effect.

xZoom Compatible Browsers

• IE6+
• Chrome
• Firefox
• Opera
• Safari

Source:

https://payalord.github.io/xZoom/