Buy now! Templates
[preview]

WELCOME TO
the documentation of CodeTabs

Date created: 27.06.2014
Date last updated: 25.11.2014
Author: thystudio
follow me on: codecanyon

QUICK GUIDE

Quick guide to set up most basic for active codetabs. The other section will provide detailed options.

1. HOSTING : upload code folder to your hosting, this folder includes main script, css and other parts of codetabs.

  • code

Other folders include :

  • documentation | documentation used in codetabs
  • templates | including the entire pure HTML templates
  • libs | including components used in theme
  • PSD | including all layered PSD templates


2. CODETABS FILES : insert main script, css of codetabs on site :

<!-- Main css cua codetabs, including styles, skins -->
<link rel="stylesheet" href="code/codetabs.css">

<!-- Effects ONE and OUT-IN in codetabs -->
<link rel="stylesheet" href="code/code.animate.css">

<!-- jQuery 1.7+ required - hosted from Google -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<!-- Main script of codetabs -->
<script src="code/codetabs.js"></script>


3. MARKUP HTML : insert codetabs html on site :

  • Class .ct → core css of codetabs.
  • Class .ct-flatbox → style flatbox for codetabs.
<div class="ct ct-flatbox">
    <!-- TAB 1 -->
    <div>
        <!-- Tab title -->
        <div class="ct-pagitem">Tabs title</div>

        <!-- Tab content -->
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
    </div>

    <!-- TAB others same TAB 1 -->
    <div>...</div>
</div>


4. SETTING OPTIONS : initialize the codetabs

HTML5 DATA
  • Setting options directly on the markup by HTML5 data
  • isAutoRun-on option: codetabs automatic worked after markup ready
<div class="ct ct-flatbox" data-codtabs="
    isAutoRun-on
    fxOne-stickVer speed-1200 pag-{ align: center } ">
    ...
</div>
JAVASCRIPT

Setting options by javascript like other jQuery plugins

<script>
    jQuery(document).ready(function($) {

        $('.ct').codetabs({
            fxOne : 'stickVer',
            speed : 1200,
            pag   : { align : 'center' }
        });
    });
</script>
With a few simple steps, codetabs ready to work!

View example

TABLE OPTIONS

begin

General options

Variable Default value Description
fxOne null Set the name of effect 'One'
fxOut null Set the name effects 'OUT' of effects 'Out/In'
fxIn null Set the name effects 'IN' of effects 'Out/In'
fx null Set other effects, including effect 'line' (powerline) and effect 'fade' classic.
fxEasing null Easing of effects in effect 'One' and 'Out/In'.
speed400 Duration of the effect. Unit millisecond.
margin 0 Distance between slides. Unit is px and supports distances left and right. Example:
  • margin-10-20 : 10px is left distance, 20px is right distance
  • margin-30 : 30px is left and right distance
idBegin begin Set the slide will appear as codetabs initialization, ID of slides started with 0. List of value option:

  • 'begin': begin position, equivalent to idBegin = 0
  • 'center': center position. If the total number of slides is an even number, then the position will be located near the left side. Example: Num of slide is 6, value of idBegin is 2
  • 'centerRight': similar 'center' value, but located near the right side. Example: Num of slide is 6, value of idBegin is 3
  • 'end': end position
  • 0 1 2 ...: specific value of the ID slide
preload 1 The number of slides(tabs) preloaded before the codetabs appears.
loadAmount 2 The number next slides(tabs) will load after codetabs appears, the slides will load in parallel.
show all Set codetabs initialized only on the specified device. Options include 'desktop', 'mobile' and 'all'.
showFrom 0 Set codetabs will appear in range width of the site. Range-width have 2 values 'min-width' and 'max-width'(optional).
     
isAutoRun false Option exclusively for HTML5 data. Codetabs is automatically initialized after markup have loaded.
isSlideshow false Turn on/off slideshow.
isNav true Turn on/off navigation tabs.
isPag false Turn on/off pagination(tablist) tabs.
isSwipe true Turn on/off features swipe on codetabs.
isKeyboard false Turn on/off keyboard navigation, left/right arrow to go prev/next slide.
isDeeplink false Turn on/off deeplink-linking features.
isCookie false Turn on/off cookie features.
name null The proper name for each codetabs in the site. Used to link components markup outside with main markup of codetabs.
ns ct- Prefix string attached to the class element generated by the codetabs.
canvasName canvas Set the name-class of the component 'canvas'.
viewportName viewport Set the name-class of the component 'viewport'.
slideName slide Set the name-class of the components 'slides'.
lazyName src Name to be replaced in 'data-src' on <img> tag using image lazyload function.

Options in pag object

