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-
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.
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.
 If you are running an e-commerce website with Woo-commerce, then it is necessary to zoom the product images for the better conversions. The more your customers will get complete or transparent info; the more will be the conversion rate. Therefore here, the Woocommerce Image Zoom plugin allows you to let users magnify the product gallery images and set you can configure the zooming feature easily and quickly.
This plugin comes with the free version and the premium one. The premium version plugin comes with an advanced setting panel so that you can configure the Woocommerce Image Zoom plugin as you need.
Free Version Plugin Features
- Show a more significant size product image on mouseover.
- Plug & Play.
- No need any other settings.
- Very lightweight.
- Work with all WordPress theme.
- Easy to use.
- Developer friendly & easy to customize.
- Powered by Elevate Zoom.
PRO Version Features
- Three different types of zoom.
- Support product variation images zoom.
- The product gallery images LightBox popup slider with zoom.
- Form a mobile device, on click product gallery image; the large product image will be replaced with the gallery image.
- Exclude Zoom for a specific product and specific category.
- Changeable zoom window and zoom lens size.
- Two different types of the zoom lens.
- Smooth zooming with Easing effect and FadeIn & FadeOut Speed.
- Advance setting panel with all necessary settings.
- Lifetime free update and free support.
- Video Documentation.
- Free installation ( if needed ).
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.
|
1 2 3 4 5 6 |
<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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
(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.
|
1 2 3 4 5 6 7 8 9 10 11 |
$(".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/
Leave a Reply