SlideShow Mootools

El que tengo en el pie de la página, con transiciones y funciones de play, next, previo...

Me costó lo mío realizarlo, pero (al margen de ajustar los cuadros que... paso) ahí está. Cada quien que abra los scripts y los arregle a su gusto y manera: es la parte más fácil de este elemento.

Cómo lo hice:

.- SCRIPTS:
Antes del cierre /head de la plantilla:

<script src='http://junioscripts.googlepages.com/mootools.js' type='text/javascript'/>

<script src='http://junioscripts.googlepages.com/BackgroundSlider.js' type='text/javascript'/>

<script src='http://junioscripts.googlepages.com/slideshow1.js' type='text/javascript'/>

.- CSS:
Dentro del skin (o style) de la plantilla

/**************************************************************

SlideShow
v 1.3

**************************************************************/

.slideshowContainer {
border: 1px solid #ccc;
width: 450px;
height: 300px;
margin-bottom: 5px;
}

.loading {
background: url(images/loading.gif) center no-repeat;
}

.slideshowThumbnail {
outline: none;
}

.slideshowThumbnail img {
border: 1px solid white;
padding: 4px;
}

a:hover.slideshowThumbnail img {
border: 1px solid #ccc;
padding: 4px;
}

.current img {
border: 1px solid red;
padding: 5px;
}

.outline {
border: 1px solid orange;
z-index: 0;
position: absolute;
}

#thumbnails {
/*width: 130px;
float: left;*/
}

/*************************************************************/

.- HTML:
A colocar donde se desee el slideshow, por ejemplo, bajo las entradas, como lo he colocado yo en esta plantilla:

<div id='example'>

<h1>Slideshow (reformado)</h1>

<div class='slideshowContainer' id='slideshowContainer'/>

<div id='thumbnails'>



<a class='slideshowThumbnail' href='http://.../jaguar1.'><img border='0' height='70' src='http://.../jaguar1.jpg' width='100'/></a>

<a class='slideshowThumbnail' href='http://.../leop3.jpg'><img border='0' height='70' src='http://.../leop3.jpg' width='100'/></a>

<a class='slideshowThumbnail' href='http://.../gcheeta1.jpg'><img border='0' height='70' src='http://.../gcheeta1.jpg' width='100'/></a>

<a class='slideshowThumbnail' href='http://.../gtiger1.jpg'><img border='0' height='70' src='http://.../gtiger1.jpg' width='100'/></a>

<a class='slideshowThumbnail' href='http://.../CelorioSepia.jpg'><img border='0' height='70' src='http://.../CelorioSepia.jpg' width='100'/></a>

<a class='slideshowThumbnail' href='http://.../FlorBoli%2B.jpg'><img border='0' height='70' src='http://.../FlorBoli%2B.jpg' width='100'/></a>

<p><a href='#' onclick='show.play(); return false;'>Play</a> | <a href='#' onclick='show.stop(); return false;'>Stop</a> | <a href='#' onclick='show.next(); return false;'>Next</a> | <a href='#' onclick='show.previous(); return false;'>Previous</a></p>



</div>







<script type='text/javascript'>

window.addEvent(&#39;domready&#39;,function(){

var obj = {

wait: 3000,

effect: &#39;fade&#39;,

duration: 1000,

loop: true,

thumbnails: true,

backgroundSlider: true,

onClick: function(i){alert(i)}

}

show = new SlideShow(&#39;slideshowContainer&#39;,&#39;slideshowThumbnail&#39;,obj);

show.play();

});

</script>

</div></div>

Esta página me ayudó a insertar el slide: coldfusion