Galería Mooflow-Slide

Una forma preciosa de presentar las imágenes, muy parecido a lo que hace el "Coverflow" en iTunes-Apple y las presentaciones de Flash que se ven por ahí... sólo que sin Flash, je.

Me ha costado mucho el integrarlo en Blogger, porque todas las presentaciones de ejemplo que había visto eran de Wordpress. Además, el código que propone (y de donde saqué el hack) Xyberneticos no funciona bien, puesto que las imágenes se presentan en bloque (una debajo de la otra) y no en línea, como debe ser. Finalmente, me las he arreglado por mi cuenta, echando un vistazo a la página del autor original: Mooflow.

Así, poniendo y quitando, el código me ha quedado así:

.- Tres scripts, a insertar dentro del head de la plantilla:

<script src='http://junioscripts.googlepages.com/Mootools-beta-1.2b1.js' type='text/javascript'/>

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

<script type='text/javascript'>

//<![CDATA[

/* MooFlow */

var mf;

window.addEvent('load', function(){

mf = new MooFlow({

container: 'MooFlow',

imgContainer: 'images',

images: '#images img',

caption: 'captions'

});

});

//]]>

</script>

.- Y lo que le faltaba a Xyberneticos: Un CSS (a insertar dentro del skin de la plantilla)

#MooFlow {

background-color:#000;

color:#fff;

visibility:hidden;

position:relative;

overflow:hidden;

}

#MooFlow * {

margin:0;

padding:0;

}

#images {

position:relative;

}

#images img {

position:absolute;

border:none;

}

#captions {

position:relative;

text-align:center;

z-index:10000;

}

#slider {

position:relative;

border:1px solid #b3b3b3;

z-index:10001;

}

#knob {

background:#fff;

width:100px;

height:15px;

}

#nav{

list-style:none;

margin:0;

padding:0;

position:relative;

z-index:10002;

text-align:center;

}

#nav li{

display:inline;

}

#nav a{

color:#fff;

}

.- Por último, el HTML, que va... donde cada quien quiera que vaya, dentro del body-cuerpo de la plantilla:

<h1>Ejemplo Slide</h1>



<div id='MooFlow'>

<div id='images'>

<img alt='01' src='http://3.bp.blogspot.com/_BQrzxz9-EQk/R1HaRyvA6nI/AAAAAAAACAY/Pm_BNGHHHcQ/s200/4.jpg' title='Esta es mi foto 1'/><img alt='esta es mi foto 2' src='http://1.bp.blogspot.com/_BQrzxz9-EQk/R1Ha4SvA6pI/AAAAAAAACAo/brJXLMa0Ums/s200/7.jpg'/>

<img alt='esta es mi foto 3' src='http://4.bp.blogspot.com/_BQrzxz9-EQk/R1HbeCvA6qI/AAAAAAAACAw/QWQDvLtdcAY/s200/1130095651Paisajes1.jpg'/>

<img alt='esta es mi foto 4' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwPazvAPjPXNrOoSTtK80NUlydLluMMdxmgO8GXEvLyt339QAJFIBaL8p1oudr2Cg5CMZ0fimbYdibdjNLB4cpMS1wAP5430B97ew5jCNe7krPMnGO_JOiLKa0tbBpDkFTfXa1mSZugV0/s320/5.jpg'/>

<img alt='esta es mi foto 5' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0A_XFHBI_C7MSJG22FDvENSQJJudC0yvggXByrqgHCvxfgQhRv8Mcr5hlMwSsNuaG8TzIOfYGnXs6C50rwsSG_d_kVxEIL3DJ2VL7Le0HLPkGFxV4dsWASicDBLgoA7h1t2XlTPQbddA/s320/Arturo19_3.jpg'/>

<img alt='esta es mi foto 6' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyW87g9Xf10O9QDVe1-Lpxu90ZsamForrQEz19BlTRjObUHIfinyUIxE393lCbSLb5ww-UBwzefIen1QwhsJsrJNEiPAxroObP7OrGx78N-7fXRnyWZFZG8IiO2mrcY9HcXR__WPltGTg/s320/bamboo.jpg'/>

<img alt='esta es mi foto 7' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjo1IIS5BMIoaGRDqTCy8FpBeqAiCjbmBtiPrnlksAro7FLoMOYiIsJCPC_J-50RxR_DpsqsXQKhwa19rJw_OgAy9X4gp5xs0cPUjypuTU20rvROWRCCLRVE6lPCYO6dVJMB8DbTaRmXyk/s320/villa.JPG'/>

<img alt='esta es mi foto 8' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGq0o0um47fIEuCK4LVoCOyHBw_jV2MlHl4iFolesIomgfLyFoanMIGKBesIRlut8pL_00gIaq7OUe3V8wQYT0av2D14ke2wgMjcTMD4EDFIQUlVLODByBMrZf-UYkwijP4ABUgHXqorM/s320/000.jpg'/>

<img alt='esta es mi foto 9' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3ceOWU7CFAze5jACW1o69NKIgF6zPfrBOopf_slKYt7D_GmvD9A3_tEqPyZq1LNOjrfwKHJFvfr9oyuH_Wc003LnVKhXjkaPKAL0PVmfYBsmQ6nyIWLl6ndPTvXSQAGFbwfQqbMMRz_A/s320/Copia+de+BJ_SMP13.JPG'/>

<img alt='esta es mi foto 10' src='http://2.bp.blogspot.com/_BQrzxz9-EQk/R1LogSvA63I/AAAAAAAACEc/BJqnH67mpOY/s320/naranja.JPEG'/>

</div>

<div id='captions'/>

</div>

Ahora parece muy fácil, pero... anda que no me ha costado :(
Para verlo funcionar, picad con el ratón en cada una de las imágenes, comenzando por la segunda (obvio: la primera no se mueve porque no tiene quien la preceda, hasta no llegar a la última). Podéis verlo en mi Prueba_ImageFlow.
Y un favor: si os gustan las imágenes, por favor-insisto- subidlas a vuestro servidor o utilizad el método para copiarlas sin usar el ancho de banda ajeno... que ya voy notando los efectos de mis imágenes y scripts que vais usando.
(si me dejáis sin banda ni espacio... pues se acabó lo que se daba... y los primeros perjudicados son quienes quieren aprender).