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:
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:
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.
Installation
Standard WordPress quick and easy installation:
- Download.
- Unzip.
- Upload to the plugins folder.
- Log in WordPress and activate the plugin.
- 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.
Oh thanks! Figured it out.. I replaced the custom loading.gif file with my own, ajaxload.info/ which offers a variety of loaders. I note that the GIF you provided is around 10KB, which is almost as much as the script!! I would recommend anyone willing to tweak this plugin to have a look at the site. I’ve replaced mine with the ‘Squares Circle’ animation. Once again, great plugin!
Prasannah, you mean class=”shutterset_1″, “shutter_1″ won’t make sets.
Great plugin! I run WP2.5.1 on my domain thats awaiting propagation. It works fine with the WP-Media-Flickr plugin.. But when I use class=”shutter_1″ for a couple of photos, it still shows them as individual images and I don’t get the left and right arrow buttons! Any advice?
wow. thx, I never saw those, as I was editing in Visual view.
@ovidiu looking at the html on the page, there are few empty link tags that point to these images. Edit the post and remove them.
@Frank think both scripts are fighting which one to display the link. Don’t see an easy solution except try to assign only one plugin to each link…
@Kristjan to achieve this, the code for WP’s gallery have to be rewritten. I’m planning to do that when I get some time.
@Marcus this looks good. There’s another option also: maybe try using a css with media=print to setup the popup, also I think there’s a way to open the print preview dialog in the browser, so the user can see what it’s going to look like on paper before printing.
Well, I’ve managed to hack together a half-decent print function, you can read about here – http://skullbit.com/news/shutter-reloaded-printing/ if you’re interested in incorporating it. Feel free to make it better of course, javascript is not my forte!
Hi,
I love the plugin and use it for my photoblog
http://www.klementi.pri.ee/photos/
I sometimes use the WP built in Gallery to insert more than 1 image to the post.
ShutterReload gets activated only when there are links to the imges, but WP Gallery adds link to another post page with the image. So in this case the plugin not really functions the way I’d like to.
I’d love that when using the WPGallery I could still use the plugin to show the full size images in the post.
Can you advise how I can still use the plugin when I use the wp gallery module. ?
Thanks
Kristjan
I realize that to print only an image you need to open it in it’s own window. What I’m asking is if you can add a print link to the overlay that links to this and adds the JS to popup the print dialog? I’m sure it’s not that hard, I’m just not well versed enough in JS to modify it myself. Thanks for any help you can provide.
Hi.
Have you tried the compatibility of plugin
http://ajaydsouza.com/wordpress/plugins/snap-preview-anywhere/#downloads
with shutterreloaded? For example: if you open a shutterset and close it again, then scroll up to the top of the page. In the upper left corner appers a “white” rectangle which is the placeholder div for snap shot plugin. It only disapears if you move the mouse cursor over a link which is snapshot enabled. I think it has something to do with the z-index css property.
It would be nice if you could check that behaviour, so that the usage of both plugins together would be possible.
At least. Many thank for developing the shutterreloaded plugin!
Greetings.
Frank
hi there,
I am a happy user of your plugin, but now I stumbled upon a small glitch. could you please check out this post: http://pacura.ru/blog/panoramas-from-the-proximity-of-sibiu/ there are two thumbnails inside this post, but if you click on one of them, you can cycle through 6 images and I have no clue why.
The post is old, I expect, I might have made a mistake, and uploaded the same picture severall times, but still, its strange.