Super Zoom Gallery

Yet another gallery plugin. I was looking for a simple gallery where you can select a thumbnail, see the complete picture in a acceptable size but also have the oppertunity to see the details of the image. I searched the web for a way to do this and found the AnythingZoomer, a jQuery Plugin by Chris Coyier. I used this jquery plugin for this WordPress plugin.

It works well for e-commerce sites like webshops or as a photo gallery.

It is easy to adapt if you would want to, but the default behaviour should be very much usable by anybody.

There is a settingspage to customize the images used and wheter or not to overwrite the default gallery shortcode.

If you want to use this gallery, simply use the “superzoomgallery” shortcode in your post or page, or enable the overwriting of the gallery shortcode and use the default wordpress “gallery” shortcode in your post or page.

For best results, make sure your theme is wide enough for the gallery.

The site I created this plugin for is http://www.liekebieke.nl, a dutch webshop with handmade designer bags and other things. It is used to enable the visitors to view the details of the products.

This plugin is hosted in the official WordPress repository, so you can download it!

Here is a little demo with some pictures from Iceland, Wroclaw in Poland and a couple of fighter jets (what more could you want).

91 thoughts on “Super Zoom Gallery”

Hi, I am trying to use this plugin. I am new with wordpress. I add the code [gallery] or [superzoomgallery] but not working!! 🙁 Another thing where do i upload the photos for the gallery? Please reply. Thanks!

Hello Sisir,
Thanks for using super zoom gallery. If you are new to WordPress things can sometimes look a bit complex. If you want to add a gallery somewhere in a post or on a page, you first have to add your photos to the post. You can do this by uploading your photos when you are adding or edititing a post or a page. There are some icons on top of the editor in WordPress to upload files.

After that, you can add the text [superzoomgallery] or, if enabled, [gallery] in your post/page. This is called a shortcode. This code is automatically replaced with the super zoom gallery and you should then see the gallery with your uploaded photo’s!

hi niels : I would like to change the thumbnails to a size of perhaps 60x45mm, but I’m not able to do – wether at wordpress-media-settings nor at .css file – sorry, but what is to do?
thank you for the fine plugin

After you added this to your theme, all new uploaded images will copied to a thumbname and will be automatically resized to 60×45 pixels. In the settings of the Super Zoom Gallery you can then select ‘my-own-very-nice-thumb’ as the imagesize to use for the thumbnails.

I’m so glad I found this plugin because it does exactly what I need it to do for a webstore and in a very elegant way 🙂

I’m having one issue though….I’m wondering if you might know why I don’t get my first image loading full size when you first click on the page. I only get the line of thumbnails and only when you click the first thumbnail does the image load. I want the first image to load by default but can’t figure out where to change that setting.

This plug-in is exactly what I need! Thank-you for sharing this with the
WordPress community. I do have a rookie question….

I am new to WordPress. I have placed an image on my page and then above
the image placed the shortcode ( [superzoomgallery] ). This all works well
during my testing of the page…I have performed numerous tests on the page….the problem is that now I am getting multiple images
showing up in my “gallery” and don’t want them in there.

In the first Post listed above, someone asked….
Another thing where do i upload the photos for the gallery? Please reply. Thanks!

Where do I modify the images that are showing up in the SuperZoomGallery?

This could be done by chaning the CSS. By changing the CSS for the class “zoom-box” you can reposition it. I don’t know if you use your own theme, if you do I suggest you use the CSS of that theme to make the necessary changes rather then the CSS of the plugin. This to avoid any problems when updating the plugin. If you don’t use your own theme I would advice to change the CSS of the plugin and keep a backup of the changes to avoid losing them when updating.

Hopefully this helps, if you have any other questions or need more specific help, don’t hesitate to ask me!

Hello Ted,
I’m using this plug-in on my website and I’m very satysfied. But I’ve just upgraded to the 0.4.2 version and it changed the order of the images. I tried to change order in the gallery option of the posts but nothing happened. How can I bring back the order that there was before?
thanks,
ilan

Thank you for using my plugin and asking this question. The order can be changed in the gallery options as you tried. It uses the order as defined in there since version 0.4.2. It could be that something else went wrong or that another plugin or your theme changes the order, but I doubt that. I hope that you can try it again to see if it works, otherwise let me know and I will try to help you out.

