Ferris Wheel Button Plugin

---

A simple jquery plugin inspired from

Srikant Shetty's shot on Dribble
What you see in the right hand bottom corner of the page is the plugin !! :)

Download Source

Getting Started

---

Include the required files

CSS. Font awesome is required for Icons.Alternatively you can use glyphicons too.

<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="dist/ferriswheelbutton.min.css">

JS

<script src="//code.jquery.com/jquery.js"></script>
<script src="dist/jquery.ferriswheelbutton.min.js"></script>

Now simply call,

links = ['facebook','github','codepen','pinterest','wordpress'];
$.ferrisWheelButton(links);

NOTE : The plugin uses font-awesome for its icons.

Customizing the plugin

---

1. Available Settings

The following setings are available

options = {
size: 60,	//The Button Diameter
fontSize: 30,	//font-size for icons ideally keep it half
buttonBg: '#009688',	//The Button Background Color
buttonColor: '#ffffff',	//The Button Icon colors
transTime: '0.75s',	// Transition Timing
transTimingFuntion: 'cubic-bezier(.37,1.25,.95,1.18)',// Transition Timing function
fontIcon: 'fa',	// 'fa'-font awesome , 'glyphicon' - bootstrap glyphicons
primaryIcon: 'share-alt',	//The main Icon. 
closeIcon: 'times'	// Icon for close
}

icons = ['facebook','twitter']

$.ferrisWheelButton(options,icons);

2. Changing Icons

For font-awesome,

For glyphicons,

3. Adding Links

To add a link over any button , call:

$.ferrisWheelButton('addLink',icon,link);

Example
$.ferrisWheelButton('addLink','codepen','http://codepen.io/vivek3003');

Now the codepen button points to the link passed as param.

4. Acessing Buttons

To access all buttons , call:

$.ferrisWheelButton('getButtons'); // returns all buttons.

Example
$.ferrisWheelButton('getButtons').css({'border':'2px solid white'});
//Setting border on all elements

To access a single button , call:

$.ferrisWheelButton('getButtons','icon-name'); // returns button with 'icon-name'

Example
$.ferrisWheelButton('getButton','facebook')
.css({'background-color':'#3b5998','border':'2px dotted white'})
.on('click',function(ev){
	//Call stopImmediatePropagation to prevent button from closing
	ev.stopImmediatePropagation();
	alert('You clicked facebook!');
});

To Access via css

Use the class fwb_menu to access the main button

Use the selector div[data-icon=iconName] to select a particular button

Code used in this page

---

<script type="text/javascript">
	jQuery(document).ready(function($) {

		options = {
			'primaryIcon':'external-link'
		};

		icons = ['facebook','github','codepen','pinterest','wordpress'];
		$.ferrisWheelButton(options,icons);


		//Directly make them links
		$.ferrisWheelButton('addLink','github','https://www.github.com/vivek3003');
		$.ferrisWheelButton('addLink','wordpress','http://kaarthek.wordpress.com');
		$.ferrisWheelButton('addLink','codepen','http://codepen.io/vivek3003');


		//Use jquery on all buttons
		$.ferrisWheelButton('getButtons').css({
			'border':'2px solid white'
		});


		//Use normal jquery methods on any button indivdiually
		$.ferrisWheelButton('getButton','facebook').css({
			'background-color':'#3b5998',
			'border':'2px dotted white'
		}).on('click',function(ev){
			//Call stopImmediatePropagation to prevent button from closing
			ev.stopImmediatePropagation();
			alert('You clicked facebook!');
		});

		//And use method chaining
		$.ferrisWheelButton('getButton','pinterest').css({
			'background-color':'#cc2127',
			'border':'none'
		}).attr('title','Click here to Pin this');

	});
</script>