Dhonishow: Un slideshow particular

Hace unos días, Claudio comentaba sobre un slideshow llamado Dhonishow así que allí fui a ver de que se trataba y si era posible usarlo en Blogger. No parece haber problemas en hacerlo aunque, tal vez, requiera entender como funciona para poder adaptarlo.

Lo primero que debemos saber es que utiliza Prototype y Scriptaculous así que si no las tenemos en la plantilla, debemos descargarlas y agregarlas. Lo más sencillo, es usar las que provee Google, copiando y pegando este código antes de </head>:

<script src='http://www.google.com/jsapi'/>
<script>
google.load(&quot;prototype&quot;, &quot;1.6.0.2&quot;);
google.load(&quot;scriptaculous&quot;, &quot;1.8.1&quot;);
</script>

En el sitio de origen hay un ZIP que podemos descargar y que contiene todo lo necesario. Luego, alojaremos los dos archivos en un servidor y los agregaremos a la plantilla o página web también antes de </head>:

<script src='URL_dhonishow.js' type='text/javascript'></script>
<link rel='stylesheet' href='URL_dhonishow.css' type='text/css' />

Para usarla, vamos a tener que modificar algunas cosas y para modificarlas, vamos a tener que definir previamente qué queremos hacer.

La idea del slideshow es mostrar una serie de imágenes de una manera particular, partidas en tres pedazos que pueden navegarse de manera independiente así que, lo primeo es definir el tamaño de las imágenes a usar y luego, dividirla en tres partes iguales:

En este ejemplo, he partido de una imagen de 510x295 así que me han quedado tres imágenes de 170x295. Esos datos son los que debemos modificar en el archivo CSS, al igual que cualquier otro detalle que quisiéramos personalizar (fuentes, bordes, etc). Estas son las propiedades usadas en el ejemplo:

.dhonishow {
float: left;
overflow: hidden;
width: 173px; /* el ancho de cada sector y un poquito más para que se separen */
}
.dhonishow * {
border: none;
list-style: none;
margin: 0;
padding: 0 0 0 5px;
}
.dhonishow-image {
background-color: #101921;  /* un color de fondo para las transiciones */
height: 295px;  /* la altura de las imágenes */
overflow: hidden;
position: relative;
text-align: left;
width: 170px; /* el ancho de cada sector */
}
.dhonishow-image li {
left: 0;
margin: 0;
padding: 0;
position: absolute;
top: 0;
}

/* el área inferior que permite navegar las imágenes y que es completamente configurable */
.dhonishow-navi {
border-bottom: 1px solid #5E7286;
border-top: 1px solid #5E7286;
color: #FFFFFF;
margin: 2px 0 10px 0;
overflow: hidden;
padding: 5px;
width: 170px; /* el ancho de cada sector */
}
.dhonishow-picture-alt { /* oculto el nombre de cada imagen */
display: none;
}
.dhonishow-navi .dhonishow-next-picture, .dhonishow-navi .dhonishow-previous-picture {
cursor:  pointer;
float: right;
height: 18px;
margin: 0;
text-indent: -999px;
width: 16px;
-moz-outline: none;
}
.dhonishow-navi .paging {
float: right;
font-size: 18px;
margin: 0 10px 0 0;
line-height:18px;
}

#dhonis{ /* es una gregado para centrar todo el slidshow */
width:520px; /* el ancho total incluyendo márgenes */
margin:0 auto; /* así se centra */
}

/* son las imágenes que se muestran como enlaces y puede usarse cualquier otra */
.dhonishow-navi .dhonishow-next-picture {
background: url(archivo) no-repeat;
}
.dhonishow-previous-picture {
background: url(archivo) no-repeat;
}
.dhonishow-next-picture:hover {
background: url(archivo) no-repeat;
}
.dhonishow-previous-picture:hover {
background: url(archivo) no-repeat;
}

Supongamos entonces que todo está listo y ya decidimos qué imágenes poner y las tenemos divididas. Ahora, falta el HTML que, en este ejemplo, como son cuatro imágenes, será algo así:

<div id="dhonis">
<!-- aquí colocamos el sector izquierdo de cada una de las imágenes -->
<div class="dhonishow effect_blind duration_2 autoplay_5">
<img src="URL_imagen-1_parte-1" width="170" height="295" />
<img src="URL_imagen-2_parte-1" width="170" height="295" />
<img src="URL_imagen-3_parte-1" width="170" height="295" />
<img src="URL_imagen-4_parte-1" width="170" height="295" />
</div> 
<!-- aquí colocamos el sector central de cada una de las imágenes -->
<div class="dhonishow middle effect_appear duration_2 autoplay_5">
<img src="URL_imagen-1_parte-2" width="170" height="295" />
<img src="URL_imagen-2_parte-2" width="170" height="295" />
<img src="URL_imagen-3_parte-2" width="170" height="295" />
<img src="URL_imagen-4_parte-2" width="170" height="295" />
</div>
<!-- aquí colocamos el sector derecho de cada una de las imágenes -->
<div class="dhonishow effect_horizontal duration_2 autoplay_5">
<img src="URL_imagen-1_parte-3" width="170" height="295" />
<img src="URL_imagen-2_parte-3" width="170" height="295" />
<img src="URL_imagen-3_parte-3" width="170" height="295" />
<img src="URL_imagen-4_parte-3" width="170" height="295" />
</div>
</div>

Es posible colocar cualquier cantidad de imágenes pero, siempre serán tres sectores.

Cada uno de esos DIVs tiene una clase CSS que es la que controlará el efecto. Puede usarse effect_blind, effect_appear, effect_blind, effect_slide o effect_horizontal.

Con duration_valor, establecemos el tiempo que durará la transición y con autoplay_valor el tiempo que permanecerá visible cada imagen.

Eventualmente, también podría ocultarse la barra de navegación inferior o algunas de sus partes de esta manera:

<div class="dhonishow hide_paging" ....... >
<div class="dhonishow hide_alt" ....... >
<div class="dhonishow hide_navigation" ....... >