jQuery Plugin For Animated Circular Popup Gallery Plugin - popcircle
File Size: | 62.7 KB |
---|---|
Views Total: | 9292 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
jQuery popcircle is a fancy jQuery plugin that allows to create a Circular Popup Gallery with customizable animations and easing functionality. The idea is to turn the Html image element into a Pop Circle that show the pop-circle around the trigger as full circle, half circle or quarter circle.
How to use it:
1. Include jQuery library and jQuery popcircle plugin on the page
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <script src="js/jquery.popcircle.1.0.js"></script>
2. Include jQuery easing plugin for easing functionality (optional)
<script src="js/jquery.easing.1.3.js"></script>
3. Create the html
<div class="box"> <div class="trigger" id="circle_btn"></div> <div class="popcircle"> <ul id="pops"> <li><a href=""><img src="images/blue.png"></a></li> <li><a href=""><img src="images/red.png"></a></li> <li><a href=""><img src="images/blue.png"></a></li> <li><a href=""><img src="images/red.png"></a></li> <li><a href=""><img src="images/blue.png"></a></li> </ul> </div> </div>
4. The CSS
.box { width: 350px; height: 500px; float: left } .trigger { width: 255px; height: 255px; position: absolute; z-index: 10; left: 100px; top: 100px; background-image: url(images/big_round.png); cursor: pointer; } .popcircle { position: absolute; z-index: 9; width: 500px; height: 500px; } .popcircle ul { list-style: none; padding: 0px; margin: 0px; height: auto; cursor: pointer; } .popcircle ul li { top: 177.5px; left: 177.5px; height: 100px; width: 100px; position: absolute; } img { border:0; }
5. The javascript
<script> $(document).ready(function(){ $('.trigger').click(function(e){ e.preventDefault(); $.popcircle('#pops',{ spacing:'15px', type:'half', // full, half, quad offset:1.95,// 0, 1, 2, 3, 4, 5, 6, 7 or 5.1 ease:'easeOutElastic', time:'slow' // slow, fast, 1000 } ); }); }); </script>
This awesome jQuery plugin is developed by dineshhv. For more Advanced Usages, please check the demo page or visit the official website.