jQuery Plugin For Circular Popup Html Elements - Radiate Elements

Radiate Elements is a lightweight and dead simple jQuery plugin to popup hidden html elements around the center element as a full circle.

See also:

• Customizable Circle Menu Plugin with jQuery
• jQuery Plugin For Animated Circular Popup Gallery Plugin - popcircle

How to use it:

1. Create the html elements like list items you want to popup around the <ul> element.

<ul class="demo">
<li><a href="#"><img src="1.png"></a></li>
<li><a href="#"><img src="2.png"></a></li>
<li><a href="#"><img src="3.png"></a></li>
</ul>

2. Create some controls with jQuery Radiate Elements's methods to toggle the effect.

<input type="button" onclick="$('.demo').radiate('show')" value="Show">
<input type="button" onclick="$('.demo').radiate('hide')" value="Hide">
<input type="button" id="toggle" value="Toggle">

3. Load the jQuery javascript library and jQuery Radiate Elements Plugin on the web page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="lib/jquery.circular.radiate.js"></script>

4. Initialize the plugin with options.

<script type="text/javascript">
$('.demo').radiate({
distance: 200, // Distance from center element
delay: 500, // delay between each element
offset: -45, // offset in degree
angle: 'auto' // return angle in degree for each element
toggle:'#toggle' // jQuery selector to toggle show/hide
});
</script>

---

This awesome jQuery plugin is developed by hassansin. For more Advanced Usages, please check the demo page or visit the official website.