jQuery content slider for Typo3 with typoscript

I wanted to use a dynamic jQuery content slider with menu for Typo3. Something like you see on many modern pages: you have some sort of a menu and the content changes based on click events bound to them with some slide/fade etc. effect

I decided to create a hidden page and then use it’s sub pages as the menu elements for the slider. This way you can have multiple content elements grouped by pages. (to edit the content of a slide you edit a page in the tree. To add/remove more items to the menu you create a page within that tree)

In the image the “About credit cards” page has UID=99 and has the “Hide in menu” property checked. We will use this later in the typoscript.

I am usingTemplavoila so I’ve created and mapped the following lib paths: field_about_menu and field_about_ccontent

1. The Typoscript for the menu

lib.field_about_menu = HMENU
lib.field_about_menu.entryLevel = 0
lib.field_about_menu.special = directory
lib.field_about_menu.special.value = 99
lib.field_about_menu.wrap = <ul class="guide-menu"><li class="guide-menu-title">About Credit Cards</li>|</ul>
lib.field_about_menu.1 = TMENU
lib.field_about_menu.1.NO.subst_elementUid = 1
lib.field_about_menu.1.NO.doNotLinkIt = 1
lib.field_about_menu.1.NO.allWrap = <li><a href="javascript:" rel="#guide-content{elementUid}">|</a></li>

You can see here that I am wrapping an UL around the menu and LI around each menu item. I am also building the links by manually using the doNotLink property. In my javascript code I am using the “rel” attribute to identify the link between a menuitem and the content element i want to slide/fade to.

I am using subst_elementUid property to generate the rel attribute for each A tag.

2. The Typoscript for the content of the slider

Now comes the tricky part: building the contents of each slide.

I will query all the children of my hidden page. (“About credit cards” – has UID of 99)
Next I will query all the content elements that belong to each of the pages in the result set.
Finally I will wrap them in some tag. (in my case UL and LI, but it can be DIV-s or anything you like)


lib.field_about_ccontent = COA
lib.field_about_ccontent.wrap = <ul id="second-carousel">|</ul>
lib.field_about_ccontent.1 = CONTENT
lib.field_about_ccontent.1.table = pages
lib.field_about_ccontent.1.select.pidInList = 99

lib.field_about_ccontent.1.renderObj = COA
lib.field_about_ccontent.1.renderObj.9 = TEXT
lib.field_about_ccontent.1.renderObj.9.field = uid
lib.field_about_ccontent.1.renderObj.9.wrap = <li id=”guide-content|”>
lib.field_about_ccontent.1.renderObj.10 = CONTENT
lib.field_about_ccontent.1.renderObj.10.table = tt_content
lib.field_about_ccontent.1.renderObj.10.select.pidInList.field = uid
lib.field_about_ccontent.1.renderObj.11 = TEXT
lib.field_about_ccontent.1.renderObj.11.value = </li>

Look carefully at the code. You will see that the trick is to tap into the renderObject of the first query.
And then use the UID field to query the content elements of each page.

The code groups the content elements of each page by wrapping them in a LI tag and it will use the page’s UID to generate an ID attribute for this wrapper. (this ID will match the ones used in the REL attributes used in the menu links)

You may now use jQuery to bind click events to your menu and handle the content sliding with your favorite plugin.

On my web page I used something like this:

$(".guide-menu li").has("a").each(function() {
if (!($(this).children("a").hasClass("active"))) {
var nonactives = $(this).children("a").attr("rel");
$(nonactives).hide();
}
});

$(“.guide-menu li a”).click(function() {
if (!($(this).hasClass(“active”))) {
var tohide = $(“.guide-menu li a.active”).attr(“rel”);
$(tohide).hide();
$(“.guide-menu li a.active”).removeClass(“active”);
$(this).addClass(“active”);
var toshow = $(this).attr(“rel”);
$(toshow).fadeIn(1000);
}
});

$(“.guide-menu li a”).first().click();

Here is the output of the above code. (and feel free to comment/ask questions)