New droplet: Tabby (creates Tabbed and Accordion blocks of sections)

[Argos]

This droplet creates a jquery tabbed or sliding accordion content block from several WYSIWIG sections. Thanks to Marmot for giving me a hand with some code

You can find the code, info and demo at: http://www.argosmedia.net/wb/pages/droplets/tabby.php

You can use other droplets inside the sections that are used. You can even put Tabby droplets inside Tabby Droplets. So you can put an accordion inside a tabbed block. Or tabbed blocks inside tabbed blocks, etc.

[dana]

Hi Argos,
this is a wonderful droplet and I really thank you for it! One issue I'm having though - when I want to insert an image in one of the tabbed section, it doesn't come up. Inspecting the source code, it shows this:

Code: [Select]

<img src="{SYSVAR:MEDIA_REL}/something.jpg">
Do you think you can help me with this?

Thank you!

[Argos]

Hi dana,

I'm glad you like the droplet, thanks 

I'm sure it must be someting local that causes your problem, but I don't know what, to be honest. As you can see in my demo using a picture in a tabby section should work fine as in any regular section.

I really don't have a clue what's wrong on your site... I'm sorry.

[pcwacht]

I think the sysvar error is not related to the droplet, look here for more info : https://forum.WebsiteBaker.org/index.php/topic,23569.0.html


Have fun,
John

[dana]

It's strange, because other images work fine and there is no SYSVAR, only in the tabby ones.  Thanks for the link, though, I'll check it out.

(I've got 2.8.3 - rev 1638)

[jacobi22]

is it possible to check my idee?
i use tabby in a page with some content include some media files. i 've 7 tabs with media files in every tab. i called the droplet code in the main page - this page works fine
in the tabs i have the problem that i have picture links like the post from dana

Code: [Select]

<img src="{SYSVAR:MEDIA_REL}/something.jpg">
it works good, if i dont use SYSVAR:MEDIA_REL (i change the picture link in the database)

the module wysiwyg replace this SYSVAR:MEDIA_REL  with the path to the media folder, but i think, its works only one time (in the main page)

i change the droplet code, define at first the media folder like the code in the wysiwyg / view.php
$sMediaUrl = WB_URL.MEDIA_DIRECT ORY;
and replace SYSVAR:MEDIA_REL in line 26 like this.

Code: [Select]

$fetch_content['content']= str_replace('{SYSVAR:MEDIA_REL}', $sMediaUrl, $fetch_content['content'] );
it works without problems

Droplet-Code Tabby

Code: [Select]

$tabs = explode(",",$titles);
$tabs2 = '';
$contentlist = '';
$content = '';
$sMediaUrl = WB_URL.MEDIA_DIRECTORY;

if (!isset($cssclass)) $cssclass = "";
if (!isset($cssstyle)) $cssstyle = "";

global $database, $wb;
$sections1 = explode(",",$sections);
reset($sections1);
array_unshift($sections1," ");
while($sectionid = next($sections1)){

if($type == "1") {
$tabs2 .= '<li><a href="#">'.(array_shift($tabs)).'</a></li>';
}
elseif($type == "2") {
$tabs2 = array_shift($tabs);
}

$get_content = $database->query("SELECT content FROM ".TABLE_PREFIX."mod_wysiwyg WHERE section_id = '$sectionid'");
while ( $fetch_content = $get_content->fetchRow()){

$fetch_content['content']= str_replace('{SYSVAR:MEDIA_REL}', $sMediaUrl, $fetch_content['content'] );

if($type == "1") {
$contentlist .= '<div class="pane">'.$content.($fetch_content['content']).'</div>';
}
elseif($type == "2") {
$contentlist .= '<div class="title">'.$tabs2.'</div><div class="pane">'.$content.($fetch_content['content']).'</div>';
}

}
}
$wb->preprocess($content);

if($type == "1") {
return '<div class="wrap-tabs '.$cssclass.'" style="'.$cssstyle.'"><ul class="tabs">'.$tabs2.'</ul>'.$contentlist.'</div>';
}
elseif($type == "2") {
return '<div class="wrap-accordion">'.$contentlist.'</div>';
}

[Argos]

Thanks for your improvement. It seems to work fine. See http://www.argosmedia.net/wb/pages/tabby2.php where I use your code.

Maybe some others are willing to try it too, let's wait and see. But I think I will change the Tabby droplet to this new version soon. Thanks again!