JMiur [E]

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(http://img80.imageshack.us/img80/622/nextcu7.gif) no-repeat;
}
.dhonishow-previous-picture {
background: url(http://img235.imageshack.us/img235/6748/previousdp2.gif) no-repeat;
}
.dhonishow-next-picture:hover {
background: url(http://img80.imageshack.us/img80/7755/nexthoverqp4.gif) no-repeat;
}
.dhonishow-previous-picture:hover {
background: url(http://img76.imageshack.us/img76/6205/previoushovergb2.gif) 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" ....... >

8 comentarios:

Mar  

Me encantó! :)

Responder
Graciela de Palomas  

qué bello!!!...cuando averigue cómo bajar los archivos...mis hijas no dan bollila a su madre jajaja, intentaré, saludos!!!

Responder
Gem@  

Lo vi hace tiempo y me pareció fantástico, aprovecharé que lo ofreces en bandeja para probarlo :)

Responder
solidaridad  

Perdona jmiur, que te pregunte algo que no tiene que ver con la entrada, pero dime en que parte de la plantilla, se encuentra el ultimo fondo del blog, te explico en el caso de tu blog el color de la plantilla es negro, pero cuando cuando entras a la pagina antes que salgan todos los elementos aparece un fondo de color en el caso del tuyo es de COLOR, AZUL OSCURO O MATE...ayúdame donde tengo que buscar para cambiar el color del "fondo del fondo" de la plantilla.

Responder
Claudio - Poca Tinta  

Gracias Maestro!

Usted si lo pone en cristiano, jajaja. Lo he probado en una pagina web y funciona muy bien. También hay un Backstage Dhonishow interesante.

http://dhonishow.de/backstage

Saludos

Responder
Marcos Cousseau  

muy original! lo tendré en cuenta! :D

Responder
Oscar V.  

hola una pregunta con respecto a donde aprendiste todo esto me interesa mucho saber sobre java, y css html etc bueno si no te jode me podes decir ? asi de ultima si es un lugar voy y averiguo cuanto esta o nose, si podes avisame donde o en que pagina o que tutorial usaste para aprender todo sobre esto saludos y espero

Responder
JMiur  

Realmete es interesate, no es muy flexible pero puede servir para hacer un página principal o incluso un header.

solidaridad: el primer color de fondo que se ve es normalmente el que está definido en body {} en la propiedad background o background-color.

Claudio: ¿Usted me quiere hacer trabajar? :D Ese modelo también está interesante pero usa la librería de jQuery.

Oscar: confieso no haber aprendido en ninguna parte en especial, sólo picoteando información aquí y allá y probando una y mil veces.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR