Stacked Gallery is a jQuery gallery plugin that looks like flipping through a stack of photos.
###HTML Create a set of images on your page and give the DIV an ID. Make sure you specify a width and a height of the image. This will increase the rendering speed of the page and also allow the plugin to function properly.
<div id="my-gallery">
<img src="image-1.jpg" width="100" height="100" />
<img src="image-2.jpg" width="100" height="100" />
</div>###Javascript Initialize the plugin. Use the same ID you used to create the set of images in your HTML. Here we are using an ID called "#my-gallery."
<script type="text/javascript">
$(document).ready(function(){
$('#my-gallery').stackedGallery();
});
</script>You can also add in settings for the plugin in when initializing the plugin. For a full list of settings you can use with this plugin see the "Settings" area below.
<script type="text/javascript">
$(document).ready(function(){
$('#my-gallery').stackedGallery({
controls:false
});
});
</script>###Required Files Include the javascript and css files. Note that you may or may not need all of these files. See the exclusions below.
<link href="stacked-gallery/js/fancybox/jquery.fancybox.css" rel="stylesheet" type="text/css" />
<link href="stacked-gallery/css/stacked-gallery.css" rel="stylesheet" type="text/css" />
<script src="stacked-gallery/js/jQueryRotateCompressed.2.2.js" type="text/javascript"></script>
<script src="stacked-gallery/js/jquery.easing.js" type="text/javascript"></script>
<script src="stacked-gallery/js/jquery.stacked.gallery.min.js" type="text/javascript"></script>
<script src="stacked-gallery/js/fancybox/jquery.fancybox.pack.js" type="text/javascript"></script>If you are not using the controls setting you don't need to include Fancybox's CSS and JS files. Stacked Gallery uses the Fancybox jQuery plugin to show the full view of the image.
If you are using the default settings for 'transitionIn' and 'transitionOut' you don't need to include the easing javscript file.
| Parameter | Type | Default Value | Description |
|---|---|---|---|
| controls | bool | true | True if the controls show show when the image is hovered. If you turn this off no controls will show and instead you will navigate through the images just by clicking on them. |
| rotationMin | integer | -20 | Photos will rotate to a random location in a range from the rotationMin to the rotationMax. |
| rotationMax | integer | 20 | Photos will rotate to a random location in a range from the rotationMin to the rotationMax. |
| rotationSpeed | integer | 300 | The speed in milliseconds of how fast the images will move while rotating to a new location. |
| width | integer | 400 | The width of the gallery. Images will set a max-width to this number. |
| height | integer | 400 | The height of the gallery. Images will set a max-height to this number. |
| transitionIn | string | 'linear' | The type of easing to use when transitioning in. |
| transitionOut | string | 'linear' | The type of easing to use when transitioning out. |
[Download Stacked Gallery] (https://github.com/adrazich/stacked-gallery/downloads)
You can view a demo at [http://www.initanna.com/stacked-gallery] (http://www.initanna.com/stacked-gallery).
Internet Explorer 7+, Firefox, Chrome, Safari
Copyright (c) 2012 Anna Drazich
Dual licensed under the [MIT] (https://github.com/adrazich/stacked-gallery/blob/master/MIT-License.txt) and [GPL] (https://github.com/adrazich/stacked-gallery/blob/master/GPL-License.txt) licenses.
###More information about these licenses
- [MIT License Wiki] (http://en.wikipedia.org/wiki/MIT_License)
- [GPL License Wiki] (http://en.wikipedia.org/wiki/GNU_General_Public_License)