Image Flow (Coverflow)

Igual forma de presentar las imágenes que el CoverFlow, sólo que más adaptable para blogger.
El aspecto es el mismo que el de Mooflow, sólo que, en lugar de picar en las imágenes para que se desplacen, funciona manipulando la rueda del ratón.
De momento, podéis ver aquí mi PRUEBA y el hack original en ImageFlow 7.0

Y ya explico cómo lo hice cuando tenga más tiempo :)

Vía: Xyberneticos

.................................

Sigo:

ADVERTENCIA: Tiene una pega este sistema, toda vez que, al señalar el CSS particular de este hack las imágenes en "position absolute", se nos van a la porra todas las demás imágenes que tengamos en el blog. La solución pasa por "advertir" al HTML que la imagen ha de quedarse donde está, de la siguiente manera:

style='position:relative;'

Donde tengáis insertada o vayáis a colocar una imagen, habréis de colocar esa "advertencia" (en la foto del perfil, por ejemplo, dentro del widget en cuestión; en las entradas que lleven alguna imagen; en la definición general de estilo para la imagen en vuestro CSS, etc...).

Una vez hecha la advertencia, podéis ver cómo ha quedado en mi blog de pruebas Imagen y paso a explicarlo:

.- CSS: a insertar dentro de la tag skin de vuestra plantilla:

img {
position:absolute;
top:0px;
border:none;
}
h1 {
text-align:center;
}
a{
color:#fff;
}
.clear{
clear:both;
}
#images{
visibility:hidden;
}
#loading{
margin-top:50px;
text-align:center;
width:100%;
}
#loading img{
margin-top:10px;
position:relative;
}
#captions{
position:relative;
text-align:center;
z-index:10000;
}
#scrollbar{
visibility:hidden;
position:relative;
border-bottom:1px solid #b3b3b3;
z-index:10001;
}
#slider{
position:absolute;
margin-top:-7px;
margin-left:-7px;
z-index:10002;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigypKBlDkS2vgAqHWqyKkZ4S6m9bnzHLgpEMBDrzF7EXB5ZOMCyppOzgKR9II6gNNV8_F93QlwNxdoh_ztk01pf3QcM9XZp_ZFlWnFSU8zpbpZ5H-ezGLiGMYKACH-TjtqptGCJoJGhhI3/s200/slider.png);
background-repeat:no-repeat;
width:14px;
height:14px;
}
#imageflow{
margin-left:350px;
text-align:left;
}

.- SCRIPT: a colocar antes del cierre de la tag head de la plantilla:

<script src='http://.../imagefllow.js' type='text/javascript'/>

.- HTML de llamada al script, en la entrada o lugar de vuestro blog donde queráis ver el ImageFlow:

<div id='imageflow'>

<div id='loading'>

<b>Loading images</b><br/>

<img alt='loading' height='13' src='http://.../loadingflow.gif' width='208'/>

</div>

<div id='images'>

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

<img alt='es bueno beber leche' src='http://.jpg'/>

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



(etc...)



</div>

<div id='captions'/>

<div id='scrollbar'>

<div id='slider'/>

</div>

</div>