JMiur [E]

Fácil, original, flexible, así es Horinaja, un script que nos permite crear slideshows que se manejan con la rueda del ratón, desplazando los contenido con una animación horizontal.

Hay dos modelos, uno para quienes tenemos Prototype + Scriptaculous y otro para quienes usan jQuery. En cualquiera de los dos casos, descargamos el archivo RAR, lo descomprimimos y allí nos encontraemos con el archivo class.horinaja.scriptaculous.js o class.horinaja.jquery.js que es el único que necesitamos y lo alojamos en un servidor propio o lo copiamos y pegamos en la plantilla.

Y luego, el CSS:
<style type="text/css">
/* la clase que controla el slider */
.horinaja ul {
list-style-type: none;
margin-left: 0;
position: relative;
}
.horinaja ul li {
background: transparent;
list-style-type: none;
display: block;
top: 0;
}
/* la clase que controla la paginación optativa */
ol.horinaja_pagination {
background: transparent;
clear: both;
height: 40px;
margin: 0 auto;
padding: 5px 0 0 0;
position: relative;
}
ol.horinaja_pagination li{
display: block;
float: left;
height: 40px;
}
ol.horinaja_pagination li a {
background: transparent;
color: white;
display: block;
height: 40px;
float: left;
font-size: 16px !important;
font-weight: bold;
line-height: 40px;
padding: 0;
text-align: center;
width: 40px !important;
}
</style>

Lo usamos incluyendo una lista dentro de un DIV que tenga establecida la clase horinaja:
<div id="nombreID" class="horinaja">
<ul>
<li> ... el contenido 1 ... </li>
<li> ... el contenido 2 ... </li>
...
<li> ... y así sucesivamente ... </li>
</ul>
</div>
<script type="text/javascript">
document.observe("dom:loaded", function() { new Horinaja(nombreID,velocidad,delay,paginacion); });
</script>
donde:

nombreID es el ID del DIV contenedor y debe ser un nombre único
velocidad y delay indican el tiempo de la animación al siguiente slide (en segundos)
paginacion indica si queremos que se muestre una lista numerada de los slides (true) o no (false)

Por ejemplo:
document.observe("dom:loaded", function() { new Horinaja('demohorinaja',0.5,20,false); });
En lo personal, creo que hay que darle altura y el ancho al DIV contenedor y ocultarlo hasta que se cargue así que, por ejemplo, usaría algo así:
<div id="nombreID" class="horinaja" style="display: none; height: 250px; width:480pcx">
De este modo, lo mantendría oculto hasta que se cargue ya que si el contendio es "pesado", el efecto se ve mal hasta que termina de cargarse.

Para hacerlo visible, usaría la misma función, algo así:
document.observe("dom:loaded", function() { new Horinaja('nombreID',1,20,true);
document.getElementById('nombreID').style.display='block';});

33 comentarios:

PedroX  

Hola JMiur!! Bueno, esta vez te hago una pregunta sobre GMail.. que sé que lo usas desde hace tiempo, la pregunta es:

Se puede cambiar "worldreggaeton@gmail.com" por "loquesea@gmail.com" .. eso!! (Creo que es imposible, pero preguntando no pierdo nada XD)... Y, si no se puede, habra una forma de elimnar este gmail, y con la misma cuenta google crear otro, y no perder los correos??

Bueno, sé que estoy pidiendo mucho... Pero ojala se pueda!!

Gracias!

Responder
Gem@  

Es tan curioso el nombre como que proporcione el script para Prototype y jQuery. Sería bueno que a partir de ahora todos pensaran en darle la vuelta a la tuerca y cualquier script funcionara con las dos librerías.
Mucho pedir creo... :)

Responder
sonia sorianio  

Hola , gracias por todo lo que nos cuentas
esta perfecto. Lo único es que en estos slide nunca se contempla la posibilidad de poner una leyenda explicativa a la foto como se puede hacer con comboost o Slide por dar un ejemplo. Puedes explicarme cuales son las ventajas del sistema que apuntas en relación con los comboost o slide .
Ventajas y desventajas
Gracias por toda tu ayuda y tus posts siempre interesantes y divertidos que nos recuerdan que! No solo somo codigo!

