Shutter Reloaded WordPress plugin

Shutter Reloaded is an image viewer for your website that works similarly to Lightbox, Thickbox, etc. but is lean and mean at only 10KB size. It does not require any external libraries. It has all standard features: resizing large images if the window is too small to display them with option to show the image in full size, unlimited number of image sets, pre-loading of neighbour images for faster display and very good browser compatibility.

This plugin also offers customization of colour and opacity settings for the background and colour for the caption, text links (if used) and the image count.

There are options to enable Shutter Reloaded for all links pointing to an image on your site (with option to exclude some pages), or just on selected pages. It can be enabled only for image links with a specific CSS class or by using Lightbox style activation (rell=”lightbox[...]“). It also can “auto-make” sets for each post/page.

Many thanks to Gerhard Lehnhoff, aufBlog.de for translating Shutter Reloaded to German and for the suggestions, and to Lise, liseweb.fr for the French translation.

Shutter Reloaded is easily integrated with Alex Rabe’s excellent NextGEN Gallery plugin. More info.

Demo:

Shutter Reloaded demo 450 X 325 Shutter Reloaded demo 600 X 450 Shutter Reloaded demo 900 X 600 Shutter Reloaded demo 1200 X 900

Some examples of sites that use Shutter: www.synthaetica.com, www.dawnne.com.

Usage:

Image sets are created by using class=”shutterset” to the link pointing to the image. Adding class=”shutterset” also activates the plugin, there’s no need to add both classes, shutterset and shutter. Multiple sets are created by using class=”shutterset_setname”, where setname can be any ascii word and/or a number. If using Lightbox style activation, sets are created by adding a set name in the square brackets. More help is available on the admin page of the plugin.

Screenshots:

Shutter Reloaded activation optionsShutter Reloaded activation optionsShutter Reloaded activation optionsShutter Reloaded activation optionsShutter Reloaded activation options

Download:

If you’re having any problems with Shutter try downloading the current development version. All bug-fixes, improvements and new features will be available there first. It should be stable enough for use, however some quick testing after activation would be a good idea. Please report any new bugs or incompatibilities with other plugins by commenting below.

Shutter Reloaded version 2.4

Changelog

Installation

Standard WordPress quick and easy installation:

  1. Download.
  2. Unzip.
  3. Upload to the plugins folder.
  4. Log in WordPress and activate the plugin.
  5. Go to “Options -> Shutter Reloaded” and set your preferences.

To upgrade: deactivate and delete the old version, then follow the above instructions to install the new one.

Frequently Asked Questions

  • I have … plugin installed that also uses javascript, will there be any conflicts/incompatibilities?

Since Shutter Reloaded does not use any js libraries, it does not interfere with them. It uses an onload event but has a function to play nice with other scripts that use onload too (from WordPress).

  • What will happen if my site visitors have Javascript disabled?

Then none of your links will be changed and will work as usual.

  • I have a thumbnail link but it points to a webpage, not to image. Will that affect Shutter Reloaded?

No, Shutter Reloaded looks only for links pointing to an image (with thumbnails or not), and will not change any other link, even if the link has the same css class used for activation.

528 Comments

  • #528 by ObamaPacman February 6, 2010 at: 4:11 pm

    Problem mentioned in #522 is SOLVED.

    Had to change some values of z-index to 0 in the third party plugin.

  • #527 by ObamaPacman February 6, 2010 at: 4:07 pm

    @Adric Antfarm,

    Yes I see the problem. Had to boot up my gaming pc for that. Clicking on shutter reloaded image will send the page to top. However it seems to affect one browser only.

    - Bug: Firefox 3.6 Vista 64 bit

    Works with
    Safari 4.04 OS X, Vista
    Firefox 3.57 OS X 10.4.
    IE8 Vista

    Therefore it could be a firefox bug…

  • #526 by Adric Antfarm February 6, 2010 at: 2:06 pm

    Obama;

    Actually you are my friend. I go to http://obamapacman.com/2010/02/diy-how-to-make-full-scale-apple-ipad-mockup/ , go to the middle of a story, click on an image, and when I close it, I am back the topic. Me and anyone else on the current version of Firefox who uses your site.

    I did however mean to cite Omar, as he did post the same problem.

  • #525 by ObamaPacman February 6, 2010 at: 11:35 am

    @Adric Antfarm,

    Not suffering any page reloading problem with Firefox.

    The problem I had is with Safari, Firefox, and another browser, where the stock quote changes (red or green) shows up above the shutter reloaded images.

  • #524 by Adric Antfarm February 6, 2010 at: 10:31 am

    The Firefox page reload thing (Omar, et al, mentioned) is a shame because I like this plug-in but cannot roll with annoying readers and will have to disable.

  • #523 by Omer February 4, 2010 at: 7:33 pm

    I’m having the same issue with Firefox 3.6. After shutter reloaded loads up, and I close it – the page forces all the way back to the top, rather than where i viewed the image.

  • #522 by ObamaPacman February 4, 2010 at: 7:19 pm

    Thanks for the plugin! Works great. However got a problem with another plugin.

    Just installed “stock-quote-sidebar” on my site. Somehow part of its outputs shows up ABOVE the lightbox images. Tried with multiple browsers and dev version of Shutter Reloaded but same problem. Would be greatful if you can take a look at it.

    For an example go to first image of this article: http://wp.me/pBLRG-1Da

  • #521 by youli February 2, 2010 at: 3:51 am

    And to add to post #520,
    The perpetual loading fix has been verified to work with the latest versions (as of this post) for Chrome, Firefox, Safari, IE8, and Opera.

  • #520 by youli February 2, 2010 at: 3:44 am

    Here’s a fix for the perpetual loading bug with Google Chrome 4.0.249.78.

    1) On line 154 that starts with “D.innerHTML”, remove the src attribute from the img element.
    2) Right after the same D.innerHTML statement, type:
    document.getElementById(“shTopImg”).src = shutterLinks[ln].link;

    The issue has to do with Google Chrome and an image’s onload attribute. The problem is fixed by stating the source after declaring the onload attribute. Maybe Google Chrome’s V8 Javascript Engine is too fast for its own good?

    Google Chromium 5.0.x does not exhibit this problem… So this fix won’t be needed when updates get pushed out.

  • #519 by Joan January 30, 2010 at: 10:30 pm

    Hi there,
    Shutter Reloaded is not working at all for me. I have installed via Wordpress, then saved the settings with the 2nd option active, (Shutter on all image links. Sets created with class=”shutterset”, “shutterset_setname” or rel=”lightbox[...]” will still work.) Most posts have images, so I thought the above would automatically display them. The post http://travelhorizonstyle.com.au/country/southern-europe/greece/classical-tour-with-meteora/ has all images with class=”shutterset” but a couple images will not display in Shutter Reloaded, eg Corinth Canal & Patras bridge.
    Do I have to put class=”shutterset” on all images to make it work ?
    Regards, Joan