Shutter Reloaded

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


Shutter Reloaded demo 450 X 300Shutter Reloaded demo 600 X 400Shutter Reloaded demo 900 X 600

Download ShutterReloaded v2.0.1


Upload the “shutter” folder to your web server and add the following to your header (in this order):

<script type="text/javascript">
 shutterOnload = function(){shutterReloaded.Init();}
 <script src="shutter/shutter.js" type="text/javascript"></script>
 <link rel="stylesheet" href="shutter/shutter.css" type="text/css" media="screen" />

Alternatively you can copy and paste the content of shutter.css to your site’s main css file, instead of loading it as a separate file.

If your site has html pages organized in subfolders, change the setting for Shutter’s buttons location in shutter.js from shutter/images/ to /shutter/images/ (add the starting slash). Then upload the “shutter” folder to your web site’s root directory (where your main index.html file is located) and include it on any page in any subfolder like this:

<script type="text/javascript">
 shutterOnload = function(){shutterReloaded.Init();}
 <script src="/shutter/shutter.js" type="text/javascript"></script>
 <link rel="stylesheet" href="/shutter/shutter.css" type="text/css" media="screen" />


By default Shutter is activated on all links pointing to an image, with thumbnail or not. There’s no need for any changes to the page, just add Shutter in the header. It will display each image separately and will create sets for image links that have either class=”shutterset”, class=”shutterset_setname” or rel=”lightbox[setname]”.

For controlling which images are displayed, Shutter can be activated with shutterReloaded.Init('sh'). Next step is to add class=”shutter”, “shutterset” or “shutterset_setname” to the links pointing to the images you want to display.

  • class="shutter" will display one image at a time
  • class="shutterset" will combine all image links in a single set
  • class="shutterset_setname", where setname is a short word and/or number, will create multiple sets on the page.

If you want to add css styles to the links, you can include a second class, but “shutterset” should be first. Example: class="shutterset_setname my-class".

Shutter Reloaded can also use Lightbox style activation and sets. You can activate it with shutterReloaded.Init('lb') and use rel="lightbox" for singe image display, or rel="lightbox[setname]" for sets of images.

There’s no limitations to the number of images or the number of sets on the page.


Shutter Reloaded has several customization options that can be selected by changing the values near the top of the shutter.js and shutter.css files. Follow the instructions in the comments there.

  • The “Previous”, “Next”, “Close”, etc. buttons can be either images or text.
  • The images count (“Image 1 of …”) can be hidden.
  • All colours, font sizes and typefaces can be set in shutter.css.
  • The icons for the image buttons can be replaced with transparent GIFs (unfortunately PNGs won’t work in IE6). The names should be the same, but the size can be different.

Frequently Asked Questions

Shutter doesn’t work at all. The images open in new pages.

Check the <body> tag on the page to see if it includes an “onload” event. If it does, that overwrites Shutter’s activation. Example:

<body onload="MM_preloadImages('/images...');"> 

An easy workaround is to add “shutterReloaded.Init();” to it, like this:

<body onload="shutterReloaded.Init(); MM_preloadImages('/images...');">

However the more compatible way to fix it would be to add

window.onload = function(){ MM_preloadImages('/images...'); }

just above “shutterOnload = …” in the header (inside the <script> tag). Then delete the “onload=…” from the <body> tag.

Shutter’s dark background doesn’t cover the whole page.

Add body {margin: 0; padding: 0;} to your stylesheet.

62 thoughts on “Shutter Reloaded”

  1. hi,
    i’m a real fan of shutter-reloaded–fine script and thanks for sharing it!
    I do have a question though: is there a simple way to make it work with svg (and svgz) images as well?

Leave a Reply

Your email address will not be published.