#Jquery Spiral Image Plugin A plugin for generating an animated gallery with thumbnails displayed as a spiral.
For an example visit the demo page
##Installation The plugin script must be loaded after jquery and kinect.js.
<script type="text/javascript" src="scripts/jquery.min.js" ></script>
<script type="text/javascript" src="scripts/kinetic.js" ></script>
<script type="text/javascript" src="scripts/jquery.spiralimages-0.5.min.js"></script>
##Example A very basic example without any options.
For each image entry in the list, src is the thumbnail displayed in the spiral, the "data-spiral-media" value is the url to the full image displayed in the pop-up.
###HTML
<div id="container">
<ul id="list">
<li><img src="/images/200x300_thumb.jpg" data-spiral-media="/images/200x300.jpg" /></li>
<li><img src="/images/150x150_thumb.jpg" data-spiral-media="/images/150x150.jpg" /></li>
<li><img src="/images/200x200_thumb.jpg" data-spiral-media="/images/200x200.jpg" /></li>
</ul>
</div>
###Jquery
$(function () {
$("#list").SpiralImages();
});
The script replaces the contents of the containing object with a canvas element, be sure to set a width/height on the container.
##Paramaters Optional paramaters with default values:
$("#list").SpiralImages({
options: { rotateImages: false, useModal: false },
imageMod: { space: 8, opacity: 0.005, scale: 0.005, move: 0.9 },
spiral: { centerX: 0, centerY: 0, radius: 0, sides: 225, coils: 3, shrinkRadius: 60 },
borders: { normal: { color: "#596269", width: 5 }, hover: { color: "#006699", width: 10 }, selected: { color: "#000000", width: 10 } }
});
###options
- rotateImages: rotate each thumbnail to align with the shape of the spiral
- useModal: enable modal pop up when viewing images
###imageMod
Modify size/position of thumbnail images
- space: space between each thumbnail
- opacity: opacity increment
- scale: scale increment
- move: amount to move images during animation (reduce value for slower animation)
###spiral Modify size/shape/position of the spiral
- centerX: horizontal offset for the center of the spiral
- centerY: vertical offset for the center of the spiral
- radius: specify the radius of the spiral, by default it's automatically determined to fit within the containing object.
- sides:
- coils:
- shrinkRadius:reduce the final spiral radius
###borders Change the border size and color of thumbnail images
- normal: default border
- hover: mouseover border
- selected: currently selected thumbnail
##Methods
$("#list").SpiralImages.MoveNext(); //Animate to and highlight the next image in the list.
$("#list").SpiralImages.MovePrev(); //Animate to and highlight the previous image in the list.
$("#list").SpiralImages.StopAnim(); //Stop the current spiral animation and highlight the closest image.
$("#list").SpiralImages.MoveFirst(); //Animate to and highlight the first image in the list.
$("#list").SpiralImages.MoveLast(); //Animate to and highlight the last image in the list.
$("#list").SpiralImages.MoveTo(int _imageID); //Animate to and highlight a specific image (pass in the list index of the required image).
$("#list").SpiralImages.MoveToAndOpen(int _imageID); //Animate to and highlight a specific image (pass in the list index of the required image). Once the image is highlighted, the full image will open in the pop-up.