imagezoom Buy Now$19

This plugin works best with two images, a low resolution image to display on the page, and a high resolution image to use as the zoom. However, you can still use the plugin with just one image. BA Image Zoom is a robust, modern and very configurable image zoom plugin. It allows you to easily create a magnifying glass on your images, all from a very intuitive admin interface or shortcode.

Standard

You can use the default settings. Most of the settings for the zoom box can be overridden. The zoom works with either one or two images.

DETAILS OF THE CODE -----# HTML #-----
<a class="baZoom" href="images/big.jpg"><img src="images/small.jpg"></a>
-----# SHORTCODE #-----
[bazoom src="images/small.jpg" big="images/big.jpg"]

Inner Zoom

Zoom position can be inside the smaller image, useful if you would rather not obscure any other content.

DETAILS OF THE CODE -----# HTML #-----
<a class="baZoom" data-options='{"position":"inside"}' href="images/big.jpg" ><img src="images/small.jpg"></a>
-----# SHORTCODE #-----
[bazoom src="images/small.jpg" big="images/big.jpg" type="inside"]

Tints

Add a tint of any colour (including black or white) to the small image. The intensity of tint is fully customisable, shown here in yellow at 50%.

In this example, the movement smoothness is set to a higher value for a gentle drifting effect.

DETAILS OF THE CODE -----# HTML #-----
<a class="baZoom" data-options='{"tint":"#F90", "tintOpacity":0.5}' href="images/big.jpg" ><img src="images/small.jpg"></a>
-----# SHORTCODE #-----
[bazoom src="images/small.jpg" big="images/big.jpg" type="tint" tintColor="#F90", tintOpacity="0.5"}']

Lens Zoom

You can use the lens zoom setting to "Magnify the image". The image to the lest has been constrained so it tucks underneath the image.

DETAILS OF THE CODE -----# HTML #-----
<a class="baZoom" data-options='{"position":"magnify"}' href="images/big.jpg" ><img src="images/small.jpg"></a>
-----# SHORTCODE #-----
[bazoom src="images/small.jpg" big="images/big.jpg" type="magnify"}']

Soft Focus

Apply a subtle soft-focus effect to the small image. In this example, the zoom window position is specified as a div target which can be positioned anywhere. The movement smoothness is set to a lower value for a snappier feel.

DETAILS OF THE CODE -----# HTML #-----
<a class="baZoom" data-options='{"softFocus":true}' href="images/big.jpg" ><img src="images/small.jpg"></a>
-----# SHORTCODE #-----
[bazoom src="images/small.jpg" big="images/big.jpg" type="softFocus"}']

Perfect positioning

Positioning the window can be done in by setting a default position. Using this option, the zoom window can be made to appear at any one of 12 predefined positions around the page image.

DEMO


SHORTCODE

DETAILS OF THE CODE -----# TOP #-----
<a class="baZoom" data-options='{"position":"top"}' href="images/big.jpg" ><img src="images/small.jpg"></a>
[bazoom src="images/small.jpg" big="images/big.jpg" position="top"]
-----# TOP-START #-----
<a class="baZoom" data-options='{"position":"top-start"}' href="images/big.jpg" ><img src="images/small.jpg"></a>
[bazoom src="images/small.jpg" big="images/big.jpg" position="top-start"]
-----# TOP-END #-----
<a class="baZoom" data-options='{"position":"top-end"}' href="images/big.jpg" ><img src="images/small.jpg"></a>
[bazoom src="images/small.jpg" big="images/big.jpg" position="top-end"]
-----# RIGHT #-----
<a class="baZoom" data-options='{"position":"right"}' href="images/big.jpg" ><img src="images/small.jpg"></a>
[bazoom src="images/small.jpg" big="images/big.jpg" position="right"]
-----# RIGHT-START #-----
<a class="baZoom" data-options='{"position":"right-start"}' href="images/big.jpg" ><img src="images/small.jpg"></a>
[bazoom src="images/small.jpg" big="images/big.jpg" position="right-start"]
-----# RIGHT-END #-----
<a class="baZoom" data-options='{"position":"right-end"}' href="images/big.jpg" ><img src="images/small.jpg"></a>
[bazoom src="images/small.jpg" big="images/big.jpg" position="right-end"]
-----# BOTTOM #-----
<a class="baZoom" data-options='{"position":"bottom"}' href="images/big.jpg" ><img src="images/small.jpg"></a>
[bazoom src="images/small.jpg" big="images/big.jpg" position="bottom"]
-----# BOTTOM-START #-----
<a class="baZoom" data-options='{"position":"bottom-start"}' href="images/big.jpg" ><img src="images/small.jpg"></a>
[bazoom src="images/small.jpg" big="images/big.jpg" position="bottom-start"]
-----# BOTTOM-END #-----
<a class="baZoom" data-options='{"position":"bottom-end"}' href="images/big.jpg" ><img src="images/small.jpg"></a>
[bazoom src="images/small.jpg" big="images/big.jpg" position="bottom-end"]
-----# LEFT #-----
<a class="baZoom" data-options='{"position":"left"}' href="images/big.jpg" ><img src="images/small.jpg"></a>
[bazoom src="images/small.jpg" big="images/big.jpg" position="left"]
-----# LEFT-START #-----
<a class="baZoom" data-options='{"position":"left-start"}' href="images/big.jpg" ><img src="images/small.jpg"></a>
[bazoom src="images/small.jpg" big="images/big.jpg" position="left-start"]
-----# LEFT-END #-----
<a class="baZoom" data-options='{"position":"left-end"}' href="images/big.jpg" ><img src="images/small.jpg"></a>
[bazoom src="images/small.jpg" big="images/big.jpg" position="left-end"]

