Help is on the way!

USER13 - PowerTabs Module

In the User 13 position we use our PowerTabs Component / Moduleto create a Javascript based tabs interface that displays K2 images and links them to the media anchor at the bottom part of the K2 article. The PowerTabs Component and Module is a JoomlaXTC extension and is available to Extensions Club, Combo Plan, and Developer Club Members and in the single Template Purchase Full Package. It is also pre configured and loaded into the Quickstart install version.

There are 3 Major Things at play to make this work.

The Power Tabs module needs to be published in the User 13 position and the slideshow needs to be selected (see above).

The Slideshow and corresponding Tabs themselves need to be set up in the Power Tabs Component and the load position tag needs to provide an area for the K2 Content Wall to be published.

The K2 Content wall needs to be set to the corresponding module position created by the loadposition tag included in the tab parameters.

In order to recreate the Slideshow you will first need to upload the PowerTabs Component and Module to your Joomla install. Next, open the PowerTabs Component and select Slideshows and create a new slideshow with the above details:

Next, copy the layout mark up below and paste it into the Template Text Area in the Design window.

<div class="ptabsbar">
<div class="ptabsmtitle"> 
<h3 style="border:none!important;padding:none!important;"><span>Latest Media</span></h3>
</div>
<div class="ptabsmtabs">
{tab}
</div>
<div class="ptabsmtabs">
{tab}
</div>
<div class="ptabsmtabs">
{tab}
</div>
<div class="ptabsmtabs">
{tab}
</div>
<div class="ptabsmtabs">
{tab}
</div>
<div class="ptabsmtabs">
{tab}
</div>
<div class="ptabsmtabs">
{tab}
</div>
<div style="clear:both;"></div>
</div>
{slideshow}

You can now save the Slideshow settings. Next, we will set up the 7 main slides by selecting Tabs in the component admin panel. Create a new Tab and copy the settings below: (do this for all 7 tabs, we will run through the first example here)

In the Tab Settings Area paste this in the text boxes below: In the dropdown labeled Tab Type select Custom

<div class="ptitleactive">{title}</div>

<a style="color:#9fd3ff;" href="/{link}#itemVideoAnchor">
<div class="jxtctooltip">
<img class="imgframe" src="/{imageXSmallurl}" />
 <div class="tip" style="margin:22px 0 0 42px;">
      <img src="https://www.joomlaxtc.com/images/video.png" />
    </div>
</div>

For more information on styling and configuring the PowerTabs Component and Module visit the full documentation HERE