Popcircle is a jQuery plugin for customize image gallery, it has the functionality to turn the html image elements into a pop circle.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/jquery.popcircle.1.0.js"></script>
$('.trigger').click(function(e){
e.preventDefault();
$.popcircle('#pops',
{
spacing:'10px',
type:'full', // full, half, quad
offset:1.95, // 0, 1, 2, 3, 4, 5, 6, 7 or 5.1
ease:'easeOutElastic',
time:'slow' // slow, fast, 1000
}
);
});
.box{
width:500px;
height: 500px;
float:left;
}
.trigger{
width:255px;
height: 255px;
position:relative;
z-index: 10;
left:110px;
top:110px;
background-image:url(images/big_round.png); cursor: pointer;
}
.popcircle{
position:relative;
z-index: 9;
width:500px;
height:500px;
left:0px;
top:-250px;
}
.popcircle ul{
list-style:none;
padding:0px;
margin: 0px;
height: auto;
cursor: pointer;
}
.popcircle ul li{
top: 187.5px;
left: 187.5px;
height: 100px;
width: 100px;
position: absolute;
}
<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>
<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>
Please note: CSS script give above is just for a reference. Inorder to match with your UI requirements, you may need to change the css scripts.
<div class="box">
<div class="trigger2" id="circle_btn2"></div>
<div class="popcircle">
<ul id="pops2">
<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>
Please note: CSS script give above is just for a reference. Inorder to match with your UI requirements, you may need to change the css scripts.
Config | Description |
---|---|
spacing | Increase the space between the trigger and pop circles. Spacing item will accept 'pixel' values usage { spacing:'10px' } |
type | Pop up patter can be modified using this parameter. 'type' will accept any of this three parameters - 'full', 'half', 'quad' usage { type:'full' } |
offset | Pop up starting point can be determined using this parameter, offset parameter will accept integer or float values usage { offset:2 } ![]() |
ease | ease parameter is to determine the animation type. here the list of animation types
'easeInQuad','easeOutQuad','easeInOutQuad','easeInCubic','easeOutCubic','easeInOutCubic','easeInQuart','easeOutQuart', 'easeInOutQuart','easeInQuint','easeOutQuint','easeInOutQuint','easeInSine','easeOutSine','easeInOutSine', 'easeInExpo','easeOutExpo','easeInOutExpo','easeInCirc','easeOutCirc','easeInOutCirc','easeInElastic','easeOutElastic', 'easeInOutElastic','easeInBack','easeOutBack','easeInOutBack','easeInBounce','easeOutBounce','easeInOutBounce' usage { ease:'easeOutExpo' } |
time | time parameter is to determine the speed of the animation, paramete will accept 'fast', 'slow' or millseconds usage {time:'fast' } or {time:1000 } |