Demo & Documentation for jQuery plugin tabX

The TabX plugin is a jQuery-based utility designed to create dynamic, category-based galleries with animations. It supports custom animations, category filtering, and various types of gallery navigation.

1. Live demo

To see the demo, select desired option and it will be applied automatically. Please note that instead of those images, simple text content can also be used.

2. Installation

Include the following files in your project:

<link rel="stylesheet" href="tabx/tabx.css">

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

<script src="tabx/tabx.js"></script>

3. Usage Instructions

Ensure your HTML includes elements with the following attributes:

• tabx-id: A unique identifier for the gallery.
• tabx-cats: Specifies the category of the item(s).

Basic html structure looks like below :

<div id="element" tabx-id="some-unique-id-here">

 

<!-- --- --- more html content --- --- -->

 

<div tabx-cats="animal,cat"> You can put your HTML content here. </div>

<div tabx-cats="animal,dog"> You can put your HTML content here. </div>

<div tabx-cats="bird"> You can put your HTML content here. </div>

 

<!-- --- --- more html content --- --- -->

 

</div>

Important : tabx-id and tabx-cats properties must be defined. tabx-id acts as container and tabx-cats works as child. They must be alphanumeric and should not contain special charectors, spaces, etc. You can define them just like you would define a html class or id.

Just like any jQuery plugin, you can use it inside functions or events. The very basic example:

$('#element').tabX(); // for above example

OR

$('[tabx-id="some-unique-id-here]"').tabX(); // this also will work

For more customizable and optional features, you can refer this :

$('#element').tabX({

    type: 'switches', // Tab design

    animation: 'none', // animation to play when clicking a tab

    boxClass: 'myclass', // Additional class for a particular slide customization

    activeCat: 'all', // Default active category in tabbed menu

    animations: ["fade", "slide"] // array to choose from, when animation is random

});

4. Advanced Examples

Example 4.1 : Creating navigation tabs outside

By default tabbed navigation is created immediately inside the tabx-id container. If you want to create the navigation at some place else, you should manually specify the tabx-gid property which must have value same as tabx-id. We highly recomment using ul as container, however you may change that as well.

<ul tabx-gid="some-unique-id-here"></ul>

 

<!-- --- --- more html content --- --- -->

 

<div tabx-id="some-unique-id-here">

 

<!-- --- --- more html content --- --- -->

 

</div>

All categories will be auto analysed and clickable tabs will be created inside that container automatically.

Example 4.2 : Custom text or class on a particular category tab

All comma separated cats will generate a navigation item for its category automatically. If you want to modify the text or design for a fixed category item, you should define navigation container outside and then create items that need custom text or class inside it. example :

<ul tabx-gid="some-unique-id-here">

<li class="your-custom-class" tabx-cat-nav="predator">Dangerous Animals</li>

</ul>



<!-- --- --- more html content --- --- -->



<div tabx-id="some-unique-id-here">

<!-- --- --- more html content --- --- -->

<div tabx-cats="animal,cat"> You can put your HTML content here. </div>

<div tabx-cats="animal,dog"> You can put your HTML content here. </div>

<div tabx-cats="animal,predator"> You can put your HTML content here. </div>

<!-- --- --- more html content --- --- -->



</div>

The existing navigation item will be ignored and rest will be created automatically. Similarly, to edit all navigation item, you can :

<li tabx-cat-nav="all">Everything</li>

Example 4.3 : Other options for navigation container

Properties tabx-type and tabx-anim represent type and animation values respectively. Please remember, Javascript have advantage over html property. It means if you define these properties in html and via jquery option both, jquery option will be applied.

<ul tabx-gid="some-unique-id-here" tabx-type="radios" tabx-anim="blast"></ul>

Example 4.4 : Adding images and hover text

You can add these properties, just like regular html. We have predefined their classes, so you should use them. If you need you can add your own stuff too.

<!-- --- --- for adding image only --- --- -->

