Show Tab as Easy as You can Imagine Using Simple Shortcode
It comes with two built-in styles such as Tab Slide and Accordian (expand and collapses on click). You can place any content within the tabs, be it text, image or multimedia even. Instead of complex coding, do it simply. Helps you organize much information in a very compact style within your site. Great for product description, feature etc for E-commerce sites. Ready to integrate for any kind of applications as you like.
JED Listing Version 2.3 Download GPLv2 or later
Awesome Features
- Display Tab Slider Inside Your Joomla Site
- Full control to style-match with your Joomla site
- Flexible and Easy
- Works with any Joomla Template
Styling Options
- Default module id(s)
- Default module position name(s)
- Tabslider behavior as Tab or Slider
- Tab Position
- Others default setting that can be override from the short tags
Supported Components
- Joomla Default Content(com_content)
- K2 CCK(com_k2)
Screenshot
Setup is as Easy as 1-2-3
1. Set the Plugin and Use those given Shortcode
2. Put shortcode attributes as need
3. Save article and check the shortcode in action
Play with the available options related to styling and design
Available Options
Basic Configuration
- Skip Home page Yes/No
- Remove On Popup Yes/No
- Remove From RSS Yes/No
- Remove From Ajax Yes/No
- Item ID Filter Exclude/Include
- Filter Itemids
Tab Slider Settings
- Modules Position(s)
- Module Id(s)
- Tabs Type Tab/Sliders
- Default Tab
- Contatiner Width
- Contatiner Height
Slider Specific Settings
- Tabs Position
- Content Width
- Arrow Style
- Alow close all
- Enable Transition
- Enable Opacity
- Duration
Support Policy
use for any number of websites as you want, but one purchase = one year one domain support.
Need more Convincing?
JED Listing30 days 100% Money Back Guarantee
Read What Others Say About Us?
We have Served 1000s of Global Clients
Secure Transactions with Paypal
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.