Loupe Magnifying Glass for WPBakery Page Builder

See that?

See that circular thing that looks like a magnifying glass? That’s the loupe. Try dragging it around the image to zoom in on tinier details. After a while, the loupe returns to its original position. It works on all modern browsers and mobile devices as well.

$10.00
Back-to-School Set

$10.00
Secondhand Cameras

Loupe for Magnifying Glass is perfect for e-commerce sites as well. Check out this small, one-of-a-kind shop showcasing their products. The loupe allows for the shop’s customers to observe the finer details of the products before purchasing.

 Choose Between Click & Drag or Hover

Click & Drag

Follow Mouse (Hover)

Choose Your Loupe’s Style & Color

Shortcode for Non-Visual Composer Users

[image_loupe image_id='1' shine='shine']
Parameter Required Type Default Description
image_id Y number Your full sized image. Your image will be displayed as full sized inside the loupe magnifying glass. The same image will be scaled down to match the width of the container behind the loupe.
x Y number 25 The percentage x / horizontal position of the loupe on your image (from the left side of your image). The value should be between 0 to 100
y Y number 25 The percentage y / vertical position of the loupe on your image (from the top of your image). The value should be between 0 to 100.
shape text circle The shape of your loupe magnifying glass. This can be either “circle” or “square”
size number 200 The size of your loupe in pixels
hide_shadow number 0 If “1”, the loupe magnifying glass will NOT have shadows
shine text Put “shine” to add a shine to the loupe magnifying glass
border_size number 10 The thickness of the border of the loupe in pixels
border_color color rgba(255, 255, 255, .65) The border color of the loupe, note that you can also change the opacity. This can either be in hex e.g. “#ffffff” or rgba e.g. “rgba(0, 0, 0, 1)”
background_color color #ffffff The out-of-bounds background color. This is visible when the loupe goes past the image. This can either be in hex e.g. “#ffffff” or rgba e.g. “rgba(0, 0, 0, 1)”
el_class text If you wish to style particular content element differently, then use this field to add a class name and then refer to it in your css file.