Variable Default value Description
type tab Type of pagination(tablist), options include 'tab' and 'bullet'.
width null Set fixed width for pagItem. By default, the pagItem will get largest width in the pagItems.
height null Set fixed height for pagItem. By default, the pagItem will get largest height in the pagItems.
dirs hor Set the direction of pagination, options include 'hor'(horizontal) and 'ver'(vertical).
pos top Set the position of pagination compared to the content tabs. Options include 'top' and 'bottom'.
align begin Align of pagItems compared to pagination. Options include 'begin', 'center', 'end' and 'justified'.
speed 300 Time to transition of pagItem current automatically move to the center position.
ease easeOutCubic Easing transition of pagItem current automatically move to the center position.
sizeAuto null Set width(direction hor) / height(direction ver) of pagination compared to width/height of codetabs.
By default 'null': size of pagination depends on css.
Option 'self': size pagination is equal to size all pagItems combined.
Option 'full': size pagination is equal to size content of codetabs.
moreClass null Adding class in pagination markup.
wMinToHor 0 Setting exclusive for vertical direction. Minimum width of codetabs to switch to horizontal direction.
isActivedCenter true Turn on/off the current pagItem automatically moves into the center position of pagination.

Options in slideshow object

Variable Default value Description
delay 8000 Set wait time to move next slide of codetabs in slideshow. Unit is millisecond.
timer arc Set timer of slideshow. Options include 'arc', 'bar' and 'number'.
isAutoRun true Turn on/off auto-running slideshow after initialization codetabs.
isPlayPause true Turn on/off 'playpause' component in slideshow.
isTimer true Turn on/off 'timer' component in slideshow.
isHoverPause false Turn on/off features mouse over on codetabs, slideshow automatically pause.
isRunInto true Turn on/off features only slideshow when codetabs displayed on areas visible of browser.
isRandom false Turn on/off auto switch to random slide in slideshow.

Options in swipe object

Variable Default value Description
isMobile true Turn on/off swipe gestures on mobile devices.
isBody false Turn on/off swipe gestures in body content of tabs.
isBodyOnMobile false Turn on/off swipe gestures in body content of tabs but on mobile devices.

Separate options for each slide, use 'data-slide'

Variable Default value Description
fxOne null Set the name of effect 'One'
fxOut null Set the name effects 'OUT' of effects 'Out/In'
fxIn null Set the name effects 'IN' of effects 'Out/In'
fx null Set other effects, including effect 'line ' (powerline) and effect 'fade' classic.
speed 400 Duration of the effect. Unit millisecond.
delay null Set wait time to move next slide of codetabs in slideshow. Unit is millisecond.
classAdd "" Append more classes to codetabs when switch slide

Notes

  • Distinguish value-type by color :
    number - string - boolean - mixed value
  • HTML5 data - Easy setup options by Javascript Object Literal Notation as other plugins jQuery, same time support setup options by HTML5 data attributes.

    The structure options in HTML5 data : [key]-[value], options separated by the space.

    HTML5 DATA
    <!-- Setup options direct on tabs -->
    <div class="ct" data-tabs="fxOne-glueHor speed-1200 pag-{ align: center }">
        ...
    </div>
    JAVASCRIPT
    // Setup options in javascript
    $('.ct').codetabs({
        fxOne   : 'glueHor',
        speed   : 1200,
        pag     : { align : 'center' } 
    });
  • Options 'object' in HTML5 data similar as Javascript.

    HTML5 DATA
    <!-- Setup options direct on tabs -->
    <div class="ct" data-tabs="slideshow-{ delay: 5000, timer: bar, isRandom: true }">
        ...
    </div>
    JAVASCRIPT
    // Setup options in javascript
    $('.ct').codetabs({
        slideshow : {
                        delay    : 5000,
                        timer    : 'bar',
                        isRandom : true
                    }
    });
  • Options on each slide - is setup directly on each slide by 'data-slide' (HTML5 data attributes)
    Codetabs will priority get the option on each slide compared with same name the general options.

    <div class="cs" data-tabs="speed-400 delay-5000">
        
        <!-- slide custom setup -->
        <div data-slide="speed-600 delay-8000"> ... </div>
        ...
    </div>
  • Options have is prefix → boolean value.
    true/on/1 same result for true boolean value in HTML5 data attributes.
    false/off/0 same result for false boolean value in HTML5 data attributes.

EFFECTS

EFFECT OUT-IN

'Out-In' effect devided into 2 parts corresponding to the 2 slides(tabs) when switching. 'Out' effect applies for the current slide, and 'In' effect applies for the next slide.

effect out in

List of 'Out-In' effects :

Attentions
wave, juggle, flatten, bounce, flash, pulse, rubberBand, swing, tada, wobble, flip, bobUp, bobDown, bobLeft, bobRight, ringLeft, ringRight, ringUp, ringDown, shake, shakeSlow, shakeLittle, shakeHard, shakeHor, shakeVer, shakeRotate, shakeOpacity, shakeCrazy

