Hoi,

I have a box with pictures or/and video's and to the right there are page titles shown. No I need to rotate these pictures and page titles
every 5 seconds. So for the pictures I used the flexslider module, but then I can't use any video's. But the real problem is that I don't know how to let the pagetitel hover change every five seconds. So what I mean is the following.

I have 4 page titles. When you enter the page the above one has an arrow over it the rest do not. After 5 seconds I need the first one to show the page title without the arrow en the second title with and so on.

Can anybody help. And does anyone know a better solution then the flexslider maybe?

Thanks Suzanne

SS Layout code:

<div class="box-menu">
<% loop NieuwsArtikelen %>
<a href="$Link"><div class="button">
<div class="hover">
<div class="text">
$Title
</div>
</div>
</div></a>
<% end_loop %>
</div>
</div>

PHP

public static function NieuwsArtikelen() {
$holder = MinkInformatie::get()->limit(4);

if ($holder) {
return $holder;
} else {
return false;
}
}

I have edit an print screen, here you still see the video I want to put into it. And on the right you see the first page title there will be 4.

This is really a javascript/jquery issue. It isn't related to Silverstripe much at all but I'll help you out (a bit) anyway.

1- This is the only thing that has to do with silverstripe: You need to add an id or class identifier to one of your divs in the loop that uses the loop varaible $pos, this way your titles are numbered. I would suggest something like: <div class="hover" id="title-$pos">
2- You will have to create and initialize (initial value should probably be 1 as $pos starts at 1) javascript variable that stores the number of the currently marked title. Lets call this variable marked.
3- Create a javascript function that uses jquery to:
- change the css of $('#title-' + marked) so it is no longer marked
- increments marked
- checks to see if marked is greater than or equal to 5 (or whatever is more than the maximum titles you have) and if it is sets marked to 1
- and changes the css of marks $('#title-' + marked) so that it is marked.
4- You will have to attach this to flexsliders callback api, either as the before function (as in before the slide animation begins) or the after function (which is called after the animation finishes).

You could also just have the function run every five seconds, it isn't tough to do, you don't even need jQuery really, window.setInterval(thenameofyourfunction, 5000); should do the trick in any browser but there is no guarantee that it will stay in synch with your slider animation.

I've never used flexslider (usually go for nivo) so i don't know if it will wait for the before function to return before it commences with the animation. If it does indeed wait, and you would rather that it didnt you can always create a new function to attach to before. That function would consist of window.setTimeout(thenameofyourfunction, 1); This way the function will return the animation will commence and 1 millisecond later your function will trigger.

Thanks for your help I will try to get it working ;)