PopCircle

Popcircle is a jQuery plugin for customize image gallery, it has the functionality to turn the html image elements into a pop circle.

Features

Installation

Circle around the edges

<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.

circle around half

<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

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 }