jCircle

Free,Sweet and Simple javaScript library that will give you a new way to view images gallery or HTML contents.
It does not require any other javascript libraries. 

var myCircle=new jCircle();
myCircle.create();
View Demo

Demo

Result

Caption 1
Caption 2
Caption 3
Caption 4
Caption 5
Caption 6
Caption 7
Caption 8

Code

HTML 
<div id="circles-container">
    <div id="main-circle-content"></div>
    <div id="circle">
        <div class="min-circle" data-inside="min-circle">
            <a href="imgs/1.jpg">
                <img src="imgs/thumb_1.jpg" alt="">
            </a>
            <div class="content-text">Caption 1</div>
        </div>
        <div class="min-circle" data-inside="min-circle">
            <a href="imgs/2.jpg">
                <img src="imgs/thumb_2.jpg" alt="">
            </a>
            <div class="content-text">Caption 2</div>
        </div>
        ...
    </div>
</div>
javascript 
var circle=new jCircle({
        'container': 'circles-container',
        'circle': 'circle',
        'mainContent':'main-circle-content',
        'animateCircles':true,
        'speed':3,
        'mainViewStyle':'normal',
        'minCirclesEffectOver':'pulse',
        'contentType':'images',
        'stopOnOverMain':false,
        'mainContentOverAction':'normal'
    });
circle.create();

Code

javascript 
var textCircle=new jCircle({
        'container': 'circles-container-text',
        'circle': 'circle-text',
        'mainContent':'main-circle-content-text',
        'animateCircles':true,
        'speed':3,
        'mainViewStyle':'normal',
        'minCirclesEffectOver':'rotate',
        'contentType':'text',
        'stopOnOverMain':true
    });
textCircle.create();

Result

Title

Title

we are always keep for nice idea about sun and other copleted jobs about us.

EM is good way about tiger and it...

Is it possible to improve some taskes..this text have no meaning any way :).
About

About

we are always keep for nice idea about sun and other copleted jobs about us.

EM is good way about tiger and it...

Is it possible to improve some :)
Services

Services

Services always keep for nice idea about sun and other copleted jobs about us.

Bold is good way about tiger and it...

Is it possible to improve some taskes..this text have no meaning any way :).
Support

Support

Support always keep for nice idea about sun and other copleted jobs about us.

Yep is good way about tiger and it...

Is it possible to improve some taskes..this text have no meaning any way :).
Offers

Offers

Offers always keep for nice idea about sun and other copleted jobs about us.

is good way about tiger and it...

Is it possible to improve some taskes..this text have no meaning any way :).
Jobs

Jobs

Jobs always keep for nice idea about sun and other copleted jobs about us.

Bold is good way about tiger and it...

Is it possible to improve some taskes..this text have no meaning any way :).
Like

Like

Like always keep for nice idea about sun and other copleted jobs about us.

is good way about tiger and it...

Download

Download jCircle, downloaded file contains .js library, .css files required and .html file demo.

Donate to Support jCircle and our incoming projects.

Setup

Instructions

  1. Download files
  2. UnZip files and move jCircle.js and jCircle.css to your project directory or sub directory.
  3. Add jCircle.js and jCircle.css to your .html file:
    jCircle.js
    <script src="jCircle.js"></script>
    jCircle.css
    <link rel="stylesheet" href="css/jCircle.css">
  4. In your .html file where you want to add circled gallery create div block like this:
    <div id="circles-container">
    <div id="main-circle-content"></div>
    <div id="circle">
        <div class="min-circle" data-inside="min-circle">
            <a href="imgs/1.jpg">
                <img src="imgs/thumb_1.jpg" alt="">
            </a>
            <p class="content-text">Caption 1</p>
        </div>
        <div class="min-circle" data-inside="min-circle">
            <a href="imgs/2.jpg">
                <img src="imgs/thumb_2.jpg" alt="">
            </a>
            <p class="content-text">Caption 2</p>
        </div>
        ...
    </div>
</div>
  5. Create jCircle object and call .create method on it with or without options:
    var myCircle=new jCircle();
myCircle.create();

Pass options

You can change defaults by passing options in creation instance like this: 
new jCircle({
    animateCircles: false,
    mainContentOverAction: 'enlarge-view'
});
All options is Listed in the table in right.

Options

You may change some options in new jCircle(), All options is listed below:
Option Values
container ID for div that contains all gallery.
Default value:"circles-container"
circle ID for div that contains all circles
Default value:'circle'
mainContent ID for div that contains the big circle.
Default value:'main-circle-content'
minCirclesClass Class name for divs that are mini circles.
Default value:'min-circle'
animateCircles To make mini Circles animate (option value: true) or not (option value: false).
Available Values: true , false
Default value:true
animateStatus To make mini Circles animation played (option value: 'play') or paused (option value: 'pause').
Available Values: 'play' , 'pause'
Default value:'play'
speed Set delay time between animation.
Available Values: 1,2,3,4...
Default value:3
stopOnOverMain To stop animation on mouse over main circle (option value: true) or not (option value: false).
Available Values: true , false
Default value:true
stopOnOverMini To stop animation on mouse over mini circles (option value: true) or not (option value: false).
Available Values: true , false
Default value:true
minCirclesEffectOver Effect when mouse over mini circles.
Available Values: 'none' , 'pulse', 'zoomOutIn', 'flip', 'rotate'
Default value:'pulse'
contentType Set item's content type, images (option value: 'images') or text (option value: 'text').
Available Values: 'images' , 'text'
Default value:'images'
mainContentOverAction When mouse over main circle, inner Big circle may viewed in circle mode (option value: normal) or rectangle with rounded corners (option value: enlarge-view).
Available Values: 'normal' , 'enlarge-view'
Default value when {contentType:images}'normal' Default value when {contentType:text}'enlarge-view'

License

Free for Personal Projects and Learning, Donate 12$ Before Use jCircle in Commercial Projects

Support

If you noticed any bug Or have any question send me: salamj[@]gmail.com
And if you want A Paid Support like add some code or animations or add jCircle to your project..., Ask me at: salamj[@]gmail.com