"news ticker" - Filmstrip-Carrusel- (Brainiac)

Mootools

Estuve viendo los ejemplos que me comentaste daban en el FORO Mootools, y pensé que igual quedaba guapo con imágenes... algo parecido a un "filmstrip", de esos que vemos en las barras de desplazamiento de algunos slideshow.
Y bien: no es nada difícil de arreglar: le he bajado la velocidad y retardado el desplazamiento; he insertado fondos de imagen y vinculado cada una de ellas; y he aumentado el ancho, para que se vea mejor bajo el título de mi blog de pruebas.

El caso es que me ha quedado como lo ves AQUÍ.Si quieres echarle un ojo a lo que he "toqueteado", así tengo las piezas de códigos en la plantilla:

.- CSS:

#NewsHorizontal {
width: 690px;
height: 200px;
display: block;
overflow: hidden;
position: relative;

}
#TickerHorizontal {
width: 500px;
height: 300px;
display: block;
list-style: none;
margin: 0;
padding: 0;

}
#TickerHorizontal li {
display: block;
width: 200px;
height: 200px;
line-height: 100px;
color: #fff;
text-align: center;
font-size: 72px;
margin: 0;
padding: 0;
float: left;
}

.- SCRIPT:
Se queda como estaba en la parte "cerrada":

<script language='javascript' src='http://.../mootools-release-1.11.js' type='text/javascript'/>

El "abierto" lo dejé así:

<script language='javascript' type='text/javascript'>



var Ticker = new Class({

setOptions: function(options) {

this.options = Object.extend({

speed: 3000,

delay: 1000,

direction: &#39;vertical&#39;,

onComplete: Class.empty,

onStart: Class.empty

}, options || {});

},

initialize: function(el,options){

this.setOptions(options);

this.el = $(el);

this.items = this.el.getElements(&#39;li&#39;);

var w = 0;

var h = 0;

if(this.options.direction.toLowerCase()==&#39;horizontal&#39;) {

h = this.el.getSize().size.y;

this.items.each(function(li,index) {

w += li.getSize().size.x;

});

} else {

w = this.el.getSize().size.x;

this.items.each(function(li,index) {

h += li.getSize().size.y;

});

}

this.el.setStyles({

position: &#39;absolute&#39;,

top: 0,

left: 0,

width: w,

height: h

});

this.fx = new Fx.Styles(this.el,{duration:this.options.speed,onComplete:function() {

var i = (this.current==0)?this.items.length:this.current;

this.items[i-1].injectInside(this.el);

this.el.setStyles({

left:0,

top:0

});

}.bind(this)});

this.current = 0;

this.next();

},

next: function() {

this.current++;

if (this.current &gt;= this.items.length) this.current = 0;

var pos = this.items[this.current];

this.fx.start({

top: -pos.offsetTop,

left: -pos.offsetLeft

});

this.next.bind(this).delay(this.options.delay+this.options.speed);

}

});



var hor = new Ticker(&#39;TickerHorizontal&#39;,{speed:3000,delay:2000,direction:&#39;horizontal&#39;});

var vert = new Ticker(&#39;TickerVertical&#39;,{speed:1000,delay:1000,direction:&#39;vertical&#39;});

</script>

.- El HTML lo modifiqué de esta manera (si quieres meter más texto, entonces sí que hay que cambiar el "style":

<div id='NewsHorizontal'>

<ul id='TickerHorizontal'>

<li style='background:url(http://.../Urculo.jpg);width:300px;'><a href='http://... blogspot.com/'>Epílogo</a></li>

<li style='background:url(http://.../image.GIF);width:500px;'><a href='http://cuentos-historias.blogspot.com/'>Revolutum</a></li>

<li style='background:url(http://.../jpg);width:300px;'><a href='http://nada-junio.blogspot.com/'>Nada</a></li>

<li style='background:url(http://.../snow7.jpg);width:400px;'><a href='http://JJ-junio.blogspot.com/'>JJ</a></li>



<li style='background:url(http://.../header_image_04.jpg);width:500px ;'><a href='http://moopruebas.blogspot.com/'>Moopruebas</a></li>

</ul>

</div>

Tengo una idea para ponerle un "fade" (el del foro no me funciona")... a ver si le dedico un buen rato y ya veremos... :)
--------------------------------

Nada de nada: El autor ha retocado los códigos y ya no funciona como lo hacía... :(