Crazy Tab Slider Content Plugin for Joomla

TUTORIAL

Why making Tab Slider work is now easy:

Suppose you write a syntax like below,

{cbtabslider behavior=Tabs}{cbtabslide title="Tab Title1"}Tab1 content{/cbtabslide}{cbtabslide title="Tab Title2"}Tab2 content{/cbtabslide}{/cbtabslider}

And got a tab like below,

Damn easy, right?

So, what is the shortcode here? If you look in to the syntax we used,

{cbtabslider behavior=Tabs}

{cbtabslide title=”Tab Title1″}Tab1 content{/cbtabslide}

{cbtabslide title=”Tab Title2″}Tab2 content{/cbtabslide}

{/cbtabslider}

We used two keywords here cbtabslider and cbtabslide which we call shortcode and others are parameters as you need.

{cbtabslide title="Tab Title1"}Tab1 content{/cbtabslide} will create a single tab, so you can change the tab slider title and content as you need. In content you can put any thing. If you need to show as slider then change the syntax to {cbtabslider behavior=Sliders} and the above tab output will convert to Slider/Accordian.

So we think shortcode things are now easy. Let us list the features.

Features & How Things Works:

Opening Tag: {cbtabslider}

Closing Tag: {/cbtabslider}

Optional parameter for open tag:

Name: behavior Value: Tabs, Sliders Default: Tabs

Description: Tabbed or Slider interface

Usages: {cbtabslider behavior="Tabs"} , {cbtabslider behavior="Sliders"}

Name: startoffset Value: 0,1,2,3… Default: 0

Description: Which tab/slider will be open by default

Usages: {cbtabslider behavior="Tabs" startoffset="1"}

Optional: Yes, by default it will take setting from plugin and it’s tab interface

Name: tabposition Value: 1,2,3,4 which means Tabs at top(1), bottom(2), left(3) or right(4) Default:1 (Top)

Description: Position of tab

Usages: {cbtabslider behavior="Tabs" startoffset="1" tabposition=2} means tab will show at bottom

Optional: Yes

Name: modposition Value: left, right etc module position name with comma Default: None but can be set default globally for all instance of tab slider from plugin setting

Description: Module position name with comma, all module published in those module positions will be shown as tab

Usages: {cbtabslider behavior="Tabs" startoffset="1" tabposition="2" modposition="user1,user2"}

Optional: Yes

Name: modid Value: 1,2,3,4… Default: None but can be set default globally for all instance of tab slider from plugin setting

Description: Module id comma separated , modules will be loaded as tab

Usages: {cbtabslider behavior="Tabs" startoffset="1" tabposition="2" modposition="user1,user2"}

Optional: Yes

Name: arrowstyle Value: 0 or 1. Default: 0

Description: Arrow style used in slider, 0 = Normal directional arrow icon 1= plus minus icon

Usages: {cbtabslider behavior="Tabs" startoffset="1" tabposition="2" modposition="user1,user2" arrowstyle="1"}

Optional: Yes

Slider only:Yes

Name: allowallclose Value: 0 or 1. Default: 0

Description: Arrow style used in slider, 0 = Normal directional arrow icon 1= plus minus icon

Usages: {cbtabslider behavior="Tabs" startoffset="1" tabposition="2" modposition="user1,user2" arrowstyle="1"}

Optional: Yes

Slider only:Yes

Name: starttransition Value: 0 or 1. Default: 1

Description: Show transition effect yes or no.

Usages: {cbtabslider behavior="Tabs" starttransition="1"}

Optional: Yes

Slider only:Yes

Name: opacitytransition Value: 0 or 1. Default: 0

Description: Opacity while transition

Usages: {cbtabslider behavior="Tabs" opacitytransition="1"}

Optional: Yes

Slider only:Yes

Name: duration Value: 100,200 any value Default:300 in mili second

Description: Duation for transition

Usages: {cbtabslider behavior="Tabs" duration="300"}

Optional: Yes

Slider only:Yes

Name: contentwidth Value: 100,200 any value Default:300 in px

Description: Tab Slider Container Width

Usages: {cbtabslider behavior="Tabs" contentwidth="300"}

Optional: Yes

Slider only:No, Needs for both Tabs and Slider

Name: contentheight Value: 100,200 any value Default:200 in px

Description: Tab Slider Container Height

Usages: {cbtabslider behavior="Tabs" contentheight="200"}

Optional: Yes

Slider only:No, Needs for both Tabs and Slider

Name: conwidth Value: 100,200 any value Default:100 in px

Description: Content width, Important for tab while tabs are in left and right

Usages: {cbtabslider behavior="Tabs" contentwidth="100"}

Optional: Yes

The above parameters are for top label shorttag “cbtabslider”

Now lets see what we can do this sub shorttag to make more custom individual slide or tab. Here will now learn the bold lines

{cbtabslider behavior=Tabs}

{cbtabslide title=”Tab Title1″}Tab1 content{/cbtabslide}

…….

{/cbtabslider}

Openning Tag: {cbtabslide}

Closing Tag: {/cbtabslide}

Optional parameter for open tag:

Name: title Value: any text Default: empty

Description: Tab or Slider title

Usages: {cbtabslide title="Tab1"}This is content for tab 1{cbtabslide}

Name: modid Value: 1,2,3…module id Default: None

Description: Use module id to load a single tab, also module id can be put multiple with comma

Usages1: {cbtabslide modid="1"}{/cbtabslide} single module id

Usages2: {cbtabslide modid="1,33"}{/cbtabslide} multiple module id

Usages3: {cbtabslide modid="1,33" title="Tab1"} Tab content here{/cbtabslide} Here there will a tab with title Tab1 and with it’s content and also there will be another two module as tab where module title will be tab title and module’s content will be load as content for those tabs. lovely na ?

Optional: Yes

Name: modpos Value: user1,user2,left, right… just module position name Default: None

Description: Use module position name to load module published in that position as tab/slide, also module position can be put multiple with comma

Usages1: {cbtabslide modpos="user1"}{/cbtabslide} single module position

Usages2: {cbtabslide modpos="user1,user2"}{/cbtabslide} multiple module position

Usages3: {cbtabslide modpos="user1,user2" title="Tab1"}Tab content here{/cbtabslide} Here there will a tab with title Tab1 and with it’s content and also there will be another module as tab/slide where module title will be tab/slide title and module’s content will be load as content for those tabs/slide.

Optional: Yes

This is not end but have more option in Plugin setting page.

Note: Please note that category filter will not work in some condition like category, categories view etc in Joomla 1.6 or higher.