Click to Enlarge/Zoom Image Free Plugin for WordPress & HTML Website

Do you want to enlarge an image on WordPress website or static web page after click on it? Then in this post, we are going to show you how to expand or zoom an image on clicking the picture. The Picture enlarger plugins are useful and specially designed to let the visitors have a detailed view of images on your blog. The zoom or enlarge is needed many times like to see some information on the picture which is not seen in the standard size.

Not only that, an image enlarger plugin gives the users, complete information, clarity, smooth and detailed view of the products, photographs, and other artworks.

In this post, I have collected the best free and paid to click to enlarge image plugin both for a WordPress website and a static HTML website.

Click to Enlarge Image Demo

For the demo, I have shown you below an example of how it looks-

Click to Enlarge an Image on WordPress (Plugin)s

To click to enlarge or zoom a photo on a WordPress blog, you need to install an Image Zoom plugin. Here is the list of some best plugins for click to enlarge or Zoom a picture.

For Normal Blogs-

Wp Image Zoom

According to the author of the plugin, Wp Image Zoom plugin is a robust, modern and very configurable image zoom plugin. It helps quickly view images which creates a magnifying glass on your pictures.

Your reader will be assured to view complete details of your image to increase visibility and users experience and hopefully your revenue.

Features

• 4 Zooming Types – Inner zoom, Round lens, Square lens and outer zoom (with Zoom Window).
• Animation Easing Effect – the zooming lens will follow the mouse over the image with a sleek delay.
• Fade Effect – the zoomed part will gracefully fade in or fade out.
• Extremely configurable – control zooming lens size, border color, border size, shadow, rounded corner, and others
• Works with WooCommerce
• Works in Pages and Posts

Play the video for a quick overview of the Image Enlarger plugin.

Featured Image Zoom

To view in large your blog posts images, there is another plugin called Featured Image Zoom to enlarge the pictures.

Just install and active this plugin, no more settings are required. The photo will be magnified with the image viewport and remain constrained to the dimensions of the original image. If there is an image on the page or posts, then it will be displayed on the page whenever you move the cursor over the picture.

On Mobile devices, the image zoom function will also work, but there will be no hover state where you pinch it and zoom the image. In that case, you need to click on the image.

Demo: http://cubecolour.co.uk/featured-image-zoom/

Zoom For Woocommerce Products-

If you want to Zoom images in Woocommerce Products then below are the free plugins you can use.

YITH WooCommerce Zoom Magnifier

YITH WooCommerce Zoom Magnifier – This WordPress plugin offers to your readers to view products in complete, detailed and a chance to inspect in details the quality of your products. With YITH WooCommerce Zoom Magnifier you can add a zoom effect to all your product images on your store. Another good thing in this plugin is that this plugin adds a slider below the featured picture with the product gallery images.

Features Includes

Below are some excellent features of the YITH WooCommerce Zoom Magnifier plugin

• Show a more significant size product image on mouseover.
• Customize zoom area width and height and the size of the image to show a zoomed image.
• Enable or disable it on mobile devices.
• Add a slider showing product image thumbnails.
• Customize the slider behavior.

Note: This plugin comes with the both free and premium version. You can try the free version of the plugin, but if you need more functionality, then you should consider looking one the premium version.

WPB WooCommerce Image Zoom

Free Version Demo: http://demo1.wpbean.com/product/demo-product-9

Premium Demo: http://demo2.wpbean.com/?product=flying-ninja

 

CSS Click to enlarge image in lightbox (For HTML Website)

If you are not a WordPress user and want to add “click to enlarge image” feature on your custom website, then here is the list of 10 Jquery script for click to zoom image.

You can try implement of the all Jquery plugin, but here I have picked the best Touch-friendly Image Zoom Plugin For jQuery – Enlarge.js to show you.

Features of Touch friendly enlarge.js:

• Inline and flyout modes.
• Magnifying glass effect.
• Auto swaps out image sources depending on the screen size.
• Zooms image with mouse hover/click or touch tap/drag.
• Allows setting the magnification level.

How does it work?

Download the Enlarge.js plugin and follow the below instructions-

1. Import jQuery JavaScript library and the jQuery Enlarge.js plugin’s files into the document.

<link rel="stylesheet" href="src/enlarge.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous"></script>
<script src="src/enlarge.js"></script>
<script src="src/enlarge.init.js"></script>

2. Add your source images to the page following the markup structure like this below. The plugin also allows toggling the image source bigger or smaller. Ideally, this toggles the sizes attribute and enable the browser to select a new source from srcset. if it isn’tsrcset supported or sizes quality is not provided, the link ishref used for the more significant cause.

<div class="enlarge_pane_contain">
  <div class="enlarge_pane">
    <div class="enlarge inline-demo">
      <div class="enlarge_contain">
        <img src="1.jpg" 
             srcset="1.jpg 480w, 1.jpg 1200w, 1.jpg 2000w" 
             sizes="100vw" 
             id="test-img">
      </div>
      <a href="1.jpg" class="enlarge_btn" title="Toggle Zoom">Toggle Zoom</a>
    </div>
  </div>
</div>

3. DOM-ready auto-init of plugins. Many plugins bind to an “enhance” event to init themselves on dom ready, or when new markup is inserted into the DOM.

(function( $ ){
  $( function(){
    $(".enlarge.inline-demo").data("options", {
      // options here
    });


    $( document ).bind( "enhance", function(){
      $( "body" ).addClass( "enhanced" );
    });

    $( document ).trigger( "enhance" );
  });
}( jQuery ));

4. All default configuration options.

$(".enlarge.inline-demo").data("options", {
  button: true,
  hoverZoomWithoutClick: true,
  delay: 300,
  flyout: {
    width: 300,
    height: 300
  },
  placement: "flyoutloupe", // or inline
  magnification: 3
});

This is how you can add zoom features on a static or HTML website.

Demo: https://www.jqueryscript.net/demo/Touch-Friendly-Image-Zoom-jQuery-Enlarge/