You can find a few example implemtations of it below. Each one opens in a new window. As I improve upon it I'll be posting updates.
- Horizontal example implementation of Wiggle It
- Vertical example implementation of Wiggle It
- Square example implementation of Wiggle It
- Download It (zip file containing compressed and uncompressed versions of the script with an example)
In it's simplest implementation, you can just call it out without any params.
$('.wiggleIt').wiggleIt();
The default param values are as follows:
$('.wiggleIt').wiggleIt({
'imageWidth' : 200,
'imageHeight' : 200,
'divisions' : 8,
'direction' : 'vertical',
'speed' : 250
});
If you set the direction parameter to vertical or square, the divisions parameter will be the number of vertical slices comprising the width of the image. If you set the direction to horizontal the divisions will be the number of horizontal slices comprising the height of the image. The minimal CSS involved is included within the HTML files. Obviously, the higher the number of divisions you specify the greater the demands on the browser. It works everywhere, even IE8.
Update: I've included a hide state for when an image is clicked, and even wrote a simple lightbox-type functionality with previous and next buttons to string the images together into a gallery.
ReplyDelete