Galeria Cycles

La galería que tengo bajo la virtual box en el blog de pruebas, es también de Moo.rd, y también podéis ver la demo original, así como descargaros el script Moo.rd Aquí
En la página de Ejemplos de Moo.rd podéis ver más galerías con otras funcionalidades y efectos cycle.

De momento, vamos a ver ésta:

.- CSS:

<style type="text/css">

body {

font-family:Verdana, Arial, Helvetica, sans-serif;

}



div#myElement {

width:432px;

height:332px;

overflow:hidden;

}



div#myElement img {

background-color:#EEEEEE;

border:1px solid #999999;

display:block;

height:300px;

margin:auto;

padding:15px;

width:400px;

}



div#thumbs img {

border:2px solid #999999;

margin-right:10px;

float:left;

}



div#thumbs img.active {

border:2px solid #FF6600;

margin-right:10px;

float:left;

}

</style>

Como siempre, cambiad si queréis el fondo, el color de borde de los thumbs de imágenes, etc...

.- SCRIPTS:
Para empezar, el mismo Moor.rd del que hablamos en la Virtual Box:

<script src='http://.../moo.rd_1.3.1_mootools_1.2.js' type='text/javascript'/>

<script type='text/javascript'>

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

var imgs = $$(&#39;#thumbs img&#39;);



var fx = new Fx.Cycles.fadeZoom(&#39;myElement&#39;, {

autostart: true,

duration:2000,

steps: 6000,

onAnimeIn: function(curr, next) {

imgs.each(function(img, i) {

if(i != this.count) img.removeClass(&#39;active&#39;);

else img.addClass(&#39;active&#39;);

}, this);

}

});



[&#39;1&#39;, &#39;2&#39;, &#39;3&#39;, &#39;4&#39;].each(function(el, i) {

$(&#39;img&#39;+el).addEvent(&#39;click&#39;, function() {

if(fx.autostart) {

fx.autostart = $clear(fx.autostart);

fx.autostart = fx.next.periodical(fx.options.steps, fx);

}

fx.goTo(i);

});

});

});

</script>

Podéis cambiar, en este segundo script, cosas como el efecto cycle. Sólo añadiendo el desado al "var fx".

.- HTML:

<div style='width:600px; margin:auto;'>



<h1>Galería Cycles</h1>



<div id='myElement'>

<img alt='1' src='http://.../CelorioSepia.jpg'/>

<img alt='2' src='http://.../Cerrar.gif'/>

<img alt='3' src='http://.../Rostro.png'/>

<img alt='4' src='http://.../Agua.png'/>



</div>



<div id='thumbs'>

<img alt='1' class='active' height='30' id='img1' src='http://.../CelorioSepia.jpg' width='30'/>

<img alt='2' height='30' id='img2' src='http://.../Cerrar.gif' width='30'/>

<img alt='3' height='30' id='img3' src='http://.../Rostro.png' width='30'/>

<img alt='4' height='30' id='img4' src='http://.../Agua.png' width='30'/>

</div>



</div>

Como véis, en la primera parte del código tenemos la imagen "grande", la que se va a desplegar en Galería. La egunda parte agrupa los thumbs de las imágenes (las pequeñitas).

Y listos...