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

Más......

SlimBox (Mootools)

La página del autor da error en el servidor... debe ser porque está arreglando el hack, que no mostraba el fondo para nada, ni en IE ni en Firefox. Eso sí: se me han ido a Pimiango las imágenes (load, prev, next, close)... de manera que tengo que rehacer el CSS y el js.

Maldición... (jajajjaaaa). Bueno: el caso es que se vea algo.

Ya reharé los scripts para "recodárselas" a mi slimbox. Cuando lo tenga hecho, coloco la explicación.

Más......

FX-Scroll (Mootools)

Cielo|Nieve|Arbol desnudo|Ultimas hierbas

Cielo

Nieve

Arbol desnudo

Ultimas hierbas

Así se hace:

1. .- Scripts:
   

   
   <script language='javascript' src='http://junioscripts.googlepages.com/mootools.svn.js' type='text/javascript'/>
   
   
   <script type='text/javascript'>
   <script type='text/javascript'>
   
   window.addEvent(&#39;domready&#39;, function(){
   
   var scroll = new Fx.Scroll(&#39;demo-wrapper&#39;, {
   
   wait: false,
   
   duration: 2500,
   
   offset: {&#39;x&#39;: -200, &#39;y&#39;: -50},
   
   transition: Fx.Transitions.Quad.easeInOut
   
   });
   
   
   
   $(&#39;link1&#39;).addEvent(&#39;click&#39;, function(event) {
   
   event = new Event(event).stop();
   
   scroll.toElement(&#39;content1&#39;);
   
   });
   
   
   
   $(&#39;link2&#39;).addEvent(&#39;click&#39;, function(event) {
   
   event = new Event(event).stop();
   
   scroll.toElement(&#39;content2&#39;);
   
   });
   
   
   
   $(&#39;link3&#39;).addEvent(&#39;click&#39;, function(event) {
   
   event = new Event(event).stop();
   
   scroll.toElement(&#39;content3&#39;);
   
   });
   
   
   
   $(&#39;link4&#39;).addEvent(&#39;click&#39;, function(event) {
   
   event = new Event(event).stop();
   
   scroll.toElement(&#39;content4&#39;);
   
   });
   
   });
   
   </script>
   
   


NOTA: LOS SCRIPTS QUE DOY HAN DE IR SIEMPRE EN ESE MISMO ORDEN. SI SE CAMBIAN, LO MAS PROBABLE ES QUE SE ALTERE EL HACK Y NO FUNCIONE.


2. .- CSS:
   

   
   #demo-bar {
   
   margin: 5px auto;
   
   padding: 5px 0;
   
   width: 600px;
   
   border-bottom: 1px solid #B3D4EF;
   
   background: #EFF8FF;
   
   text-align: center;
   
   }
   
   
   
   #demo-wrapper {
   
   margin: 5px auto;
   
   overflow: hidden;
   
   height: 400px;
   
   width: 600px;
   
   border: 1px solid #ddd;
   
   position: relative;
   
   }
   
   
   
   #demo-inner {
   
   width: 1600px;
   
   height: 1600px;
   
   background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPx91M-XhzuimdQjpU5RvSaWLQgQAAfq1OhOMDIuY5Uhs3Hb21aShIESStQWX7Mjiu09WbYnhDi1oZqkf9vAkAFFAfx2LnXwcVRT0JCpgep_184saKcdh3ZBtZ4EMoWkVkO7md4pLFL7M/s1600/FX.jpg);
   
   position: relative;
   
   }
   
   
   
   .scrolling-content {
   
   background: #000;
   
   width: 139px;
   
   height: 73px;
   
   text-align: center;
   
   position: absolute;
   
   }
   
   
   
   .scrolling-content h1 {
   
   color: #fff;
   
   padding: 25px 0;
   
   font-size: 12px;
   
   }
   
   
   
   #content1 {
   
   right: 750px;
   
   top: 100px;
   
   }
   
   
   
   #content2 {
   
   left: 600px;
   
   top: 550px;
   
   }
   
   
   
   #content3 {
   
   right: 500px;
   
   top: 550px;
   
   }
   
   
   
   #content4 {
   
   left: 1100px;
   
   top: 1000px;
   
   }
   
   


OJO!!: LOS VALORES DEL SCROLL DE LOS CONTENIDOS (CONTENT h1, ha2, h3, h4) DEPENDEN DEL TAMAÑO DE LA IMAGEN, POR LO QUE-NORMALMENTE-DEBEREIS CAMBIARLOS.


3. .- HTML:
   

   
   <div id="demo-bar">
   
   <a id="link1" href="#">Cielo</a> |
   
   <a id="link2" href="#">Nieve</a> |
   
   <a id="link3" href="#">Arbol desnudo</a> |
   
   <a id="link4" href="#">Ultimas hierbas</a>
   
   </div>
   
   
   
   <div id="demo-wrapper">
   
   <div id="demo-inner">
   
   <div id="content1" class="scrolling-content">
   
   <h1>Cielo</h1>
   
   </div>
   
   
   
   <div id="content2" class="scrolling-content">
   
   <h1>Nieve</h1>
   
   </div>
   
   
   
   <div id="content3" class="scrolling-content">
   
   <h1>Arbol desnudo</h1>
   
   </div>
   
   
   
   <div id="content4" class="scrolling-content">
   
   <h1>Ultimas hierbas</h1>
   
   </div>
   
   </div>
   
   </div>
   

WEB DE REFERENCIA: FX.Scroll

Más......