jQuery Plugin For Animated Circular Popup Gallery Plugin - popcircle

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.