Responder
Anónimo  

Hola. PedroX, podés añadir una nueva cuenta Gmail a la que tenés y usarla como cuenta principal. Tenés que crear una nueva y configurar en la anterior como cuenta principal la que creaste. El nombre de usuario no se puede cambiar, pero de esa forma envías y recibís por la nueva cuenta

Responder
Inmortal  

Excelente ;)!

Saludos

Responder
Jabba  

Me salgo del tema del post para informarte de un asunto que creo que puede resultar interesante. No sé si recordarás la famosa petición de insertar el elemento archivo del blog y las categorías en una entrada de manera similar a lo que se puede hacer en Wordpress. Pues bien, visitando el Escaparate de nuestra querida Rosa he encontrado la manera de hacerlo (a mano eso sí) con un resultado más que decente. Sólo espero que Rosa no nos siente ante los tribunales exigiendo derechos de autor por la idea ;).

Un saludo!

Responder
Anahí  

Maravilloso, me encanta para las imágens, andaba buscando alguna forma de slideshow que no sea una aplicación externa.
Saludos.

Responder
JMiur  

PedroX: Tal como dice le_o, no se puede cambiar el nombre pero si crear otra y redirigir todo a la nueva.

Gem@: Sería bueno, realmente. Imagino que es mucho trabajo "traducirlas" y por eso no hay muchas que se adapten a las distintas librerías.

Sonieta: Ventajas y desventajas no doy. Son herramientas así que todas sirven. En este caso particular, no se trata de un slideshow sino de algo más genérico, Lo que se muestra es contenido, cualquier contenido así que bien podría tener explicaciones de las imágenes, videos, textos, lo que se te ocurra; en ese sentido, no tiene limitaciones.

Jabba: me alegra que encontraras algo que te fuera útil. Imagino que es un post donde agregas los datos manualmente.

Anahí: Si, lo veo muy interesante y muy flexible. Creo que será útil a demás de ser bastante sencillo de hacer.

Responder
Unknown  

;) desde hoy que ese nombre Horinaja :O suena a hinojo, contenedor de orina...pero además ha fallecido la ruedita del ratón :S
El efecto queda bonito, tengo un modelo pero en este momento no recuerdo, estoy renegando sí con los fondos !!!dale con los fondos!!!...buen lunes :)

Responder
JMiur  

Suena raro el nombre, ¿verdad? :D Siga con los fondos, Graciela, por ahora va bien :D

Responder
Anónimo  

Retomo la pregunta sobre Gmail de PedroX porque me faltó decir que si puede abrir una cuenta Gmail nueva, porque implementaron la verificación por sms y en muchas regiones y con muchas compañías prestadoras de telefonía móvil no es posible. Increíble pero cierto.
Saludos.

Responder
Anónimo  

Hola... interesante slideshow, tengo una duda, cómo hago para que el slideshow no se reproduzca y solo funcione cuando yo presione los números.. Muchas gracias

Responder
JMiur  

No sabría decirte si eso es posible.

Responder
Unknown  

Hola, quisiera ver si me podrias ayudar con tus ejemplos, mandandomelos en un zip a mi correo, porque aqui la vdd no entiendo ni papa...no se donde colocar nada, te lo agradeceria muchooooo :P

Responder
Unknown  

Hola, pues no he podido hacerlo funcionar en IE6, me muestra todos los "li" al mismo tiempo, y veo que aqui funciona a la perfeccion, no tendras un link para descargar tus ejemplos, o de favor mandarlos a mi correo calliasesores@gmail.com

Responder
JMiur  

No, no tengo nungún archivo extra. Tampoco lo he probado en IE6.

Responder
el viaje  

donde ubico el codigo CSS?, la verdad me estoy iniciando esto y no se como colocar el codigo espero me puedas ayudar te lo agradeceria de antemano.

saluods

Responder
JMiur  

El CSS puede ir antes de </head>

Responder
el viaje  

Hola JMiur gracias por responder, la verdad no he podido hacer funcioanr el slide, me da error y no me aparece, no se que que paso hago mal, he leido varias veces los pasos y no logro insertarlo, casi qaue me doi por vencido por lo cual pido tu ayuda