Basic - Specials
fadeOut, fadeIn, bounceOut, bounceIn, roSlit, newspaperOut, newspaperIn, holeOut, flipXOut, flipYOut, flipXIn, flipYIn, lightSpeedOut, lightSpeedIn, hinge, rollOut, rollIn, magic, swap, twistUpIn, twistDownIn, puffOut, pullIn, swashOut, swashIn, vanishOut, vanishIn, foolishOut, foolishIn, bombLeftOut, bombRightOut

Pull - Glue - Perspective
pullOut, pullIn, pushOut, pushIn, pullBounceOut, pullBounceIn, pushBounceOut, pushBounceIn, pullSoftOut, pullSoftIn, pushSoftOut, pushSoftIn, glueLeftOut, glueRightOut, glueUpOut, glueDownOut, glueLeftIn, glueRightIn, glueUpIn, glueDownIn, perspectiveLeftOut, perspectiveRightOut, perspectiveUpOut, perspectiveDownOut, perspectiveLeftIn, perspectiveRightIn, perspectiveUpIn, perspectiveDownIn

Move - Fan - Scale
moveLeftBehind, moveRightBehind, moveLeftFront, moveRightFront, moveShortLeftBehind, moveShortRightBehind, moveShortLeftFront, moveShortRightFront, fanBehindUp, fanBehindDown, fanFrontUp, fanFrontDown, soEdgeLeftOut, soEdgeRightOut, soEdgeUpOut, soEdgeDownOut, soEdgeLeftIn, soEdgeRightIn, soEdgeUpIn, soEdgeDownIn

Slide
slideLeftOut, slideRightOut, slideUpOut, slideDownOut, slideLeftIn, slideRightIn, slideUpIn, slideDownIn, slideOneLeftOut, slideOneRightOut, slideOneUpOut, slideOneDownOut, slideOneLeftIn, slideOneRightIn, slideOneUpIn, slideOneDownIn, slideShortLeftOut, slideShortRightOut, slideShortUpOut, slideShortDownOut, slideShortLeftIn, slideShortRightIn, slideShortUpIn, slideShortDownIn, slideFadeLeftOut, slideFadeRightOut, slideFadeUpOut, slideFadeDownOut, slideFadeLeftIn, slideFadeRightIn, slideFadeUpIn, slideFadeDownIn, slideBounceLeftOut, slideBounceRightOut, slideBounceUpOut, slideBounceDownOut, slideBounceLeftIn, slideBounceRightIn, slideBounceUpIn, slideBounceDownIn, slideTinLeftOut, slideTinRightOut, slideTinUpOut, slideTinDownOut, slideTinLeftIn, slideTinRightIn, slideTinUpIn, slideTinDownIn, slideShakeLeftOut, slideShakeRightOut, slideShakeUpOut, slideShakeDownOut, slideShakeLeftIn, slideShakeRightIn, slideShakeUpIn, slideShakeDownIn, slideScaleLeftOut, slideScaleRightOut, slideScaleUpOut, slideScaleDownOut, slideScaleLeftIn, slideScaleRightIn, slideScaleUpIn, slideScaleDownIn, slidePullLeftOut, slidePullRightOut, slidePullUpOut, slidePullDownOut, slidePullLeftIn, slidePullRightIn, slidePullUpIn, slidePullDownIn

Rotate
roLeftOut, roRightOut, roUpOut, roDownOut, roLeftIn, roRightIn, roUpIn, roDownIn, roDownLeftOut, roDownRightOut, roUpLeftOut, roUpRightOut, roDownLeftIn, roDownRightIn, roUpLeftIn, roUpRightIn, roSoftLeftOut, roSoftRightOut, roSoftLeftIn, roSoftRightIn, roTwistLeftOut, roTwistRightOut, roTwistUpOut, roTwistDownOut, roTwistLeftIn, roTwistRightIn, roTwistUpIn, roTwistDownIn, roWheelLeftOut, roWheelRightOut, roWheelUpOut, roWheelDownOut, roWheelLeftIn, roWheelRightIn, roWheelUpIn, roWheelDownIn, roFlitLeftOut, roFlitRightOut, roFlitUpOut, roFlitDownOut, roFlitLeftIn, roFlitRightIn, roFlitUpIn, roFlitDownIn, roFoldLeftOut, roFoldRightOut, roFoldUpOut, roFoldDownOut, roFoldLeftIn, roFoldRightIn, roFoldUpIn, roFoldDownIn, roRoomLeftOut, roRoomRightOut, roRoomUpOut, roRoomDownOut, roRoomLeftIn, roRoomRightIn, roRoomUpIn, roRoomDownIn, roEdgeLeftOut, roEdgeRightOut, roEdgeUpOut, roEdgeDownOut, roEdgeLeftIn, roEdgeRightIn, roEdgeUpIn, roEdgeDownIn, roEdgeSoftLeftOut, roEdgeSoftRightOut, roEdgeSoftUpOut, roEdgeSoftDownOut, roShortPushLeftOut, roShortPushRightOut, roShortPushLeftIn, roShortPushRightIn, roShortPullLeftOut, roShortPullRightOut, roShortPullLeftIn, roShortPullRightIn

