Roller

Demo

Bookmark and Share

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();

Comments

Hasanabbas
nice
Hasanabbas at 08:33PM, 2013/02/27.
mmc
I am having an issue with my css drop down menu when using the heading and picture roller. It works fine until it starts to roll and switch to the next picture and heading. After that it does not function properly.

I do not see anyone mentioning in any of your forums.

Please advise,

Thanks in advance
mmc at 03:40PM, 2013/06/01.
MMC
Fixed the of drop down menu... Z-index was not large enough on the div container... Now it works perfectly and very nice roller

Thanks
MMC at 01:26PM, 2013/06/02.
Duplex
great script.

I want to add navigation arrows or better still allow the slide to stop when the mouse is over.

can anyone help?
Duplex at 09:04PM, 2014/08/13.

Post your comment

Don't have an avatar? Create one at Gravatar.com.

Confirmation code:

Go to cbolson.com


About/Contact | A good idea? | Submit a script | Privacy notice
© 2005 - 2017 dhtmlgoodies.com