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).

 

90 thoughts on “Super Zoom Gallery”

  1. 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!

    1. 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!

      Hopefully this helps to get things working for you!

      Kind regards,

      Niels Doorn

  2. Hai

    I use plugin it working very fine thanks

    i need one thing if possible, when we click on a image thumb then its discription appear at the below zoom box.

    if it is possible

    Thanks in advance

  3. I have a couple questions for you:

    Is is possible to have a french version of your image(powered by: )

    I am looking to add images from a gallery to a shopping cart, any suggestions?

  4. no suggestion for hiding the empty zoom-box?
    im not good with js and stuff

    maybe with n if thing to check if its in use or not and then i can put another class for the un-used box to hide it by css?

    cheers!
    Can

    1. Just wondering if their is a fix for the below ( a few users have posted the same issue)

      ——–
      no suggestion for hiding the empty zoom-box?
      im not good with js and stuff

      maybe with n if thing to check if its in use or not and then i can put another class for the un-used box to hide it by css?
      ——-

      Regards,
      Brendan

  5. 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

    christof

    1. Dear Christof,

      The way to do this in WordPress is via the theme you are using. There is a wordpress function for this called: add_image_size. The function reference can be found here:

      http://codex.wordpress.org/Function_Reference/add_image_size

      Ususally this is done in the functions.php of the theme. For example like this:

      < ?php if ( function_exists( 'add_image_size' ) ) { add_image_size( 'my-own-very-nice-thumb', 60, 45, true ); } // the rest of the functions.php ?>

      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.

      Hopefully this will help you with your WordPress site!

      Kind Regards,

      Niels Doorn

    1. Hello Farhad,

      Yes, you can change the thumbnail size in the ‘media settings’ of WordPress. Go to ‘Settings’ and then ‘Media’ and there you will find the size of the thumbnails.

      An other option would be to register a new image format in your template, see the reply I wrote to Christof on this for instructions on how to do that!

      Kind regards,

      Niels

  6. Hi,
    Firstly – great plugin by the way – it’s exactly what I’m after.

    Now, I’m trying to use the plugin with the Custom Field Template (http://wordpress.org/extend/plugins/custom-field-template/) – which is quite a powerful plugin, and one that I really need to be using for adding images etc.

    Is there a way I can use your plugin without using the shortcode? Can I call it in with php in the single.php or post.php?

    Thanks 🙂
    Dave

    1. Dave,

      Thank you for the compliment!

      If you use the following PHP code in your templates, it should work:

      < ?php echo do_shortcode( '[superzoomgallery]') ?>

      Here is more information on this function.

      Hopefully this works!

      Kind regards,

      Niels

      1. I would love this feature, too… either an option for the caption, or some sort of display of the Title and/or description for the images.

        In fact, I could be willing to pay you something if you’d be willing to go ahead and code that feature. E-mail me if you’re able.

  7. Hi , is there a way to change order of images in the gallery. Somethig like this:

    And how can I put zoom-box inside image (medium). Example: I want zoom box to be 100x100px inside the main image

    1. I’ve thought about a zoombox, but not yet implemented it. As in your other message, It would be nice to have options like that and make it configurable. It’s on my backlog.

    1. At this moment, this is not possible. But it is a good idea, so I’ll try to build it into a next release! Thanks very much!

  8. Hi,
    I love your plugin!
    Can you tell me if is possible to click on the small image on the left and have a lightbox effect? Just on click.
    Sorry for my bad english.
    Thanks
    Paolo

  9. Hi!
    Great plugin! Really.
    I’m tryng to figure out how to attach 4 or 5 images to the Gallery via Custom Fields.
    Can you help me?
    Thanks
    Paolo

  10. Hello,

    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.

    Thanks for you help!

    1. Sorry for my late reply, do you have more then one gallery on this page? I know it does this when you have multiple galleries on a page…

  11. 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?

    Thanks again for sharing your talents!
    Ted

    1. Sorry for so many questions….I meant to include one other question…

      How do I reposition the “zoom” window? For clarification, I am talking
      about the “extra” window that shows the zoom effect for that particular image being examined.

      Thanks,
      Ted

      1. Hello Ted,

        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!

        Kind regards,

        Niels

    2. Hello Ted!

      I am glad you like the SZG,

      All images that are added to a post are shown in the gallery. If you don’t want some images to be in the gallery, you have to delete them from the post.

      Hopefully this helps!

      Kind regards,

      Niels

  12. Hello Niels, I would like to place multiple superzoomgalleries on one page, but I cannot. I tried to use exclude= but blank page, how I can do that ?
    Thanks for your help,

    JM.

  13. 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

    1. Hello 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.

      Kind regards,

      Niels

  14. Hey Guys,

    Just worked in a fix for those who want to be able to have interactive elements underneath the zoom-box (Can – was one of the users)

    In the Zoomer.jquery.js

    function selectImage(selector, wrapId, postId) {
    jQuery(function ($) {
    $(‘#’+wrapId).fadeIn();
    $(‘.gal-thumbnail-‘+postId).removeClass(‘gal-selected’);
    $(‘.zoom-box’).css({
    display: “none”
    });
    $(‘.gal-wrap-‘+postId).css({
    display: “none”
    });
    $(‘#’+wrapId)
    .css({
    display: “block”
    });
    $(selector).addClass(‘gal-selected’);
    });
    }

    Noticed i added:

    $(‘.zoom-box’).css({
    display: “none”
    });

    This should set the .zoom-box to display none

  15. 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

    1. Dear 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?

      I really hope this helps, if you need more help, please let me know.

      Kind regards, Niels

  16. Hi, Niels,

    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?

    Thanks so much!
    Michele

    1. Michele,

      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.

      Hopefully this helps!

      Kind regards,

      Niels

  17. Hello Niels,
    I’m new with WP. And I’m not so good at it. There are a lot of people who use your plugin. I would like to start a web shop.
    Where can I find an instruction manual so I can use it too.

    Kind regards,

    Raymond

    1. Hello Raymond,

      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.

      Hopefully you can build your webshop. Good luck!

      Niels

  18. 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.

    1. Glady,

      Did this problem resolve by using the latest version of Super Zoom Gallery? If not, could you send me a link to the site where this occurs?

      Kind regards,

      Niels

  19. i get error Warning: Division by zero in /home/late/public_html/wp-content/plugins/super-zoom-gallery/superzoomgallery.php on line 179

    i try both types of short codes and change the setting options and no good for me. Please help

    1. Anthony,

      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!

      Hopefully you can change medium sized image on the Super Zoom Gallery settings page and everything works. Otherwise, let me know.

      Kind regards,

      Niels

  20. 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.

    Any suggestions would be appreciated before I go find a new plugin.

    1. Eric,

      Sorry to hear about the issue on your clients website. Can you give me a link zo I can see if I can find out what’s wrong?

      Kind regards,

      Niels

  21. 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.

    $(‘.zoom-box’).css({
    display: “none”
    });

    Thank you in advance for your help!

  22. 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?

    1. Hello Alejandro,

      That’s because the new image is still loading. If you are using large images this happens. I haven’t come up with a good solutions yet, but thanks for reporting this problem.

      Kind regards,

      Niels

  23. Hi,

    your plugin is simply perfect for my purposes. I just need the big image (the one that has szg-main-photo class assigned) to be opened in a lightbox when clicked. I it possible?

    Thanks

  24. Hi,

    Your plugin is great but I am having a small issue with the thumbnails stacking on my page. How can I make sure that sit side-by-side? Also is there a way I can do a custom size for the large image?

    Thanks in advance
    Josh

    1. I have worked out how to use custom image sizes but still need to know how to stop the thumbnails from stacking (unwrap).

      Thanks

    1. Hi Josh,

      Have you allready fixed this problem? It doesn’t appear when I visit your site.

      Otherwise, please let me know.

      About the custom sizes, in the media settings you can define the size of the large image, it will then be used by the plugin. An other way would be to define custom sizes in your theme.

      Kind regards,

      Niels

  25. Hello Niels,

    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. 😉

    Regards,
    Sara

    1. Hi Sara,

      I have no experience with woocommerce so I don’t know. It would be a good idea to implement such feature, maybe woocommerce provides a hook to replace their product gallery.

      Niels

  26. Hi,

    I am creating a store on my test website and need a little help. I am new to jQuery and Javascript. My test site is using Itheme theme, however, my site that I would like to incorporate this store is using the Denitto theme. I installed the Woocommerce Plugin and is trying to get the Amazon effect using your Superzoomgallery plugin. Here is an example of how I’d like to set up the store without altering my other pages:http://www.amazon.com/IamTee-Autism-Dare-Different-T-Shirt-Blue-L/dp/B00AFJK9SO/ref=sr_1_1?ie=UTF8&qid=1383354504&sr=8-1&keywords=iamtee+autism.

    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?

    Thanks,

    Diamond

    1. Hi Diamond,

      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?

      Niels

    1. Hallo Nanda,

      Sorry voor de late reactie.

      Na het installeren kun je bij ‘instellingen’ het een en ander configureren van de SZG. Je kunt daar aanvinken dat de SZG als standaard gallery gebruikt moet worden. Als je dat aanzet, en je voegt aan een bericht of pagina een gallery toe, dan wordt automatisch de SZG gebruikt.

      Hopelijk lukt het je, en anders hoor ik het graag.

      Groeten,

      Niels

  27. Hi Niels,
    great plugin!
    For a client website I just would like the same effect you put in your website http://www.liekebieke.nl
    and the effect in your little demo too is quite good.

    Could you please tell me the setting you use just to obtain this results?
    Thumbnail image to use
    Medium sized image to use
    Image to use for zooming (full size)

    Thanx
    Elisa

    1. Hi Elisa,

      At Liekebieke I use the ‘use innerzoom’ feature with:

      large: 1024×1024
      medium: 600×600
      thumb: 300×300

      Good luck with your site, and thank you for using SZG.

      Niels

  28. 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?

    thanks, carlo

    1. Hi Carlo,

      Loading time depends on your server, the provider and the internetconnection of the client. The SZG can’t change that…

      So maybe your images could be compressed a bit more to speed things up?

      Hope this helps,

      Kind regards.

  29. Hi Niels,

    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”.

    Thanks with BR
    Susanna

  30. Hi Niels,

    I just came across this plugin and in one word, it’s awesome.

    Just what I needed for a new site.

    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.

    Can you please help me to sort this out?

    (I do not have much experience in coding.)

    Thanks in advance for your help!

  31. Hi Niels,
    great plugin!
    For a client website I just would like the same effect you put in your website http://doneristanbulrestoran.com
    and the effect in your little demo too is quite good.

    Could you please tell me the setting you use just to obtain this results?
    Thumbnail image to use
    Medium sized image to use
    Image to use for zooming (full size)

    Thanx
    Bugra

Leave a Reply

Your email address will not be published. Required fields are marked *