PopCircle

PopCircle is a Florid Jquery Plugin for Customize Image Gallery by turning the Html image elements into a Poping Circles.

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>

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>

Config

List of config parameters

Config Description
spacing Spacing will increase the space between the trigger and PopCircle. Spacing item will accept 'pixel' values

usage { spacing:'10px' }
type PopCircle popup type pattern can be modified using this parameter. 'type' will accept any of this three parameters - 'full', 'half', 'quad'

usage { type:'full' }
offset
offset popup starting point can be determined using this parameter, PopCircle offset parameter will acceptinteger or float values

usage { offset:2 }
ease Ease Ease parameter is to determine the animation type.

Here is 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 of the circles, PopCircle parameter will accept 'fast', 'slow' or millseconds

usage {time:'fast' } or {time:1000 }

Comments