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. Hey,

    Looks great, just what I want. I’m a real beginner here and not a lot of this makes any sense to me. I purchased a theme and once I installed it I realised I was going to have to do some learning if I wanted it to look anywhere near as good as they advertised it would – lets say I feel as though I have jumped in the deep water with only basic floating ability and with this plugin I feel like im swallowing water…..:p

    I downloaded the plugin through WordPress and have Shutter reloaded under “Appearance”. Now I would like to make a small gallery in my post with lets say 5 thumbnail images, each of which can be selected to initiate the Shutter gallery. Something like this site has – http://www.partfaliaz.com/

    Can someone please give me some beginner guidance?

    Thanks

  2. I’m using the nextgen gallery on wordpress and I was wondering if there was any way to click on an image in the gallery to go to the next one (facebook style) and click in the gray area to close the gallery. Thanks!

  3. How can I open an image in Shutter Reloaded from java script? So far I have gathered that using shutterReloaded.Make(xxx) would work bu then how do I get the number (xxx) of the link for Shutter Reloaded to use? Any tips?
    Uuwwjj

  4. is it possible to loop the images? What i mean is, if the set contains 15 images and i’m at image 15 to jump to image 1.

  5. Great script!
    I’m using the nextgen integrated version of shutter reloaded.
    I’m using the imagebrowser to navigate through the galleries.
    when I click the next or prev button, the next image gets loaded using ajax by shutter reloaded (I think) just perfect.
    I would like to add links within my text to load the next image as well using ajax, but have no clue how to manage it. The whole page always loads…
    Does anybody have an idea?
    Thx

  6. Hello
    Thanks for this image viewer. I managed to make it worked. But I have a problem with buttons (prev, next, resize etc.) They don’t appear. Because in your instruction, it is said to upload IMAGES folder. But my host files do not accept folders, therefore, all images buttons, js and css are staying in the same page.

    How can I change image dir in order for shutter to find the images buttons (next, prev, resize1, etc) properly?

    For eg: This directory must be in JS file : http://buttaliciouss.weebly.com/uploads/3/4/7/4/3474838/resize1.gif

  7. Hi!

    Thank you so much for this wonderful script.

    I am having the same problem with chrome browser, has anybody found a solution to it?

    Thank you so much in advance.

  8. Hello,
    There is some problems with Google Chrome browser. Sometimes images are not loaded or Loading continues forever and nothing shows.

  9. I love the script….its light, fast, and looks good. I’ve used it on a number of testsites (WP and others) but I’m having a really hard time trying to figure out how to make it work on a phpbb forum. I’ve tried the suggestions about taking the window.onload = etc.. etc.. and moving it just above the “shutterOnload = …” inside the shutter tag but no luck. It IS loading the shutter js its just not initilializing as far as I can tell. Does anybody have any experience with using shutter and phpbb3 or any suggestions ?
    Tia.

  10. My client wants the gallery navigation inside the same box as the caption. The js file is too complex for me. Any suggestions? An alternative would be to have nav flush under the Caption box. I’ve tried modifying the CSS with no success. – thx

  11. Hello

    I’m using shutter with next gen gallery on my wordpress blog and I would like to know if there is a way to stop the automatic Resizing of pictures ?

    Thank you for your work and any answer you could provide

    Fabien

  12. OMG, I solved it seconds after my post. I’ve been searching for a while for a way to force the script to initialize again, and I found it.
    I’m useing jquery to load the new images. I added this to my code, after it loaded the new content:
    try{shutterReloaded.init();}catch(e){}

    Full code:
    jQuery.post(jQuery(this).attr(“href”), {
    action: “galeria”,
    page: jQuery(this).attr(“id”)
    }, function(data) {
    div.html(data);
    try{shutterReloaded.init();}catch(e){}
    }
    );

    Hope I was able to help.

  13. Ok i solved the second question.
    But i got another one 😉

    If you load pictures via AJAX – the shutter script don’t work for images which are loaded in the ajax-area (e.g. tabs). I think the script is not executed again so shutter don’t know the images which are loaded via ajax afterwards. Adding class=”shutter” doesn’t work either.

    I hope you understand my problem, sorry for the bad english.

    Do you guys have any idea how i solve this problem?

  14. Hi there

    Nice Script – i’m using it a long time now but i got a view questions:

    1. Is it possible to add navigation in image-sets via arrow keys?
    2. The navigation-bar doubles it’s height while displaying images, larger then the height of the screen. the consequence is, that the Nav-Images are displayed wrong (positioning problem). What can i do to fix that?
    3. is it possible to close the image-viewer also when the user clicks on the background (the transparent bg-color)?

    i would really appreciate some help.

    Sumit

  15. Question: but how to disable this option “resize of large images if the window is too small”?
    Answer: “else this.FS = null;” -> “else this.FS = true;”

  16. Hi,
    As many said, this is the best script I’ve found for a complete and flexible image gallery. Great job!
    I just have a question regarding it, I would like to add the ALT / TITLE in the shutter pop up (possibly at the top of the image), it currently shows the description for each image at the bottom. I have spent a lot of time trying to add what I need with no success…

    NavBar = ” + prevlink + ” + nextlink + ” + HERE THE TITLE / ALT + ” + shutterLinks[ln].title + ” + imgNum + ”;

    I modified the above line but I don’t know the TITLE ALT parameter name (look where I wrote HERE THE TITLE / ALT), anybody can help if possible?

Leave a Reply

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