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,

    thank you for the great lightbox, I’m loving it.
    I tried numerous others & yours is my fave.
    Just wishing now I could add Fotomoto so its visible on images in the lightbox…
    Has anyone managed to get Fotomoto to work on Shutter Reloaded –
    and if so how?
    Or is there some relatively easy code to add?

    best,
    Jude

  2. of course like your web site but you have to check the spelling on several of your posts.
    Several of them are rife with spelling issues and I to
    find it very troublesome to inform the truth nevertheless I’ll definitely come again again.

  3. Hello at all, at first many thanks to the admin for providing Shutter Reloaded under GPL conditions.

    Because there are no responses for the most wanted features of the community since 2008, I have made “Shutter Mobile”, optimized for Smartphones and Tablets with touchscreen. Follwing features are realized in Sutter Mobile:

    – Large buttons and spaces for “fat fingers” (for mobile devices)
    – The navigation links are above the images (for mobile devices)
    – Loop (after the last image follows the first and vice versa)
    – Keyboard navigation (arrow keys)
    – Prepared for integration into CMS and plugins

    Demo: http://www.ge-webdesign.de/shuttermobile/?Shutter_Mobile_Demo:Einzelbild_und_Bilderserien

    Unfortunately in German only at the moment – Gert

  4. Thank you for your informative blog post. I actually also like how you
    have your site designed. This is really very well organized.
    .

  5. Hi, How can you remove the text ‘next’,previous etc. so there will be only shown ‘close’ ?! Tnxx already

  6. First of all, fabulous slider, and works great with NextGen in WordPress.

    I am not a programmer, so I need some help, should be a minor one to most. I just need to know how to add more spaces in between the navigation arrows, so it’s easier to choose them
    when displayed on on an i_phone or Ipad, where viewers don’t have a mouse.

    Thanks !

  7. I’m having the same issue as:

    #45 by De Wet January 25, 2011 at: 8:02 am
    I’ve posted this question on all different forums, and I had NO response. So I’m just trying my luck here. When exiting the image viewer, is there anyway of NOT having it jump to the top of the page?

    Anyone know of a fix for this?

  8. When Adblock is on (Safari or Google Chrome) the picture moves down and the control goes to the sides. Please do we have a fix to this?

    Adding this to the normal css seems to kinda work.
    #shDisplay {top:1% !important;)

    Please drop me a mail if there’s a better fix 🙂
    anteus92{]gmail

  9. I like Shutter functionality…and so naturally now I would like to hack it!

    I’m using the WordPress Nextgen plugin and I had read some posts mentioning that there were problems with Thickbox.

    So my question is: can Shutter be tweaked to load content that isn’t an image? I’m thinking along the lines of being able to load an HTML/PHP page in an iframe (or maybe just populating a div).

    I looked through the .js file and most of it seems open to this, but there is obviously a lot of image-specific logic going on.

    What do you think? Suggestions?

  10. Thank you for a great gallery
    I have a wordpress site with nextgen-gallery plugin. I use the shutter-reloaded effect on singlepic gallery to show products. When I test it with the Internet Explorer 8, pictures will open normally with the shutter effect, but I cannot close them. Image just disappear for very short moment and then come right back. Only way to get out of the shutter effect is press back button on the browser.

    Gallery works fine with firefox, chrome, safari and even with IE8 on another computer. I’ve also noticed that it works even on this computer and browser, if the IE’s browser window is not maximized!

    I think that problem comes from here (shutter-reloaded.js):

    D.innerHTML = ” + NavBar +”;

    When I googled about this problem I found out that Internet explorer seems to have some kind of problem with javascript onclick command, but I couldn’t find any solution that could fix it.

    Has anyone had this same problem with the Shutter effect on Nextgen gallery? It’s driving me crazy 😀 I’m sorry if this should be posted on wordpress support forums, but no one there seems to understand my problem.

  11. Visitors Mayhem Review- the posts on this write-up is definitely a single of probably the most efficient substance that i?ve truly are offered throughout. I truly like your write-up, I will are available once more to confirm for new posts.

  12. Hey hey,

    I’ve posted this question on all different forums, and I had NO response. So I’m just trying my luck here. When exiting the image viewer, is there anyway of NOT having it jump to the top of the page?

    Any help would be much appreciated.

    d

  13. Hey,
    How can I do the following with shutter-reloaded…
    1. Key-board navigation of the image list…
    2. Next image when mouse is clicked on the image (left-click)…
    3. The next and prev link for next page in gallery to be on the left and right side of the thumbnail list,
    currently both the next(>) and prev (<) are below the thumbnail list, which is quite strange…

  14. Hello nice JS Shutter!

    Is there possible to add a keyboard navigation?
    left arrow = prev image
    right arrow = next image
    esc = exit from shutter

    ??

  15. Great plugin!

    For anyone who is interested in getting Shutter Reloaded to have the following functionality:
    – clicking on image proceeds to the next one in the set
    – the set loops (the last image in the set proceeds to the first image)
    – clicking on the background exits out of the viewer
    – the Previous and Next links don’t bounce with the image size changing (they remain stationary)

    Please feel free to contact me.

Leave a Reply

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