HTML5 DATA
<div class="ct" data-tabs="fxOut-roSoftRightOut fxIn-pullIn"> ... </div>
JAVASCRIPT
$('.ct').codetabs({
    fxOut : 'roSoftRightOut',
    fxIn  : 'pullIn'
    
});
View example

EFFECT ONE

The easiest way to set effects compared to 'Out-In' effects.
'One' effects is combination 2 effects 'Out' and 'In' by css. 'One' effects also support 2 effects when moving next or prev slide.

effect one

List of 'One' effects :

glueHor, glueVer, foldHor, foldVer, foldFromHor, foldFromVer, roomHor, roomVer, flitHor, flitVer, hinge, roll, moveHor, moveVer, fade, fadeHor, fadeVer, scaleInHor, scaleInVer, scaleOutHor, scaleOutVer, scalePulse, scaleWave, roEdgeHor, roEdgeVer, newspaper, pushFromHor, pushFromVer, slide, fall, pulseShort, roSoft, roDeal, wheelHor, wheelVer, snakeHor, snakeVer, shuffle, browseLeft, browseRight, slideBehind, vacuumHor, vacuumVer, scaleSoft, snapHor, snapVer, letInHor, letInVer, stickHor, stickVer, growthHor, growthVer, soEdgeHor, soEdgeVer, shake, tinHor, tinVer

HTML5 DATA
<div class="ct" data-tabs="fxOne-stickVer"> ... </div>
JAVASCRIPT
$('.ct').codetabs({ fxOne : 'stickVer' });
View example

EFFECT POWERLINE

'Powerline' effect is classic effect, has its own way of operating than 'One' or 'Out-In' effects. It is effect of simple, fast and smooth.

effect powerline
HTML5 DATA
<div class="ct" data-tabs="fx-line"> ... </div>
JAVASCRIPT
$('.ct').codetabs({ fx : 'line' });
View example

EFFECT FADE

'fade' effect is classic and simplest effect in codetabs.
In old browser not support CSS3, if setup 'One' or 'Out-In' effect will fallback 'fade' effect.

HTML5 DATA
<div class="ct" data-tabs="fx-fade"> ... </div>
JAVASCRIPT
$('.ct').codetabs({ fx : 'fade' });
View example

STYLES

CHANGE MAIN COLOR

Main default color of tabs is #0cf

Change main default color of tabs :

  • Open codetabs.css file in ../code/codetabs.css
  • Search and replace #0cf to #yourColor

SKINS

The current codetabs is provided with 5 skins.
Add 'class-name' to head markup to change the skins of tabs.

skin flatbox

skin '.ct-flatbox'

<div class="ct ct-flatbox"> ... </div>
View example
skin flat

skin '.ct-flat'

<div class="ct ct-flat"> ... </div>
View example
skin classic

skin '.ct-classic'

<div class="ct ct-classic"> ... </div>
View example
skin pill

skin '.ct-pill'

<div class="ct ct-pill"> ... </div>
View example
skin underline

skin '.ct-underline'

<div class="ct ct-underline"> ... </div>
View example

SIZES

The current codetabs is provided 5 sizes of tablists.
Includes: mini - small - default - large -xlarge
Similar skins, add 'class-name' to head markup to change the sizes of tablists.

<!-- Size Mini -->
<div class="ct ct-flat ct-size-mini"> ... </div>

<!-- Size Small -->
<div class="ct ct-flat ct-size-small"> ... </div>

<!-- Size Default - no add class -->
<div class="ct ct-flat"> ... </div>

<!-- Size Large -->
<div class="ct ct-flat ct-size-large"> ... </div>

<!-- Size xLarge -->
<div class="ct ct-flat ct-size-xlarge"> ... </div>
View example

POSITIONS

With a combination of 3 options: 'dirs', 'pos', 'align' → to create 14 different positions of tablists.

  • dirs : 'hor', 'ver'
  • pos  : 'top', 'bottom'
  • align : 'begin', 'center', 'end', 'justified'
tabs hor tabs ver

DIRECTIONS

There are 2 directions in Codetabs: horizontal and vertical, corresponding 2 keywords 'hor' and 'ver'.

dirs hor dirs ver

Horizontal is default direction, needless to setup.