<div tabx-cats="animal,cat">

<a href="https://phploaded.com/github/full/cat-67.jpg"><img class="tabx-img" src="https://phploaded.com/github/thumb/cat-67.jpg"></a>

</div>
 


<!-- --- --- image with hover title and description  --- --- -->
 
<div tabx-cats="flowers">

<a href="https://phploaded.com/github/full/674dafff00c57.jpg"><img class="tabx-img" src="https://phploaded.com/github/thumb/674dafff00c57.jpg"></a>

<div class="tabx-info">

<div class="tabx-title">Spring Blossom</div>

<div class="tabx-descr">Cherry blossoms in full bloom under a sunny sky.</div>

</div>

</div>

Example 4.5 : Adding your own animation(s)

All css animations are controlled by creating an animation name. Lets create animation named twist. When you use twist as value of animation property, a class named tabx-twist-show will be added to tabx-cats property container to boxes that are transitioning from hidden to shown. Similarly, a class named tabx-twist-hide will be added to elements that are going from visible to hidden. Based on these 2 classes, you can animate tabx-in child element. Example :

/* twist animation */



.tabx-twist-hide .tabx-in {

transform: scale(0.3) rotateX(180deg) translateY(-100px);

opacity: 0;

}

.tabx-twist-show .tabx-in {

transform: scale(1.3) rotateX(-180deg) translateY(-100px);

opacity: 0;

}



/* twist animation end */

These animations will run for 500ms(0.5s) which cannot be changed because it is global for all animations. You can add these css codes and your new animation should play fine.

Example 4.6 : Adding your own boxClass(es)

Similar to example 4.5, all box designs are controlled by creating a boxClass name. Lets create design named blood. When you use blood as value of boxClass property, a class named tabx-box-blood will be added to tabx-cats property container. Final structure of html becomes like this :

<div tabx-cats="landscape" class="tabx tabx-box-blood">

<div class="tabx-in">

<div class="tabx-ui">

<!-- --- --- more html content --- --- -->

</div>

</div>

</div>

The html elements tabx-in and tabx-ui are created automatically, so you dont have to add it. Based on this html markup, you can write your own css codes. Example :

/* blood class */

.tabx-box-blood .tabx-in{

border:7px solid #f00;

box-shadow: 0 0 2px #000;

background-color:#fff;

}

/* blood class end */

You should focus more on styling tabx-in and tabx-ui elements and not element tabx-box-blood itself.

Example 4.7 : Adding your own tab type(s)

Similar to example 4.5 and 4.6, all types are controlled by creating a type name. Lets create type named tags. When you use tags as value of type property, html property tabx-type will have value tags which is assigned to ul container with property tabx-gid. You can write css based on that. Example :

/* tags type */

[tabx-type="tags"]{

text-align:center;

padding:10px;

}

[tabx-type="tags"] > li{

background:#fff;

border:1px solid #666;

}

[tabx-type="tags"] > li.tabx-li-active{

color:#333;

}

/* tags type end */

5. Configuration Options

Option	Type	Values	Description
type	string	Default : 'buttons' Available options : buttons, pills, tabs, switches, radios	Tab design
animation	string	Default : 'none' Available options : none, fade, slide, fall, noir, rotatez, rotatey, rotatex, blur, away, blast, random	Animation to play when clicking a tab. If set to random, every time a random animation will be used from animations array.
boxClass	string	Default : 'default' Available options : default, photo, glass, plastic, frosty, candy, double, neon, stamp, chequered	Additional class for a particular slide customization
activeCat	string	Default : 'all'	Default category to display on initialization.
animations	array	Default : ["fade", "slide", "fall", "noir", "rotatez", "rotatey", "rotatex", "blur", "away", "blast"]	Available animation styles for random animation option.

You have reached the end of tabx documentation page. If you have more questions you can reach me via phploaded's contact page. No gurantees but i will try to look into it as soon as possible.