jQuery Plugin For Circular Popup Html Elements - Radiate Elements
File Size: | Unknown |
---|---|
Views Total: | 6547 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.