Thursday, December 8, 2011

wiggleIt

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.



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.

1 comment:

  1. 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