Featured Image Zoom

Description

Add the [zoom] shortcode to a page, post or custom post-type post. If the post has a featured image it will displayed on the page, and when you move the cursor over the image, the image will be magnified with the image viewport remains constrained to the dimensions of the original image.

on a mobile/touch device the image will also be zoomable, but as there is no hover state this is achieved by means of a pinch & zoom action.

On my site you can see a demo of the plugin.

Usage:

Ensure that your post/page has a featured image defined.

Use a [zoom] shortcode to your page.

Some optional shortcode parameters can also be used.

=size=
The large image is used by default for the unzoomed image. Use the size parameter to use a different defined image size.

eg ‘[zoom size=thumbnail]’

=zoomsize=
The full image is used for the zoomed overlay. This can be changed using the zoomsize shortcode parameter.

eg ‘[zoom zoomsize=large]’

The image size definitions used for the the unzoomed and zoomed images should have the same aspect ratio and cropping.

=zoomin=
This can be used to tweak the level of zoom. The value must be a positive integer. The default is 6 so if the zoom level results in too much magnification on hover, try a lower value.

eg ‘[zoom zoomin=2]’

Screenshots

Installation

1. Upload the plugin folder to your ‘/wp-content/plugins/’ directory
2. Activate the plugin through the ‘Plugins’ menu in WordPress

FAQ

Where is the plugin’s admin page?

There isn’t one. This is a lightweight plugin with no options apart from the shortcode parameters so there is no need for an admin page.

How can I use this in a theme template

You can call the shortcode within the template:

echo do_shortcode( '[zoom]' );

Or you can directly use the shortcode’s function, passing an empty value for the parameter values to use the defaults. You can confirm that the plugin is active by first checking that the function exists:

    if ( function_exists('cc_zoom_featured_image') ) {
        echo cc_zoom_featured_image('');
    }

To use this with different values for any of the parameters, the parameter/value can be included in an array:

    echo cc_zoom_featured_image( array( 'zoomin' => '2') );

I am using the plugin on my site and I love it, how can I show my appreciation?

You can make a donation via my donation page

I would also appreciate a review on the plugin review page if you enjoy the plugin.

If it isn’t working for you, please refer to the documentation and existing posts on the plugin’s forum. If the existing answers do not address your issue, please post a question on the plugin support forum. If you have problems and leave a negative review before asking for support, that is very unhelpful and actually tells people more about you than about the plugin. Please don’t be that guy.

Reviews

Very nice plugin

TLCJohn May 27, 2020

Hi Michael, I have just singed in to www.remarpro.com to say what a great plugin you have designed. We have a detailed Burial map and your plugin has made it very easy to read. We were using a pluging called image magnifier but this is now sadly 5 years out of date. Your plugin worked just great, very simple to set up and I will be downloading it again for other maps and drawings, we need to let people see the detail of.. All the very best for now. Cheers John

Excellent!!

Jefe November 19, 2019 5 replies

You have to exclude images in Jetpack to work properly

Great Plugin

ecohostingservices August 10, 2019

This is a great plugin to zoom into a featured image such as a map. Zoom in too much ie 6 and the image becomes too blurred so 2 is all I need and it does the job perfectly.

Simple and light plugin, does exactly what it should do, no more no less

csandreas1 September 20, 2017

Thanks for the plugin and the great support, i was looking for a plugin to magnify my featured images when hover, only on post pages to show in detail the PC repairs my client does. This light plugin made it! Exactly what i wanted

I can not work code.

emrullahzengin September 3, 2016 1 reply

[zoom]? I am writing code. then add the image. It did not happen again. I want this code on work. Maybe if you were told we could understand the true video. guess you do not work with this plugin. Good Luck.

Contributors & Developers

Changelog

2.1.0

• Added ‘zoomin’ parameter to give more control over the zoom level

2.0.0

• Totally new version. Completely rewritten
• Now uses imagezoom instead of elevatezoom
• Featured image can now be placed anywhere in the page
• Different image size can be specified in the shortcode (defaults to large as in previous versions)
• No forced reloads on browser resize
• No experimental loupe mode

1.1.2

• Loupe mode is designated as experimental and unsupported due to issues with the script on IOS devices

1.1.1

• Added jQuery resize event script – so scrolling events in IOS do not trigger resize
• Additional zoom type: Loupe

1.1.0

• After resizing the browser, refreshes from cache rather than fetching from server
• Fixed iPhone continuous reload
• Only loads js files on pages that call the shortcode function

1.0.1

• Fix notices seen with WP_DEBUG enabled