Image Magnifier

IMAGE MAGNIFIER

Add an interactive magnifying lens to an image so visitors can explore the details up close. Move the cursor across the image on desktop or touch and drag on mobile to see a magnified view.

HOW TO USE IT

1. UPLOAD YOUR IMAGE
Upload the image you want to magnify to your Showit Media Library.

Click the uploaded image and copy its image link.

2. ADD AN EMBED CODE BOX
Add an Embed Code box to your Showit canvas.

Resize the box to the size and shape you want your image to appear.

3. ADD THE CODE
Paste the supplied Image Magnifier code into the Embed Code box.

4. ADD YOUR IMAGE LINK
Your image link needs to be added in two places in the supplied code.

Look for:

src="YOUR IMAGE LINK"

and:

background-image: url("YOUR IMAGE LINK");

Replace YOUR IMAGE LINK with the same Showit image link in both places.

The same image must be used in both locations so the magnified view lines up with the original image.

5. PREVIEW YOUR MAGNIFIER
Preview your page and move your cursor across the image.

A circular magnifying lens will follow the cursor and show a zoomed-in view of the image.

On a touch device, touch and drag across the image to move the magnifying lens.

CUSTOMIZE YOUR MAGNIFIER

ZOOM

Find:

var zoom = 2;

This controls the magnification level.

2 = 2x magnification

Increase the number for a stronger zoom. Decrease it for a more subtle zoom.

LENS SIZE

Find:

width: 180px;
height: 180px;

These control the size of the circular magnifying lens.

Keep both numbers the same to maintain a perfect circle.

LENS BORDER

Find:

border: 3px solid #ffffff;

The first number controls the border thickness.

The hex code controls the border color.

You can replace #ffffff with your own color.

QUICK INFO

Difficulty: Easy
Requires: Embed Code + Image Link
Interaction: Hover or touch + drag
Image: Uses one image
Zoom: Customizable
Mobile: Yes
Coding knowledge: Not required