I've been asked to share the image preview code from my blog so I decided to make a tutorial about it. It is called Shutter Reloaded and you can see it in action below (in the screenshot and also while you click it ;) - you need to wait for the whole webpage to load and only then click the image)
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 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.
How to implement Shutter Reloaded into your website / blog
1. The first thing you need to do is download the code from here.
2. Extract the contents of the archive and go to the shutter folder and open shutter.js with a text editor. You will find some variables with explainations on what they do in the upper part of the file, the explainations in that file are enough so I won't write it again here just make sure you enter the correct path to the shutter images directory in that file!
3. Upload all the files to a web host. If you do not have one, you can use the sharing option in Dropbox.
4. In your website, put this right before the </head> tag:
Now, when you post a picture like this:
5. If you want to post a gallery, on every image in that gallery, use the following class for the hyperlink:
For a gallery example (click the blue arrow at the bottom of the screen) and more advanced information, visit Shutter Reloaded's website.
NOTE: Wordpress users can install this Shutter Reloaded plugin.
2. Extract the contents of the archive and go to the shutter folder and open shutter.js with a text editor. You will find some variables with explainations on what they do in the upper part of the file, the explainations in that file are enough so I won't write it again here just make sure you enter the correct path to the shutter images directory in that file!
3. Upload all the files to a web host. If you do not have one, you can use the sharing option in Dropbox.
4. In your website, put this right before the </head> tag:
<script type="text/javascript">
shutterOnload = function(){shutterReloaded.Init();}
</script>
<script src="shutter.js" type="text/javascript"/>
<link href="shutter.css" media="screen" rel="stylesheet" type="text/css"/>rel='http://mywebsite.com/shutter/shutter.css'Now, when you post a picture like this:
<a href="http://i605.photobucket.com/albums/tt135/bloghome/2009-05-23_212331.png" target="_blank"><img src="http://i605.photobucket.com/albums/tt135/bloghome/th_2009-05-23_212331.png" alt="photobucket" /></a>5. If you want to post a gallery, on every image in that gallery, use the following class for the hyperlink:
class="shutterset_setname"<a class="shutterset_mygallery1" href="http://i605.photobucket.com/albums/tt135/bloghome/2009-05-23_212331.png" target="_blank"><img src="http://i605.photobucket.com/albums/tt135/bloghome/th_2009-05-23_212331.png" alt="photobucket" /></a>For a gallery example (click the blue arrow at the bottom of the screen) and more advanced information, visit Shutter Reloaded's website.
NOTE: Wordpress users can install this Shutter Reloaded plugin.
