Create an image carousel in the timeline editor

In this HowTo we will show you how to make an image carousel within the Timeline editor.

Overview.png

Step 1 - Preparing your assets:
Upload your images into the VMS (either in the clips or creatives)
Give your images a title, publish and save them.

Step 2 - Open the editor:
Edit the videoclip and open the timeline editor.

Step 3 - Set up the main image:
Create an ImageWidget. This will be the container of the carousel.
Select your first image as the image for this widget.
Mind the duration in the timeline. Set the duration for the length the carousel must be visible in the video if appropriate.
Name this widget “PIC”.

Step 4 - Create navigational buttons:
Create previous and next buttons using ImageWidgets or TextLabelWidgets or any other widget you can click on. Name these widgets “PREV” and “NEXT”.

Step 5 - Using the browsers LocalStorage to save values:

PIC_OnShow.png
We are going to use LocalStorage values to track the number of the current image.
Thus, we have to set the right number at the beginning of the carousel.

Select the “PIC” widget and in the “Event Handlers” tab click on “edit” for the “onshow” handler.
Click on the plus sign next to “add action” and select “localstorage”.
Within the localstorage action panel select the “Set Item” command.
In the name field enter “picid” (without the quotes) and in the value field the value 1 (the carousel always starts with the first image).
Close the window.

Step 6 - Creating a Controller:
To make our lives a bit easier we are going to use a controller to set the correct image based on the current value “picid” in the localstorage.
The purpose of this controller is that we can setup (and later call) multiple actions without the need to replicate them in various places).
For this we are going to (mis)use a rectangle widget.
Create a RectangleWidget and name it “CarouselController”. Placement doesn’t matter as we are only using this widget to perform a list of actions.
In the "Behavior" tab" select "ignore timeline show" and "ignore timeline hide". Now only we have control to show and hide this widget. 

CarouselController_OnShow.png

With this widget selected go to the “Event Handlers” tab and click on “edit” for the “onshow” handler.
Click on the plus sign next to “add action” and select “widget”.
Select the “CarouselControler” from the widget list and select the “hide” command. Now any time this widget is shown it wil immediately hide itself again.

Close the actions window and in the “Event Handlers” tab click on “edit” for the “onhide” handler.

CarouselController_OnHide.png

Click on the plus sign next to “add action” and select “widget”.
Select the "PIC" widget from the list and "Set Property" from the command select box.
For the property select "imageid". This will show the image property select field. Click on "Select" and select the first image you want to use in the carousel.
On the right side of this action click the "+" sign in the condition area.
From the "select type" select "Local Storage".
Enter the variable name "picid" and set the state to "equal to"  and enter the number "1" (without the quotes).
Click on the button "add to conditions".

Repeat the last steps to create "Widget:Set Property" actions for the rest of the carousel images so you end up with:
- Set property imageid to first image when the condition picid==1 is met. 
- Set property imageid to second image when the condition picid==2 is met. 
- Set property imageid to third image when the condition picid==3 is met. 
- Set property imageid to fourth image when the condition picid==4 is met. 
- Set property imageid to fifth image when the condition picid==5 is met. 

Step 7 - Cycling images using a Previous button:

PREV_OnClick.png
Select the "PREV" widget.
With this widget selected go to the “Event Handlers” tab and click on “edit” for the “onclick” handler.
Click on the plus sign next to “add action” and select “localstorage”.
Within the localstorage action panel select the “Set Item” command.
In the name field enter “picid” (without the quotes) and in the value field the value -- (Two minus signs). (Because we are storing a number value, we can use -- to decrement the value by 1).

Now we are going to make a check to see if the "picid" value is not lower than 1. If this is the case we set it to the biggest value (5) so we can keep cycling the immages.
Click on the plus sign next to “add action” and select “localstorage”.
Within the localstorage action panel select the “Set Item” command.
In the name field enter “picid” (without the quotes) and in the value field the value 5.
On the right side of this action click the "+" sign in the condition area.
From the "select type" select "Local Storage".
Enter the variable name "picid" and set the state to "less than"  and enter the number "1" (without the quotes).
Click on the button "add to conditions".
Close the condition window.

Now for the last action we are calling the show action on the "CarouselController" widget, triggering its own hide and thus all the actions to set the correct image.
Click on the plus sign next to “add action” and select “widget”.
Select the “CarouselControler” from the widget list and select the “show” command.

Close the actions window.

Step 8 - Cycling images using a Next button:

NEXT_OnClick.png
We are doing the same here as with the "PREV" widget only using ++ instead of -- and checking if the vaue of "picid" is greater then 5.
Select the "NEXT" widget. 

With this widget selected go to the “Event Handlers” tab and click on “edit” for the “onclick” handler.
Click on the plus sign next to “add action” and select “localstorage”.
Within the localstorage action panel select the “Set Item” command.
In the name field enter “picid” (without the quotes) and in the value field the value ++ (Two plus signs). (Because we are storing a number value, we can use ++ to increment the value by 1).

Now we are going to make a check to see if the "picid" value is not greater than 5. If this is the case we set it to the smallest value (1) so we can keep cycling the images.
Click on the plus sign next to “add action” and select “localstorage”.
Within the localstorage action panel select the “Set Item” command.
In the name field enter “picid” (without the quotes) and in the value field the value 1.
On the right side of this action click the "+" sign in the condition area.
From the "select type" select "Local Storage".
Enter the variable name "picid" and set the state to "greater than" and enter the number "5" (without the quotes).
Click on the button "add to conditions".
Close the condition window.

Now for the last action we are calling the show action on the "CarouselController" widget, triggering its own hide and thus all the actions to set the correct image.
Click on the plus sign next to “add action” and select “widget”.
Select the “CarouselControler” from the widget list and select the “show” command.

Publish(!) the timeline and save it.
Now the carrousel is done.
We can always handle the carousel ourselfs (instead of the user pressing prev/next buttons) by setting the "picid" value in the localstorage and calling show on the "CarouselController".