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:

Step 2: Configure layout:

The layout of the roller is created using CSS

This is the CSS used by the demo:

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:

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'
});

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

nice

Hasanabbas at 03:33AM, 2013/02/28.

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 09:40PM, 2013/06/01.

Fixed the of drop down menu... Z-index was not large enough on the div container... Now it works perfectly and very nice rollerThanks

MMC at 07:26PM, 2013/06/02.

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 03:04AM, 2014/08/14.

人気スーパーコピーブランド時計激安通販専門店私達は長年の実体商店の販売経験を持って、先進とプロの技術を持って、高品質のスーパーコピー時計づくりに取り組んでいます。最高品質のロレックス時計コピー、カルティエ時計コピー、IWC時計コピー、ブライトリング時計コピー、パネライ時計コピー激安販売中商品の数量は多い、品質はよい。 }}}}}}
https://www.bagssjp.com/product/detail-11117.html
https://www.bagssjp.com/product/detail-50.html
https://www.bagssjp.com/product/detail-1780.html
https://www.bagssjp.com/product/detail-7495.html
https://www.bagssjp.com/menu/menu_pinpai-2-131.html

Bagssjplow at 12:51PM, 2024/02/15.