Gallery & Lightbox

You can attach a set of images to the zoom. Most HTML elements can be turned into a Zoom gallery elements. These will load different images into a Zoom instance.

As well as Zoom's own zooming, you can also make a large version of the image pop-up on the page by clicking/tapping. You can use any Lightbox/Modal with the Zoom. Here we use Bootstrap’s modal to show image to your site for lightboxes.

DEMO

SHORTCODE

DETAILS OF THE CODE -----# GALLERY - TOP #-----
FOLDER: [bazoom src="images/small" big="images/big" gallery="1" gallerymode="top"]
IMAGES: [bazoom src="s/1.jpg, s/2.jpg, s/3.jpg" big="b/1.jpg, b/2.jpg, b/3.jpg" gallery="1" gallerymode="top"]
-----# GALLERY - BOTTOM #-----
FOLDER: [bazoom src="images/small/" big="images/big/" gallery="1"]
IMAGES: [bazoom src="s/1.jpg, s/2.jpg, s/3.jpg" big="b/1.jpg, b/2.jpg, b/3.jpg" gallery="1"]
-----# GALLERY - LEFT #-----
FOLDER: [bazoom src="images/small/" big="images/big/" gallery="1" gallerymode="left"]
IMAGES: [bazoom src="s/1.jpg, s/2.jpg, s/3.jpg" big="b/1.jpg, b/2.jpg, b/3.jpg" gallery="1" gallerymode="left"]
-----# GALLERY - RIGHT #-----
FOLDER: [bazoom src="images/small/" big="images/big/" gallery="1" gallerymode="right"]
IMAGES: [bazoom src="s/1.jpg, s/2.jpg, s/3.jpg" big="b/1.jpg, b/2.jpg, b/3.jpg" gallery="1" gallerymode="right"]

Options

It offers a wide array of options to fine-tune tooltips exactly to your needs. It even comes with build in presets for common tooltip usecases, making it very easy to use.

DEMO

Change the Zoom Height
The Zoom Window width can be adjusted to any proportions.

Change the Zoom Width
The Zoom Window height can be adjusted to any proportions.

Spacer (30px)
You can adjust the distance of zoom window ith the thumbnail in pixels.

Captions
You can specify a source for the caption to show in the Zoom.

Animations
Getting more advanced, you can use actual CSS animations (@keyframes rules), for example using the animate.css package.

Custom CSS
The lens and zoom window can be altered using regular CSS. Here we have applied a thick coloured border with more rounded corners.

Specify a container
You can also insert the Zoom into a container. Specify a selector(ID) to place the zoom window anywhere on the page as here.

Mobile Zoom
Also, using the autoMobile: true option, inside mode can happen automatically if the page gets narrow on mobile devices.


SHORTCODE

DETAILS OF THE CODE -----# ZOOM SIZE(width/height) #-----
HTML: <a class="baZoom" data-options='{"zoomWidth": 400, "zoomHeight": 200}' href="images/big.jpg" ><img src="images/small.jpg"></a>
SHORTCODE: [bazoom src="images/small.jpg" big="images/big.jpg" zoomWidth="400" zoomHeight="200"]
-----# SPACER #-----
HTML: <a class="baZoom" data-options='{"spacer": 30}' href="images/big.jpg" ><img src="images/small.jpg"></a>
SHORTCODE: [bazoom src="images/small.jpg" big="images/big.jpg" spacer="30"]
-----# CAPTION #-----
HTML: <a class="baZoom" href="images/big.jpg" ><img src="images/small.jpg" title="This is a Caption"></a>
SHORTCODE: [bazoom src="images/small.jpg" big="images/big.jpg" title="This is a Caption"]
-----# ANIMATION #-----
HTML: <a class="baZoom" data-options='{"animate": "bounceIn"}' href="images/big.jpg" ><img src="images/small.jpg"></a>
SHORTCODE: [bazoom src="images/small.jpg" big="images/big.jpg" animate="bounceIn"]
-----# SPECIFY A CONTAINER #-----
HTML: <a class="baZoom" data-options='{"position":"YOUR_TAG_ID"}' href="images/big.jpg" ><img src="images/small.jpg"></a>
SHORTCODE: [bazoom src="images/small.jpg" big="images/big.jpg" position="YOUR_TAG_ID"]
-----# AUTO-MOBILE #-----
HTML: <a class="baZoom" data-options='{"autoMobile": 991}' href="images/big.jpg" ><img src="images/small.jpg"></a>
SHORTCODE: [bazoom src="images/small.jpg" big="images/big.jpg" mobile="1" mobilewidth="991"]