hace tiempo que trato de insertar un slideshow con contenido pero siempre me da errores o queda mal configurado, no soy muy entendido en el tema la verdad tu blog me ha ayudado mucho, quizas la plantilla que utilizo no es la adecuada o deberia buscar otro slide o quizas cambairme a wordpress :s

te dejo el archivo de mi plantilla, ojala me puedas aconsejar o ayudar en el tema

http://www.mediafire.com/?mzzdmnovyte

gracias de antemano

German.

Responder
JMiur  

Tendría que ver un ejemplo online para responderte.

Responder
el viaje  

este es el blog con los codigos insertados

valdiviapruebas.blogspot.com

Responder
JMiur  

Si estás usando la versión de JQuery:
http://elviajerock.awardspace.com/class.horinaja.jquery.js
te falta agregar la librería JQuery que debe ser insertada antes del script del slideshow; por ejemplo, asi:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js' type='text/javascript' />

Responder
aguantecallecalle  

he probado con lo ultimo y aun sigo sin ver el slide =/

inserte esto antes del head, te lo dejo en un .txt

http://www.mediafire.com/?tqyynnnj2nj

gracias por la ayuda

Responder
JMiur  

Eso es porque la sintaxis para JQuery es diferente; Fíjate en esta página.

Responder
Manuel G. Romero  

Hola JMiur, tengo una duda, no entiendo como se relaciona el archivo .js subido al servidor y el css que has puesto en el post.
Osea en que momento indico la direccion del .js que he subido a mi servidor?

Responder
JMiur  

Manuel:

Lo agregas del mismo modo que cualquier otro script; por ejemplo:

<script src="URL_archivo" type="text/javascript"></script>

Puedes hacerlo en un post si es que sólo lo vas a usar en una entrada o bien en la plantilla, antes de <head&gt si es que es algo que mostrarás en todas las páginas. Sólo debes tener en cuenta que ese archivo, debe ser cargado despues de JQuery o os Prototype+Scriptaculous.

Responder
Manuel G. Romero  

Osea que si decido pornerlo en un post debo ponerlo asi?:

[script src="URL_del_js" type="text/javascript"]
document.observe("dom:loaded", function() { new Horinaja(nombreID,velocidad,delay,paginacion); });[/script]
(no me deja poner <>)

Otra duda, donde dices "Y luego, el CSS", ese codigo donde debo colocarlo exactamente en la plantilla?

Perdona mi torpeza, pero es que estoy empezando en esto.
Muchas gracias.

Responder
JMiur  

Si va en una entrada, allí debe colocarse el DIV y la llamada a ala función, eso que esta luego del texto
Lo usamos incluyendo una lista desntro de un DIV que tenga establecida la clase horinaja


Pero, previamente, también debe tenerse cargado el scrip base que puede ir antes, en el mismo post o en la plantilla.

El CSS puede ponerse en la plantilla junto con el resto, es dicer, antes de </b:skin>

Responder
Marcos Horro Varela  

He insertado un SlideShow desde otra plantilla y funciona a la perfección. He hecho una entrada explicando así por encima cómo se coloca, échale un vistazo y dime si te gusta :)

http://www.markos-design.com/2010/03/slideshow-con-javascript.html

Saludos

Responder
Anónimo  

oye jmiur ise todo bien solo que como le puedo poner por ejemplo el slime el ultimo de la entrada con todo y paginacion, como puedo poner una pequeña descripcion de la imagen? y que tenga link a la entrada?

Responder
Anónimo  

oye jmiur se me paso preguntarte como agrego las imagenes y la descripcion? esque donde dice contenido 1 contenido 2 no se como agregar imagenes disculpa pero soy nobato :S

Responder
JMiur  

El contenido es cualquier cosa, cualquier tipo de etiqueta HTML (o casi cualquiera). No sé exactamente qué quierees mostrar pero, una forma sencilla de hacerlo es usar el mismo editor de Blogegr; vrera el contenido y luego, copiar y pegar el código HTML generado.

Responder
ra.  

gracias!

Responder

¿Quiere dejar un comentario?

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

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