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.

Demo

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

Download ShutterReloaded v2.0.1

Installation

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>
 <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>
 <script src="/shutter/shutter.js" type="text/javascript"></script>
 <link rel="stylesheet" href="/shutter/shutter.css" type="text/css" media="screen" />

Activation

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.

Customization

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. hello, nice script you’ve done, good job

    but how to disable this option “resize of large images if the window is too small”?

    I’ve tried to do it, but it can’t.

    thank you

    best regards

  2. works like a charm! but i’d love to have a leading zero for the image count in order to avoid a layout change when the number changes from 9 to 10. i’m a bit clueless where to fix this. any ideas?

  3. I’ve figured it out so you can disregard my desperate plea for help 😛 Apparently, if you have a OnLoad event in with a script in the header section, it will also cause problems. Thanks again for such a cool plugin.

  4. Hi. I love this plug-in and have been using it on my site for a couple of months. In the mean while, I’ve been working on my own theme and have unveiled it today, but I can’t seem to get Shutter to work with the new theme. I’ve tried your tips that you listed above but with no luck. If you have a few minutes to take a look at my source to see if anything stands out, I’d greatly appreciate it. Thanks again.

    Jason

  5. I put Shutter reloader in WordPress and it wors great. However in the gallery section each image is in its own box so Reloader will not use the arrows to cycle through the image. Does this sound correct to you and can anything be done.

    THANKS

    JIM

  6. Hello,
    I believe You need to add such a condition:
    if ( this.FS ) return;
    into Resize function to prevent some unpleasant behaviour in Explorer.
    During displaying fullsize images which have bigger width than window has, horizontal scroll appears and so onResize event of the window triggered, which in this case triggers Make function, that fits image to the window. And so user is unable to see fullsize images.

  7. Patrick, you can do that, no need to change the code. Try this init:

    shutterOnload = function() {
    	shutterReloaded.Init();
    
    	shutterLinks[999] = {
    		link: 'link/to/image.jpg',
    		num: -1,
    		set: 0,
    		title: 'caption, if you need it'
    	}
    	shutterReloaded.Make(999);
    };

    Lapicidae, looks like there’s a stuck script or link/image on the page that never finishes loading. This prevents Shutter from running in IE. Try to load it in the footer just before the end tag, instead of window.onload. To do that, remove the shutterOnload=… from the head and add:

    var shutterLinks = {}, shutterSets = {};
    shutterReloaded.Init('sh');

    in the footer.

  8. Hi,
    very great Script!!! I’ve integrated Shutter in phpBB3 and almost everything works great, but IE does not show any Pictures….

    In shutter.js I have changed line 50 to:
    if ( ext != ‘.jpg’ && ext != ‘.png’ && ext != ‘.gif’ && ext != ‘jpeg’ && ext != ‘.php’ ) continue;
    so that Shutter interacts with the phpBB Attachment links (eg. : /file.php?id=2&mode=view)

    You can try it on http://www.test.i-have-this.de/forum/viewtopic.php?f=2&t=3

    I hope You can help me – I don’t wanna switch to another Script 😀

    Regards, Lapicidae

  9. Hi
    first of all I want to thank you for this great script! One question, what do I have to change in the code so that an image appears on the first load of the page (onload)?
    Onload an image should be visible which is not visible on the page. It is something like an intro.
    Hope you can help me.

    Patrick

  10. Hello,

    I have changed the code a bit to loop the images instead of disabling the prev/nex button.

    If somebody needs the code, feel free to drop me a line.

  11. Hello,

    your Shutter Script is great, but I have discovered a minor flaw. It doesn’t work if you append a Session or ohter Parameter to the image link, which is necessary in dynamic pages.
    Lightboxscript hasn’t got that problem.

    Regards,

    AVS-PROS

Leave a Reply

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