HTML5 DATA
<!-- Direction HORIZONTAL setup -->
<div class="ct" data-tabs="pag-{ dirs: hor }"> ... </div>

<!-- Direction VERTICAL setup -->
<div class="ct" data-tabs="pag-{ dirs: ver }"> ... </div>
JAVASCRIPT
// Direction HORIZONTAL setup
$('.ct').codeslider({ pag: { dirs: 'hor' } });

// Direction VERTICAL setup
$('.ct').codeslider({ pag: { dirs: 'ver' } });

POSITION

Each horizontal and vertical directions are included 2 position options: 'top' and 'bottom'.

pos hor pos ver
HTML5 DATA
<!-- Position TOP setup -->
<div class="ct" data-tabs="pag-{ pos: top }"> ... </div>

<!-- Position BOTTOM setup -->
<div class="ct" data-tabs="pag-{ pos: bottom }"> ... </div>
JAVASCRIPT
// Position TOP setup
$('.ct').codeslider({ pag: { pos: 'top' } });

// Position BOTTOM setup
$('.ct').codeslider({ pag: { pos: 'bottom' } });

ALIGN

In each position options, cluster tablists than codetabs have 4 align options: 'begin', 'center', 'end' and 'justified'.
Vertical directions options not supported 'justified' align options.
If the length clusters tablists larger body tabs, codetabs automatically switch on 'begin' align options.

align hor 1 align hor 2
HTML5 DATA
<!-- Align BEGIN setup -->
<div class="ct" data-tabs="pag-{ align: begin }"> ... </div>

<!-- Align CENTER setup -->
<div class="ct" data-tabs="pag-{ align: center }"> ... </div>

<!-- Align END setup -->
<div class="ct" data-tabs="pag-{ align: end }"> ... </div>

<!-- Align JUSTIFIED setup -->
<div class="ct" data-tabs="pag-{ align: justified }"> ... </div>
JAVASCRIPT
// Align BEGIN setup
$('.ct').codeslider({ pag: { align: 'begin' } });

// Align CENTER setup
$('.ct').codeslider({ pag: { align: 'center' } });

// Align END setup
$('.ct').codeslider({ pag: { align: 'end' } });

// Align JUSTIFIED setup
$('.ct').codeslider({ pag: { align: 'justified' } });

MEDIA

IMAGE LAZYLOAD

Supported image-lazyload within the content of each slide.
+ Replace image tag by link tag & add .ct-img class.

<a class="ct-img" href="image/iamge1.jpg">image 1</a>
View example

LOAD AJAX

Download the slides content by ajax method (same domain).
+ Setup URL content to be loaded to 'ajax' property into 'media' object.

<div class="ct" data-tabs="isAutoRun-on">
    
    <!-- Slide 1 -->
    <div data-slide="media-{ ajax: url-content }">
        
        <!-- Pagination item of slide 1 -->
        <div class="ct-pagitem">Title slide 1 ...</div>
    </div>

    ...
</div>
View example

SLIDESHOW

BASIC SETUP

slideshow preview
  • Turn on slideshow by setup options 'isSlideshow : true'. Default options is 'isSlideshow : false'.
  • The time to switch between slides are setted with 'delay' options in 'slideshow' object options. Unit is milliseconds(ms).
  • Add style for timer by 'class-name' to head markup codetabs → i.e. '.ct-arcline'
HTML5 DATA
<!-- Combine add style for timer and turn on slideshow -->
<div class="ct ct-arcline" data-tabs="isSlideshow-true slideshow-{ delay: 5000 }"> ... </div>
JAVASCRIPT
<!-- Setup style for timer -->
<div class="ct ct-arcline"> ... </div>
// Setup option for slideshow
$('.ct').codetabs({
    isSlideshow : true,
    slideshow   : { delay : 5000 }
});
View example

TIMER ARC

'arc' timer is defalut timer in codetabs, simple and flat design.

timer arc
HTML5 DATA
<!-- Setup style and type for timer -->
<div class="ct ct-arcline" data-tabs="slideshow-{ timer: arc }"> ... </div>
JAVASCRIPT
<!-- Setup style for timer -->
<div class="ct ct-arcline"> ... </div>
// Setup type for timer
$('.ct').codetabs({
    slideshow : { timer : 'arc' }
});

Note:

  • Class '.ct-arcline' : customized size, position of timer and play/pause button.
  • 'timer : arc' options in 'slideshow' object : type of timer.

Customization of the 'arc' object

The options in 'arc' object used to customize color, thickness, size of circle timer.
Arc timer included 'Inner' circle and 'Outer' circle. Each circle are 4 options in 'arc' object.
'Inner' circle used to display the time loop in slideshow.
'Outer' circle used to decorate or background.