Hi there,
Please can you help, I used your plugin on this website since November last year with no problem at all, until now, when I updated my wordpress and it stopped working. I have updated your plugin to the latest version but it still won’t work.
I would really appreciate your help with this.
Thank you
Gemma

That sounds bad, I am sorry that you site stopped working. I looked at your site and I found a problem with some javascript from you theme. In my browser I get an error on line 55 of script.js. That could be the reason that the superzoom gallery stopped working. Maybe something changed in you theme?

Just downloaded your plugin and am so happy – thank you!! I have needed zoom functionality so much. A question for you … my “zoom” images are not zooming in really … they just showing a slightly larger image. Was hoping to get the super magnification shown on http://www.liekebieke.nl. Any ideas for me?

Also, I’ve inserted the images at “full” size, but the “non-zoom” image on the right is rending at “medium” size. Any reason you know of that I’m not getting the full size image on the left?

Glad you like it, if you upload your images in a large size it should work fine. Maybe the theme you use changes the image sizes or maybe the image sizes have been changed in the wordpress media setting.

In the super zoom gallery settings you can select the image you want to use for the thumbnails, the medium size image and the zoomed in image.

WordPress in itself is not a full featured webshop, but there are lots of plugins that can make it into one. Finding the right ones can be a bit difficult. I used a plugin called RSECommerce to transform regular posts into items for a webshop. This works pretty good! There are others that have more features and options. It depends really on what you need.

Howdy just wanted to give you a brief heads up and let you know a few of the images aren’t loading properly. I’m not sure why but I think its a linking issue. I’ve tried it in two different internet browsers and both show the same outcome.

Problem might be that somehow the medium sized image was not properly defined, probably by the theme you are using. On that line of code it tries to find the width of that medium sized image but gets zero. Hence the division by zero.

Thanks for letting me know about your problem, this helps to improve the quality!

This was a really great plugin. Then, all of a sudden, after a year of no issues (and no changes), it stopped working.

The problems are on a client website, http://AntiquesLewes.com, in the Gallery section. The image thumbnails still show and you can get a pop-up larger image, but no more zooming on a large image within the page itself.

Hello,
I use this great plugin on an ecommerce theme kiosk.
The problem is that I have the zoom-box above some buttons who become non-interactive. I have try to add the following code on the plugin file zoomer.jquery.js but it does not work.

Hello, first i want to say you Thanks!, it’s a very useful plugin for the website that i’m working, but i have a question, Why in the moment that i do clic on other image this take a time to change the zoom to show this picture, i want to say, I look for example: car123 ( a image ) , and I change to look car456, for a few seconds it is still showing me the before image. Why it is working like that?

You created a wonderfully elegant plugin. Is it possible to target the default woocommerce product gallery with your plugin or are you planning to add such a feature in the future?
I can hide the default gallery, insert a [gallery] shortcode somewhere in the description and move it to the right place. But that’s anything, but good programming. 😉

Do you have any suggestions on how to customize the superzoomgallery to make my products display like it is on the above Amazon page? Is there any other easier/better way to accomplish this style with or without the woocommerce plugin?

I don’t know much about the woocommerce plugin but I would think you should be able to achieve a similar effect using the SZG plugin without the need to change any JavaScript code. Maybe a little CSS here and there. Is you testsite accessible so I can take a look and give you some more tips?

Hi, I have installed your szg plugin successfully and it works fine except that it takes forever for the enlargements to load. also when switching from one image to another, still the enlargement of the previous image pops out while the enlargement you actually would like to view is still loading. my image file aren’t that big, 3024x3024pixels, so loading time should not be a problem. any suggestion?

I’m Susanna from China. I want to say thank you for your effort and the excellent SZG, it is what I need for our company web. But I’m new to WordPress, my problem is, all the thumbnail images show under the large image. I don’t know how to delete the image from post as I saw you have told others to do this. I’ve try to delete the images I don’t want to show from “Media”-“Library”, but i think it’s not the right way. So pls kindly help. By the way, I used paid theme “The 7”.

I have a quick question. I have installed the plugin in WordPress and configured it as per your instruction, that is, uploading a few images in a page and then writing the shortcode [superzoomgallery] after the images. What this does is, it shows the few images first, then it shows the gallery. However, I want only the gallery to be shown, not the individual images first.