Slideshow Mootools

Es el más bonito, a mi juicio, de todos los que andan por ahí: además, tiene un montón de funcionalidades, porque se puede picar sobre las imágenes, dejar que pasen por sí solas o picar en previa, siguiente e, incluso, parar la presentación. Todo ello con efectos de transición, que queda muy guapo.

Cuando tenga tiempo, dejaré la explicación aquí y en mi blog de test, donde podéis, además, ver mi DEMO, justo arriba del footer del blog. Tendría que ajustar las cajas algo más a las imágenes y adecuar el tamaño de éstas, pero... ya me han dado bastante guerra los códigos del slider como para meterme en más, jajjaaaa (ha sido difícil, la verdad...me ha costado bastante aprender a insertarla).

Tengo también que explicar por aquí unas Tooltips de Mootools... y un Fisheye para texto... pero se me acumula el trabajo... de manera que podéis ir echando un vistazo a mi página de Test (DEMO) que os he puesto arriba, ya que allí doy las explicaciones de los códigos, salvo de este slider, que aún no he tenido tiempo...
------------------------------------


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:

1. .- 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/slideshow.js' type='text/javascript'/>
   




2. .- 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;*/
   }
   
   /*************************************************************/
   



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

   
   <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