timer arc timer arc
Variable Default value Description
width null Width of timer
height null Height of timer
fps 30 The number of updates 'inner' circle in 1 second.
rotate 0 Initial angle of rotation of 'inner' circle.
radius 14 The radius of 'inner' circle.
weight 2 Thickness border of 'inner' circle.
stroke #fff Color border of 'inner' circle, format same css.
fill transparent Color background of 'inner' circle, format same css.
     
oRadius 14 The radius of 'outer' circle.
oWeight 2 Thickness border of 'outer' circle.
oStroke hsla(0,0%,0%,0.2) Color border of 'outer' circle, format same css.
oFill transparent Color background of 'outer' circle, format same css.

Code sample cho customize timer arc

HTML5 DATA
<div class="ct ct-arcline" data-tabs="
    arc-{ stroke: #0cf, radius: 14, oStroke: #e5e5e5, oRadius: 14, oWeight: 2 }
    "> ... </div>
JAVASCRIPT
$('.ct').codetabs({
    arc : { 
            stroke  : '#0cf',
            radius  : 14,
            oStroke : '#e5e5e5',
            oRadius : 14,
            oWeight : 2
          }
});

OTHER TIMERS

Including 'bar' timer and 'number' timer, fully customizable by CSS.

timer bar timer number
HTML5 DATA
<!-- Setup style va options cho timer BAR -->
<div class="ct ct-barless" data-tabs="slideshow-{ timer: bar }"> ... </div>

<!-- Setup style va options cho timer NUMBER -->
<div class="ct ct-numless" data-tabs="slideshow-{ timer: number }"> ... </div>
JAVASCRIPT
<!-- Setup style for timer -->
<div class="ct ct-arcline"> ... </div>
// Setup optons cho timer BAR
$('.ct').codetabs({ slideshow : { timer: 'bar' } });

// Setup optons cho timer NUMBER
$('.ct').codetabs({ slideshow : { timer: 'number' } });
Timer bar Timer number

OTHER OPTIONS

List of other options in 'slideshow' object

Variable Default value Description
isAutoRun true Automatically run slideshow when codetabs initialize.
isPlayPause true Turn on/off button 'playpause'
isTimer true Turn on/off timer
isRandom false Features run random next slide in slideshow.
isHoverPause false Features mouse-hover on tabs to automatically pause slideshow.
isRunInto true Features only run slideshow when tabs display in view-screen, outside view-screen automatically pause slideshow.

MARKUP

Markup render

Structured markup after rendering in the page → support set css in codetabs.

Markup and class in codetabs before render

<div class="ct" data-tabs="isAutoRun-on fxOne-stickVer">
    
    <!-- Slide 1 of tabs -->
    <div>
        <div class="ct-pagitem"> Title slide 1 ... </div>
        <div> Content of slide 1 - any HTML ... </div>
    </div>

    <!-- Slide 2,3 same slide 1 -->
    ...
<div>

Markup and class in codetabs after render
Include pagination, navigation and caption elements

<div class="ct ct-ready ct-dot ct-height-auto ct-pag-hor ct-pag-top"> <!-- markup: codetabs -->

    <!-- MAIN SLIDES -->
    <div class="ct-viewport"> <!-- markup: viewport --> 
        <div class="ct-canvas"> <!-- markup: canvas -->
            
            <div class="ct-slide ct-ready"> ... </div> <!-- markup: slide -->
            <div class="ct-slide ct-ready ct-cur"> ... </div>
            <div class="ct-slide ct-ready"> ... </div>
            ...
        </div>
    </div>


    <!-- PAGINATION -->
    <div class="ct-pag ct-tab ct-pag-hor ct-pag-top"> <!-- markup: pag-head -->
        <div class="ct-paginner"> <!-- markup: pag-inner -->
            
            <div class="ct-pagitem"> ... </div> <!-- markup: pag-item -->
            <div class="ct-pagitem ct-cur"> ... </div>
            <div class="ct-pagitem"> ... </div>
            ...
        </div>
    </div>


    <!-- NAVIGATION -->
    <div class="ct-nav"> <!-- markup: nav-head -->
        <div class="ct-prev">prev</div>
        <div class="ct-next">next</div>
    </div>


    <!-- CAPTION -->
    <div class="ct-cap"> <!-- markup: cap-head -->
        <div class="ct-capinner"> <!-- markup: cap-inner -->
            <div class="ct-cap-cur"> ... </div>
            <div class="ct-cap-last"> ... </div>
        </div>
    </div>


    <!-- MEDIA -->
    <div class="ct-media"> <!-- markup: media -->
        <div class="ct-playpause ct-actived">play/pause</div> <!-- markup: playpause -->
        <div class="ct-timer ct-timer-bar"> <!-- markup: timer-head -->
            <div class="ct-timeritem"></div>
        </div>
    </div>

</div>

Detailed description of the class is added:

@ Markup codetabs

  • class .ct-ready: will be added when first slide of codetabs complete loaded, and codetabs began to appear in browser.
  • class .ct-dot : type effect of codetabs. Effect 'one', 'out-in' and 'fade' are 'dot' type, also 'powerline' effect is 'line' type.
  • class .ct-height-auto : type height of codetabs, include 2 option - 'height-auto' and 'height-fixed'.
  • class .ct-pag-hor : will be added when pagination turn on. Direction of pagination, include 2 options: 'pag-hor' for horizontal direction, 'pag-ver' for vertical direction.
  • class .ct-pag-top : will be added when pagination turn on. Position of pagination, include 2 options: 'pag-top' and 'pag-bottom'

@ Markup viewport
Container all slide, often used to css of slide area


@ Markup canvas
This markup only used for codetabs system, don't css on this markup.


@ Markup slide

  • class .ct-ready: will be added when all images on slide are complete loaded
  • class .ct-cur: will be added when this markup is current slide to appear codetabs

@ Markup pag-head

  • class .ct-tab: type of pagination, include 'tab' - 'bullet' - 'thumb'
  • class .ct-pag-hor   .ct-pag-top: similar class on @ markup codetabs, direction and position of pagination. 2 classes are added to ensure css pagination outside the codetabs

@ Markup pag-inner
This markup only used for codetabs system, don't css on this markup.


@ Markup pag-item

  • class .ct-cur: will be added when this markup is current pagination-item selected.

@ Markup cap-inner
This markup only used for codetabs system, don't css on this markup.


@ Markup playpause
Button play/pause in slideshow

  • class .ct-actived: will be added when users switch to stop state

@ Markup timer-head

  • class .ct-timer-bar: type of timer, include 'timer-arc' - 'timer-bar' - 'timer-number'

@ Markup timer-item
This markup described the current time taking place in the slideshow.
Depending on type of timer, tagName timer-item change as well:

  • 'canvas' tagName for timer-arc
  • 'div' tagname for timer-bar
  • 'span' tagName for timer-number

Outside Markup

The components: navigation, title tabs(pagination), timer... can set up markup in any location on site.
Support freedom of layout, adding 'class-name' on the components.

Setup of outside markup:

  • First, naming codetabs with any name(no space) via name option.
  • Second, named similarly to components with markup outside.
<!-- Main markup of tabs1 - with name 'tabs1' -->
<div class="ct" data-tabs="name-tabs1"> ... </div>

...

<!-- Setup markup title of tabs1 -->
<div class="ct-pag" data-tabs="name-tabs1"> ... </div>

<!-- Setup markup navigation of tabs1 -->
<div class="ct-nav" data-tabs="name-tabs1"> ... </div>

<!-- Setup markup timer of tabs1 -->
<div class="ct-timer" data-tabs="name-tabs1"> ... </div>

OTHERS

Deep linking

Deep linking will append new hash #codeID_slideID on URL when switch slide. It easy linking or bookmark specific slide.
Deep linking also support multi-linking in the same page.

List options in 'deeplinking' object:

Variable Default value Description
prefixDefault ['code', 'slide'] Only setup by JAVASCRIPT object.
Prefix 0 is name of codetabs, support multi-liking on the same page.
Prefix 1 is name of slide on that codetabs.
prefix null Prefix of #hash combine with order of slide, begin by 0.
isIDConvert true Deeplinking auto convert ID of slide to #hash corresponds on URL
HTML5 DATA
// prefix deep-linking only setup in JAVASCRIPT
<div class="ct" data-tabs="isDeeplinking-on">
    ...
</div>
JAVASCRIPT
$('.ct').codetabs({
    isDeeplinking : true,
    deeplinking   : { prefix: ['gallery', 'tab'] },
    ... 
});

Deep linking ID

Deeplinking auto convert ID of slide to #hash corresponds on URL

<div class="ct" data-tabs="isAutoRun-on isDeeplinking-on">
    
    <!-- Slides -->
    <div id="swipe-gestures">...</div>
    <div id="huge-effect">...</div>
    <div id="flat-design">...</div>
    <div id="true-tabs">...</div>
</div>
View example

APIs

Public methods

/* All public medthods can be called
$('.ct').codetabs('next');
$('.ct').codetabs('goTo', 3);

/* You can be create instance codetabs data and many call quickly */
var code = $('.ct').data('codetabs');

code.next();                        // Next slide
code.prev();                        // Previous slide
code.first();                       // Goto first slide
code.last();                        // Goto last slide
code.goTo(id);                      // Goto slide id number, begin 0

code.prop(opts [, isNoRefresh]);    // Auto update options and refresh tabs
                                    // Example: code.prop({ speed: 1200, fx: 'fade' });
code.refresh();                     // Refresh tabs
code.destroy([isDelete]);           // Removes all events and clears all data on tabs

code.play();                        // Play slideshow
code.pause();                       // Pause slideshow
code.stop();                        // Stop slideshow

code.addSlide(obj [, index]);       // Add new slide. If 'index' is empty, the new slide will auto add at the end
code.removeSlide([index]);          // Remove the slide at 'index' position.

code.swipeEvent(objName);           // Register or remove swipe event on object
                                    // 'onBody'  : register swipe event on body tabs
                                    // 'offBody' : remove swipe event on body tabs
                                    // 'onPag'   : register swipe event on pagination
                                    // 'offPag'  : remove swipe event on pagination

Public properties

code.width();                       // Return width tabs
code.height();                      // Return height tabs
code.curId();                       // Return slide current id
code.slideLenght();                 // Return lenght of slides
code.slideCur();                    // Return object jQuery of slide current
code.opts();                        // Return object all options
code.varible();                     // Return object all varible in tabs
code.isMobile();                    // Return boolean value, the device is mobile?
code.browser();                     // Return name of browser used
code.ev;                            // Return object events in tabs

Callback events

code.ev.on('start', function() { ... });            // Trigger slide begin of tabs fire
code.ev.on('end', function() { ... });              // Trigger slide end of tabs fire
code.ev.on('before', function() { ... });           // Trigger before transition move to slide
code.ev.on('after', function() { ... });            // Trigger after transition move to slide
code.ev.on('loadBegin', function(e, $slide, ID) { ... });   // Trigger slide begin loadding, return current slide object and ID
code.ev.on('loadEnd', function(e, $slide, ID) { ... });     // Trigger slide loaded, return current slide object and ID
code.ev.on('loadSlide.id', function() { ... });     // Trigger if slide id loaded
code.ev.on('loadAll', function() { ... });          // Trigger if all image in tabs loaded
code.ev.on('resize', function() { ... });           // Trigger when window resize
code.ev.on('init', function() { ... });             // Trigger when codetabs initialized
code.ev.on('selectID', function(e, ID) { ... });    // Trigger when switch to new slide and return ID selected
code.ev.on('deselectID', function(e, ID) { ... });  // Trigger when switch to new slide and return ID deselected
code.ev.on('swipeBegin', function() { ... });       // Trigger when begin swipe gestures
code.ev.on('swipeEnd', function() { ... });         // Trigger when end swipe gestures
code.ev.on('fxBegin', function() { ... });          // Trigger fx switch slide begin running
code.ev.on('fxEnd', function() { ... });            // Trigger fx switch slide end running

Changelogs

Version 3.0 | 25.11.2014

+ Added: new 5 templates: tabs in fancybox, deeplinking ID, media load ajax, media image lazyload, api add ajax.
+ Added: api 'destroy'
+ Added: api 'swipeEvent'
+ Added: load ajax and image lazyload
+ Added: fx 'none'
+ Added: new 'begin', 'center', 'centerRight', end propteries into 'idBegin' option
+ Added: description of main color in documentation
+ Improved: deeplinking auto detect ID and convert to #hash on url
+ Improved: resize event

Version 2.2 | 08.08.2014

+ Added: new 6 templates: highlight, fullcolor, show by device, show from, deeplinking, cookie
+ Added: deeplinking, cookie, classAdd options
+ Added: animate effect on caption when switch slide
+ Added: detail description in 'markup > render' in documentation
+ Improved: fade effect fallback in old browser(<=IE9)
+ Improved: remove unnecessary effects on mobile
+ Changed: unlock codetabs when js no enable, more SEO friendly
+ Changed: name 'arc.update' 'acr.fps' options
+ Changed: prefixed in 'code.animate.css' file
+ Fixed: 'overflow: hidden' in Android browser
+ Fixed: auto run pagitem when codetabs only have 2 slide
+ Fixed: many slide at the same time 'selected'
+ Fixed: render font in safari 5.1 windows
+ Fixed: position swipe gestures in opera 12
+ Fixed: stop drag-text when swipe gestures in IE7-8

Version 1.3 | 18.07.2014

+ Improved: swipe gestures on mobile device

Version 1.2 | 16.07.2014

+ Changed: default options 'markup-{ timerInto: none}' to 'markup-{ timerInto: media }'
+ Changed: move timer into 'media' object
+ Added: new 'isMobile' option in 'swipe' ojbect
+ Updated + Added: APIs and callback events
+ Updated: documentation

Version 1.1 | 03.07.2014

+ Improved: auto-height of the tabs.
+ Improved: reduce size js file.                             
+ Changed: rename effects powerline 'fx-LINE' to 'fx-line'
+ Added: support bootstrap framework 3.x

Version 1.0 | 27.06.2014

Initial version