controlling sliding billboard by behaviors · 2009/11/24 · controlling sliding billboard by...

Controlling Sliding Billboard by Behaviors Patrick Julicher

Controlling Sliding Billboard by Behaviors

Copyright © 2009 DMXzone.com All Rights Reserved To get more go to DMXzone.com

of 12


Introduction The DMXzone Sliding Billboard extension is a great way to enhance your website. In a few mouse clicks a Billboard can be placed in a webpage. Besides the settings that the developer chooses, it is also possible to give a websites’ visitor complete control over how the Billboard behaves. This can be done with the help of the built in behaviors that come with the Sliding Billboard extension In this article it is explained how the behaviors can be applied. As an example the Pixar Sliding Billboard Demo from the DMXzone website is used.

From start to finish the next items will be explained.

1. Creating the Billboard section 2. Creating the Control section 3. Applying the Behaviors


of 12


1. Creating the Billboard section The example on the previous page shows what a use controlled could look like. This demo is built from 2 separate sections. The actual Billboard is only used for the right part. This is what will be named the Billboard section.

To be able to use the behaviors with the Billboard, first a Billboard needs to be created.

1. Insert a table containing 1 row and 2 columns. Depending on individual layout, the width of the table can differ. In our example the table is double the size of the Billboard.

2. Place your cursor in the right column. 3. Start the Sliding Billboard extension from the DMXzone tab on the Objects bar. 4. Click the Add new section button. 5. Click the Import a whole folder button. The DMXzone Image Resizer window is opened. 6. In the Source Image Folder field select the folder where the images currently are. 7. In the Destination Folder field select the folder where the images should be placed after resize. 8. Set the Resize to fit option for Photos and Thumbnails. 9. Click OK to start the resizing of the images and return to the Billboard window.

Note: Instead of adding a complete folder, it is also possible to add individual images by using the Add new image slide button.


of 12


All the images have now been entered into a new Billboard as separate slides.

1. For each slide, enter the correct Title. 2. For each slide, enter the correct Description.

Note: Entering a Title and Description is only necessary, if the Billboard should contain text and image slides. If the Billboard only contains images, there is no need to fill these to fields.


of 12



of 12


To determine the layout of the new Billboard, click on the Advanced tab. Depending on individual differences per website these setting are different for each user. For the Pixar Sliding Billboard Demo, the settings in the image below are used.


of 12


After having set all available options as desired, click OK. The Billboard will be added to the page.

Save the page and continue with the next step.


of 12


2. Creating the Control section To the left of the Billboard section, the Control section is located. This is the place where all the behaviors for the control of the Billboard will be applied.

To be able to do so, the layout will be created and some text and images are inserted.

1. Place the cursor in the left column besides the already entered Billboard. 2. Enter a table with 3 rows and 1 column. 3. Select the <TD> from the first row and from the Properties Inspector apply the header class to it.

4. Select the <TD> from the second row and from the Properties Inspector apply the content class to it. 5. Select the <TD> from the third row and from the Properties Inspector apply the footer class to it.


of 12


After creating the layout, some text and images will be inserted to be able to apply the behaviors in the next stage.

1. Enter a Title for your overall Billboard (Actual Billboard and Controls) in the first row. From the Properties Inspector apply the H3 class to this text.

2. Create a “Playlist” by entering all the Titles of all the individual slides in the second row, to be able to jump to an individual slide later. Best choice is to put these titles in a list in the correct order.

3. Enter a dummy link for all titles by entering # in the Link field in the Properties Inspector. 4. Enter text or images in the third row to be able to Play, Stop, Go to Previous or Go to Next slide.

Save the page and continue with the next step.


of 12


3. Applying the Behaviors After having set the layout and placing text and/or images to control the Billboard, the behaviors can now be applied.

1. Select the link from the first item in the “Playlist”. 2. From the Behaviors section in the Tag Inspector Panel, select +, DMXzone, Control Sliding Billboard. 3. Make sure the correct Billboard is selected. 4. From the Action field, select the Move To Page option. 5. In the Number field type 1, because the first item in the list should jump to the first page. 6. Click OK.

7. Repeat these steps for all the items in the list. Next, the behaviors to the buttons in the footer will be applied.

1. Select the first button. 2. From the Behaviors section in the Tag Inspector Panel, select +, DMXzone, Control Sliding Billboard. 3. Make sure the correct Billboard is selected. 4. From the Action field, select the Previous Page option. 5. Click OK.


of 12


6. Repeat these steps for every button to apply the Play, Stop and Next Page behaviors. With all the behaviors set, the Sliding Billboard can now be fully controlled with the Playlist and button controls on the left side. An overview of available behaviors with their actions can be found in the table below. Behavior Action Comment Play Start to play the Billboard Disable Auto Play for best result Stop Stop playing the Billboard Next Section Jump to start of next section Previous Section Jump to start of previous section Next Page Jump to next page Previous Page Jump to previous page Move To Section Jump to specific section Move to Page Jump to specific page Set Section Jump to specific section without animation Set Page Jump to specific page without animation Redraw Redraw to Billboard on style change For usage with Style Chooser


of 12


4. Tips and Tricks It is up to everyone to think of own great ways to enable one or more controls for a Sliding Billboard. The possibilities are unlimited, since the behaviors can be applied to every text or image and the Billboard can be placed in every page with every CSS style thinkable. Two more examples of behavior usage can be found below.


of 12

controlling sliding billboard by behaviors · 2009/11/24 · controlling sliding billboard by...

Documents