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:
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>
Donec a arcu sit amet velit pharetra tincidunt. Aliquam erat volutpat. Praesent ac consectetur felis. Sed vitae augue eget dolor tristique blandit. Ut porttitor ultrices erat. Curabitur ac lectus sed ipsum venenatis scelerisque vitae adipiscing odio. Proin eget lacus lorem, eu euismod enim. In sodales, augue sit amet pretium volutpat, magna lacus viverra magna, vestibulum lacinia leo erat vel tellus. Suspendisse sed ante quis nibh aliquam commodo! Phasellus nisl tortor, posuere a scelerisque in, iaculis id ipsum. Vivamus in bibendum magna! Etiam congue elementum turpis et aliquet. Suspendisse elit nunc; tristique eget pretium ullamcorper, sodales in libero. Sed nibh est, cursus non ultrices non, volutpat vitae metus. Sed rutrum lectus at lacus ultricies et gravida massa suscipit volutpat.
Pellentesque pharetra; neque quis adipiscing porta, nisl nibh fermentum justo, eget dignissim libero tortor sit amet ligula. Nulla facilisi. Morbi magna dolor, ornare vitae lobortis in, tincidunt quis nisi. Vivamus et urna felis. Donec tristique felis a urna bibendum vitae dictum mauris mollis. Praesent non metus lectus, ornare varius nibh. Nullam nisi quam, commodo sed tincidunt et, vulputate non diam. Cras leo sem, tempor varius semper ullamcorper, porttitor sed turpis. Praesent eget sapien a dui feugiat elementum. Quisque facilisis auctor dui eget faucibus. Pellentesque auctor tristique ultricies. Pellentesque eu viverra ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam magna neque, malesuada eget ullamcorper vel, aliquam ac nullam.
Aenean porta commodo diam, vitae vestibulum urna ultrices a. Etiam posuere posuere nibh; sed adipiscing lorem lacinia vel. Maecenas scelerisque tellus at nisi volutpat in consectetur nisl auctor. In hac habitasse platea dictumst. Nunc scelerisque purus sed erat sagittis tempor? Integer iaculis rhoncus sagittis. Curabitur enim quam, aliquet vel hendrerit ac, accumsan sed eros. Vivamus tristique arcu sed ligula luctus volutpat. Nunc non nisi eu ligula rutrum scelerisque. Vestibulum tellus risus, pellentesque vitae dictum et, adipiscing ut neque. Sed ultricies, nisl a tristique porta, leo neque semper lorem; non interdum metus ipsum at nulla. Mauris suscipit fermentum velit at ultrices.
Proin at nulla nisl, ut porttitor purus. Duis sit amet enim iaculis mi lobortis tempor. Nunc quis arcu arcu; id porta erat. Sed sed libero ut dolor euismod bibendum. Nam sapien ante, pellentesque a malesuada fermentum, varius eget urna. In at felis velit, quis varius lacus? Ut placerat orci pretium elit vestibulum egestas. Sed in facilisis mi. Cras rhoncus elementum purus, id commodo leo laoreet quis. Cras malesuada mattis placerat! Etiam ut enim ut leo ultricies mattis non et tellus. Nullam vel sollicitudin mauris. Integer ante velit, rhoncus a fermentum eget; varius at erat. Nunc suscipit egestas posuere. Ut ut eleifend turpis. Sed pharetra nisl id ipsum tempor facilisis. Nunc eget nibh in augue porta aliquam. Nulla molestie sodales elit lacinia pulvinar. Duis eget lectus dui, a nullam.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:
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í:
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';});
32 comentarios:
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!
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...
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!
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
Excelente
!
Saludos
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!
Maravilloso, me encanta para las imágens, andaba buscando alguna forma de slideshow que no sea una aplicación externa.
Saludos.
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.
;) 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
Suena raro el nombre, ¿verdad?
Siga con los fondos, Graciela, por ahora va bien 
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.
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
No sabría decirte si eso es posible.
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
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
No, no tengo nungún archivo extra. Tampoco lo he probado en IE6.
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
El CSS puede ir antes de </head>
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.
Tendría que ver un ejemplo online para responderte.
este es el blog con los codigos insertados
valdiviapruebas.blogspot.com
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' />
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
Eso es porque la sintaxis para JQuery es diferente; Fíjate en esta página.
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?
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> 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.
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.
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>
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
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?
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
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.
¿Quiere dejar un comentario?
Hay varios métodos posibles.
Uno de ellos es el formulario de comentarios que tan generosamente nos ha regalado Blogger y que funciona sólo de tanto en tanto. Su uso es aconsejable sólo en caso de ser una de esas personas a las que les gustan los retos y los desafíos.
¿No quiere arriesgarse? Haga click para ocultarlo y utilice las otras opciones.
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
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 ...
Los comentarios están siendo moderados y serán publicados a la brevedad.