New on DHTMLGoodies.com:
DHTML Chess is now available for WordPress at WordPressChess.com.
Roller
Roller
While working on the ludojs.com site, I created a roller script on the demo side to show pictures and short headings for some of the available demos. This roller script is now available for you to use for free(LGPL license).
Download
The script can be downloaded from roller.zip.
Configuration
Step 1: Include JS files
Include the javascript files on your page:
<script type="text/javascript" src="js/mootools-core-1.4.5.js"></script>
<script type="text/javascript" src="js/roller.js"></script>
Step 2: Configure layout:
The layout of the roller is created using CSS
This is the CSS used by the demo:
<style type="text/css">
.ludo-roller{
background-color:#333;;
position:relative;
border-bottom:1px solid #444;
border-top:1px solid #444;
}
.ludo-roller-text-container{
position:absolute;
width:400px;
left:20px;
top:40px;
height:360px;
color:#FFF;
font-weight:normal;
font-family:helvetica,arial, serif;
cursor:pointer;
overflow:hidden;
}
.ludo-roller-text-container h1{
font-size:40px;
line-height:140%;
color:#FFF;
}
.ludo-roller-image-container{
position:absolute;
width:520px;
height:380px;
border-radius:5px;
top:20px;
right:20px;
background-color:#191919;
cursor:pointer;
overflow:hidden;
}
.ludo-roller-image, .ludo-roller-text{
position:absolute;
width:100%;
height:100%;
padding:0;
margin:0;
background-repeat:no-repeat;
background-position:center center;
}
</style>
You can add this code between the <head> and </head> section of your file, or put it in a separate stylesheet file and include it using the <link> tag:
Step 3: Create an HTML container
Create an HTML container by adding an empty <div> tag to your page. Example:
<div id="rollerContainer"></div>
Step 4: Configure your Roller script
In this step, you configure your roller script. You create a new roller by creating a new Roller javascript object:
var roller = new Roller({ // Config options });
You have a lot of config options to choose from:
- renderTo: Id of container where the Roller script should be rendered, example "rollerContainer".
- duration: How long to display each item(picture and text) in the roller
- preload: True to preload images used by the roller.
- scramble: True to initially scramble the order of the pictures/headings you add to the roller
- animation: A config object describing how to animate the switch between items in the roller
The animation object supports these options:
- imageEffect: how to show a new image. You have the choice between "slide" and "fade"
- imageOutEffect: how to hide current displayed image, "fade" or "slide"
- textEffect: how to show next heading, "fade" or "slide"
- textOutEffect: how to hide current displayed heading, "fade" or "slide"
- imageSlide: when imageEffect is slide, this option defines direction of the slide, "right", "left", "up" or "down"
- textSlide: when textEffect is slide, this option defines direction of the slide, "right", "left", "up" or "down"
- duration: Duration of slide or fade effect in seconds.
Example of use:
var roller = new Roller({
renderTo:'rollerContainer',
duration:4,
preload:true,
scramble:true,
animation:{
imageEffect:'slide',
imageOutEffect:'slide',
textEffect:'slide',
textOutEffect:'slide',
imageSlide: 'right',
textSlide : 'right',
duration :.7
}
});
Step 5: Add pictures and headings
The next step is to add your pictures and headings to the roller. This is done by the roller.add method. The roller method accepts a config object as only argument. The config object supports the properties:
- img: Path to image
- text: Heading to show
- url: Optional url to open when clicking on heading or picture.
Example:
roller.add({
img : 'images/relative-layout.png',
text : '<h1>Layouts</h1><p>ludoJS let you build user interface by implementing layout models.</p>' +
'<p>One of this models is the relative layout which let you arrange views relative to each other.</P>' +
'<p>This gives you a lot of flexibility to build sophisticated user interfaces without having ' +
'to nest layouts.</p>',
url : 'api/demo/layout/relative.html'
});
roller.add({
img : 'images/linear-layout.png',
text : '<h1>Linear layout</h1><p>With the linear layout model, you can arrange children horizontally and vertically.</p>',
url : 'api/demo/layout/linear.html'
});
<link rel="stylesheet" href="css/roller.css" type="text/css" />
When putting the css in a separate file, the <style> tag should be dropped.
Final step: Start the roller
Finally, you need to start the roller by calling the Roller.start method:
roller.start();
No one has commented this - be first!
Post your comment
Comment preview: