Skip to content
Stacked Gallery is a jQuery gallery plugin that looks like flipping through a stack of photos.
JavaScript
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
stacked-gallery
GPL-License.txt
MIT-License.txt
README.md

README.md

Stacked Gallery

Stacked Gallery is a jQuery gallery plugin that looks like flipping through a stack of photos.

Setup

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.

Settings

ParameterTypeDefault ValueDescription
controlsbooltrueTrue 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.
rotationMininteger-20Photos will rotate to a random location in a range from the rotationMin to the rotationMax.
rotationMaxinteger20Photos will rotate to a random location in a range from the rotationMin to the rotationMax.
rotationSpeedinteger300The speed in milliseconds of how fast the images will move while rotating to a new location.
widthinteger400The width of the gallery. Images will set a max-width to this number.
heightinteger400The height of the gallery. Images will set a max-height to this number.
transitionInstring'linear'The type of easing to use when transitioning in.
transitionOutstring'linear'The type of easing to use when transitioning out.

Download

Download Stacked Gallery

Demo

You can view a demo at http://www.initanna.com/stacked-gallery.

Browser Support

Internet Explorer 7+, Firefox, Chrome, Safari

License

Copyright (c) 2012 Anna Drazich

Dual licensed under the MIT and GPL licenses.

More information about these licenses

Something went wrong with that request. Please try again.