jQuery Roundup: Formwin, Three Sixty Slider, slideToucher

Note: You can send your plugins and articles in for review through our contact form.

Formwin

Formwin (GitHub: rocco / formwin, License: MIT) by Rocco Georgi started as a fork of Uniform, but is now very different. It removes legacy browser support (IE8+) and relies on CSS for things like rounded corners.

The required markup is documented in the...

Note: You can send your plugins and articles in for review through our contact form.

Formwin

The required markup is documented in the project’s readme. In general it relies on labels and spans:

<labelclass="formwintexts"><span>Label Text</span><inputtype="text"name="yourinput"></label>

It must be initialised to be used on a page, either with $.formwin.init(); or by setting $.formwinSettings. The init method accepts several options for configuring which CSS classes get used for things like active elements and hovering. This is similar to Uniform, and makes it extremely easy to drop into an existing project.

Three Sixty Slider

360

Three Sixty Slider (GitHub: creativeaura / threesixty-slider, License: MIT/GPL) by Gaurav Jassal allows multiple images to be displayed to give the illusion of multiple viewing angles. It features smooth animations, mouse and touchscreen support, and has a lot of tweakable options.

Basic usage is like this:

$('.product1').ThreeSixty({totalFrames:72,// Total no. of image you have for 360 sliderendFrame:72,// end frame for the auto spin animationcurrentFrame:1,// This the start frame for auto spinimgList:'.threesixty_images',// selector for image listprogress:'.spinner',// selector to show the loading progressimagePath:'/assets/product1/',// path of the image assetsfilePrefix:'ipod-',// file prefix if anyext:'.jpg',// extension for the assetsheight:265,width:400,navigation:true});

It’ll figure out the image names based on the settings, so the markup doesn’t need to include lots of img tags. There’s a live demo on creativeaura.github.com/threesixty-slider/.

slideToucher

slideToucher (GitHub: Yuripetusko / slideToucher, License: MIT) by Yuri Petusko is a swipe gesture plugin that is designed to be high performance. It supports horizontal and vertical swipes, and uses translate3d to produce smooth animations where available.

It expects markup with the slide and row classes, and is invoked with $(selector).slideToucher({ vertical: true, horizontal: true });. The author has posted a demo here: yuripetusko.github.com/slideToucher/.