Content Switcher Stack

To switch content stands for flexibility. With Content Switcher Stack you can define several parts of your page that should be able to be switched. Switch a language, switch the content, switch to another styled stack or to whatever you can imagine.

To switch you only need to provide a Content Switcher Activator, a stack that can contain anything. A click on that container will switch your content. Give it a try and click on the flags or the text links under the text box.

You can even use the activators inside your switched content!

Just got content switch update! thanks! Multiple blocks is huge! And "hide on startup" is perfect! This is a monster stack now!
JiveDig - http://jivedigdesign.com

Screenshots

Examples

Switching images:
In this example the switcher is used to change to images.
In order to style everything I am using TransBox Stacks as activator buttons.
Stacks Image 6776
Rochester Falls, Mauritius
Stacks Image 6778
Beach of Sylt, Germany
Click here to show the first image and here to show the second image.
Switching content
Stacks Image 1170
Stacks Image 1175
Example: Different categories
Here I defined two Switcher Stacks with two category IDs (A and B). Those can be independently activated. The content is hidden at the beginning.

This a Switcher Stack A

This a Switcher Stack B

Settings (Activator Stack)

    Activate Block: The number of the block in the Content Switcher Stack which will be displayed by clicking this stack
    Category ID: The ID of the Switcher Stack which will be the target of this Stack
    Fade: Activate to have the switched content fade in
    Fade duration: Duration of the fade effect
    Prevent other Clicks: Enable this option to prevent Stacks you dropped into from using their click events. For example: Drop a Button-Stack. without enabling this option the browser will jump to the top of the page because it wants to use the button's click event.

Settings (Switcher Stack)

    Content Blocks: The number of blocks to be generated
    Category ID: The ID (String) of the Switcher

Settings (Snippet)

Stacks Image 6802
In order to use the Snippet (see the download below) simply double click it and it will get installed by RapidWeaver. All you have to do is set up a link. When you are asked for an URL drag and drop the "ContentSwitcher"-Snippet into the URL text field. Now you will see something like this:
javascript:onclick( stacks.ContentSwitcher.cont_switch('category1','1',true) );
    Adjust "category1" with the name of the target category. Your ContentSwitcher tells you this info on your screen like "category1 - Block 0".
    The second value is the number of the Block you want to activate
    The last value can be set to true or false and will fade your switching if set to true
    You have to place an Activator Stack at least once even if you don't add any content.

How To

Add a Switcher Stack and set up how many different content blocks it should contain.
Fill in some content into those blocks. You can place any number of Content Switcher Stacks on your page. If they have the same category id they are target of the same activator Stack.

Add a Content Switcher Activator Stack on your page and set the category id and the number of the content-block to be displayed by clicking. Every content-block with this number in every Content Switcher Stack with the corresponding category id will be displayed.

If you want a special block to be activated on page load you can add a hashtag value to your link. For example #cs-CATEGORY-BLOCKNUMBER ( http://www.barz-stacks.eu/stacks/content_stacks/samples/content_switcher.html#cs-category1-0 in order to activate block 0 in category1)

Downloads

ContentSwitcher Link Snippet

Use this snippet to activate your Stacks from any text link!

Infos and Requirements

Rapidweaver
Rapidweaver 5/6/7
Stacks 2 only
Stacks 2 / 3
Responsive
Compatible to
responsive themes

Browser Compatibility

  • Safari
  • Chrome
  • Opera
  • Internet Explorer
  • Firefox

Screencast