Sabines Zoom Gallery

Description

Have a nice inner zoom on your gallery images. It shows only the images, no clickable thumbs, and shows an inner zoom onmouseover. The zoom effect depends heavily on the resolution of the image you have uploaded; a bigger original gives a better zoom effect.

There are two configuration options to add to the shortcode:
1. the parameter ‘showsize’ and the desired size (thumbnail, medium or large): [sabineszoom showsize=medium]
2. the parameter ‘thickbox’ with the value 1: [sabineszoom thickbox=1]
or both: [sabineszoom showsize=medium thickbox=1]

If you want to use this gallery, simply use the [sabineszoom] shortcode in your post or page, or add <?php echo do_shortcode('[sabineszoom]'); ?> within the loop, to your template.
By default the ‘large’ image is used, if you want the ‘medium’ or ‘thumbnail’ to show, add the parameter ‘showsize’ like so: [sabineszoom showsize=medium]. Valid options are thumbnail, medium and large.

This is my first plugin, originally build for a customer who couldn’t find a gallery plugin that fitted his needs exactly:
no gallery of thumbnails that should be clicked on, this is just a list of the images attached to a post or page that have an inner zoom to the full image.

I used the jQuery plugin Image Zoom by elevate zoom for the inner zoom effect (see https://www.elevateweb.co.uk/image-zoom/examples#inner-zoom) .

Please let me know if you need help or have a feature request.

Screenshots

Installation

1. Unzip and activate
2. Set the desired size for your images on the Settings > Media page BEFORE uploading your images to your post or page
3. Open the editor of the post or page where you want the gallery to appear
4. Upload your picture(s) by clicking the Add media-button just above the buttonbar. DON’T USE the Insert into post button, the images are automatically connected to the post. The zoom effect depends heavily on the resolution of the image you upload; a bigger original gives a better zoom effect.
5. Add the shortcode [sabineszoom] to your post or page content
6. By default the large image is used, use [sabineszoom showsize=medium] if you want the medium size or [sabineszoom showsize=thumbnail] for the thumbnail
7. Publish the post or page.

FAQ

There’s no or minor inner zoom effect on my images

Check the dimensions of the original image and the dimensions set in Settings > Media. Your original image should be larger than the dimensions set for the large (or your preferred size) image in the Media settingspage.

How about captions?

If you have a text in the captions area of your image in the Media Library, it is shown on the picture. The text disappears on mouseover. If you don’t want the captions to be shown but don’t want to delete them, use a display: none; in your stylesheet.
You can change the style of the captions by overriding the css in your own stylesheet.

How do I use the medium or thumbnail size image instead of the large image in the gallery view?

Use [sabineszoom showsize=medium] if you want the medium size or [sabineszoom showsize=thumbnail] for the thumbnail

Reviews

Contributors & Developers

Changelog

0.3.1

• WP version update February 2015

0.3

• Added Thickbox option

0.2.1

• Renamed functions by adding a prefix to prevent confusion

0.2

• Added ‘showsize’ attribute to shortcode
• Enhanced script- and style enqueing

0.1

• First version April 2013