JMiur [E]

Este es un slideshow hiper-simple donde en pocas líneas se explica la forma de crear transiciones utilizando script.aculo.us y por lo tanto, pude servir de base para quien quiera experimentar con el tema.

Como requiere de esa librería, primero que nada, debemos tenerla agregada y lo más simple es cargarla desde los repositorios de Google mismo:
<script src='http://ajax.googleapis.com/ajax/libs/prototype/1.6.1.0/prototype.js' type='text/javascript'></script>
<script src='http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.3/scriptaculous.js' type='text/javascript'></script>
Y ahora, el script en si mismo que podemos poner directamente en la plantilla o cargarlo desde un archivo externo:
<script type='text/javascript'>
//<![CDATA[
var delay = 4000; // la velocidad de las transiciones
var start_frame = 0; // comienza con la primera imagen

// esta es la función qu ejecuta las transiciones cada cierto tiempo
function start_slideshow(delay) {
setTimeout(fadeInOut(delay), delay);
}

// la función de las transiciones usando el efecto Appear se aplica a una lista cuyo ID es slide-images
function fadeInOut(delay) {
return(function() {
lis = $$('#slide-images>li');
new Effect.Appear(lis[1], { duration: 2, afterFinish: function(obj) {
lisFade = lis[0].remove();
lisFade.hide();
$('slide-images').appendChild(lisFade);
start_slideshow(delay);
}});
})
}

// todo se ejecuta cuando se termina de cargar la página
Event.observe(document, 'dom:loaded', function() {
var lis = $$('#slide-images>li');
if(lis.length > 1) for(i = 1; i < lis.length; i++) lis[i].hide();
});
Event.observe(window, 'load', function() {
if($$('#slide-images>li').length > 1) start_slideshow(delay);
});
//]]>
</script>
Y el estilo mínimo que en este caso, será para mostrar imágenes de 400x300:
<style type='text/css'>
#slideshowDEMO { /* es el DIV contenedor que dimensionamos y centramos */
height: 300px;
margin: 0 auto;
width: 400px;
}
#slide-images { /* es la lista con las imágenes */
display: block;
height: 300px;
margin: 0;
overflow: hidden;
padding: 0;
position: relative;
width: 400px;
}
#slide-images li { /* cada item de la lista */
display: block;
list-style-type: none;
margin: 0;
padding: 0;
position: absolute;
}
#slide-images li img { /* cada imagen */
display: block;
height: 300px;
width: 400px;
}
</style>
Como dije, todo es una simple lista de imágenes así que el HTML es algo similar a esto:
<div id="slideshowDEMO">
<ul id="slide-images">
<li><img src="URL_imagen_1" /></li>
<li><img src="URL_imagen_2" /></li>
.......
<!-- seguimos poniendo tantas imágenes como se nos ocurra -->
</ul>
</div>
Y el resultado final será algo como esto:


REFERENCIAS:Andrew Sellick

58 comentarios:

Felipe  

Muy muy bonito y elegante :D ... ademas que le podemos añadir algunos enlaces a las imagenes y se vuelve muy funcional para mostrar algun contenido que queramos destacar.

Genial.! :D

Responder
Gem@  

Me encanta por la sencillez y por ese efecto tan suave nada cansino como ocurre con otros, encima pasamos de jQuery para usarlo así que genial. Creo que es justo lo que me pedía Antonio el otro día y le mandé para acá, voy a avisarle :)

Responder
Graciela  

Jorge parece un siglo que no te veo, me he pegado un 'retiro espiritual' :P

Es de una belleza, fineza, agradable, ahhh ésto lo pondré, en unos días me pongo a trabajar...compatibilizar con jQuery!

Besos!

Responder
Pavelkapaz  

Queda muy bien :)
El efecto de transición no es para nada tosco... es por así decirlo, suave ;P
se agradece jmiur

Responder
Bonzu Pipinpadaloxicopolis III  

Supongo que no habrá problema al usar enlaces, verdad JMiur?

Responder
JMiur  

Felipe:
Es hiper simple y sí, se pueden agregar enlaces .

Gem@:
Es suave y la velocidad se puede regular con facilidad cambiando un número.

Graciela 3
Noté la ausencia qpero no sabía nada del "retiro espiritual" :D
Esto lo tiene que probar por que no usa jQuery así que no puede quejarse. No tiene excusas :D

Pavelkapaz
Sí, es suave, los efectos de estas librerías siempre funcionan bastante bien.

Bonzu:
No, no hay problema con eso, sean enlaces comunes o que utilicen alguna ventana modal.

Responder
Graciela  

Jmiur 6: antes de leer su comentario, me he dado cuenta que el Retiro ;) no ha resultado :(( es lo que tengo en el blog!
La pobrecita jQuery es la que no se hace amiga, ya lo lograremos, habrá que mimarla!

Nuevo Retiro: psiquíatrico!

Responder
Juan Pedro  

Excelente aporte!!! Ya lo estoy utilizando en mi último post. Sólo un par de dudas:

Te las mando por email, porque por aquí, me aparece estas alertas:

Su HTML no es aceptable: Tag is not allowed: SCRIPT
Su HTML no es aceptable: Tag is not allowed: cierre del head
Etc. y no recuerdo como hacer para postearlos para que lo veas por aquí.

Gracias de antemano!!!

Responder
JMiur  

Graciela: ¿Retiros psiquiátricos? Demasiado :D

Juan: Recién te respondí tu mail.

Responder
Juan Pedro  

Jorge:

1.- En cuanto al tema de los nombres de los widget, expandiendo artilugios y eliminando lo sugerido, tema solucionado.

2.- Respecto al tema de las librerías, ya están actualizadas en mi plantilla, (es normalmente lo que hago con los programas que utilizo, tenerlos actualizados pero como esto es otra cosa, por lo menos para mí, de ahí la consulta). Una observación: Luego de la actualización, es como qué, las imágenes cargan muchísimo más rápido.

3.- Cuando te consulto:

Y la última, ¿cómo hacer para poder publicar todo esto en tu página sin que sea bloqueda por la advertencia: ...Su HTML no es aceptable?

Me refiero estrictamente a la imposibilidad de escribir HTML sin que se me bloqueé la escritura en el formulario de comentario que tenés en tu blog, justamente eso, (Sin que me aparezca la advertencia: "Su HTML no es aceptable"), esto motivó que te hiciera la consulta por email.

Como siempre, un millón de gracias por las prontas y solucionadoras respuestas!

Responder
JMiur  

Juan.
Es posible que funcionen más rápido, desconozco si es así pero, la lógica dice que el código debería haber mejorado ... no siempre es así pero, a veces si :-)

Ya entiendo lo del HTML.

En el formulario, no puede escribirse HTML salvo unos pocos codigos de formato como negritas etc. Para escribir un código, debes reemplazar los caracteres < y > por sus equivalentes:
&lt; y &gt;

Responder
Juan Pedro  

Más claro no podrías ser, nuevamente un millón de gracias por tu santa paciencia!!!

Un abrazo!

Responder
JMiur  

Perfecto, Juan :D

Responder
XIC nou barris  

hola JMiur, suelo pasarme a menudo por tu blog pero no suelo comentar porque para mis pocos conocimientos tus entradas son palabras mayores ... esta entrada me iría bien para una presentación que tengo que hacer del viaje que se hizo de hermanamiento con nicaragua -boris vega- (salvando el nido), he copiado todo tal cual lo tienes y la última parte en que hay que poner las imágenes lo he puesto en un elemento javasprit,,, es correcto ??? he hecho la prueba con solo 2 fotos y siempre me salen estáticas, no se si habré entendido bien tus explicaciones.
te agradecería tu ayuda.
el blog trata sobre la red de intercambios de conocimientos.
muchas gracias

Responder
JMiur  

XIC nou barris:
¿Tienes algún ejemplo que pueda verse online? Así lo chequeo para tratar de descubrir el problema.

Responder
XIC nou barris  

buenos días JMiur, te agradezco la respuesta tan rápida, en el blog te dejo la prueba que he hecho, siguen saliendo estáticas las fotos, las medidas son las que tu recomendabas para todas ellas, ya verás el resultado, igual es por la plantilla porque el marco de la foto también lo corta.
muchas gracias por toda tu ayuda.

Responder
JMiur  

Fíjate como se ve el script agregado.

En el código fuente, lo veo escrito todo en una sola línea. Eso pude ser por el modo de copiar y pegar o bien por el navegador que usas.

Elimínalo y vuelve a pegarlo para que se vea tal cual se muestra en el archivo. Separando las líneas ya que sino, todo lo que sigue a //<![CDATA[ se toma como comentario y no se ejecutará.

<script type='text/javascript'>
///<![CDATA[
var delay = 4000;
...............
//]]>
</script/>

Empecemos por eso para ver el resto. Creo que el tema de las imágenes cortadas es simplemente un ajuste que deberás ahacer en el CSS para especificar el tamaño exacto de las imágenes que usas.

Responder
XIC nou barris  

buenos días JMiur, gracias a tu ayuda puedo ver las fotos en transición, para otra vez me fijaré mejor en que quede tal cual tu lo explicas.

con el tema del cuadro he probado diferentes medidas, medianas, pequeñas, grandes y con todas pasa lo mismo, o sea que he vuelto a dejar las medidas tuyas, solo con ver las fotos pasando ya me doy por satisfecha, JMiur si te estoy complicando el tema, lo dejamos tal cual se ve.

agradecida por tu ayuda
núria

Responder
JMiur  

La animación la veo perfecta, ahora, veamos si esto resuelve el tema de los tamaños.

Me parece que en tu plantilla, todas las imágenes colcoadas en una entrada, tienen un padding y un borde y puede ser eso lo que está impidiendo que estas se muestren bien.

Agrégale esto al CSS de lla animación:

#slide-images li img {
..........
border: none !important;
padding:0 !important;
}

Responder
XIC nou barris  

bueno JMiur a la 3ra va la vencida, me guardaré las instrucciones como oro en paño, me ha quedado sublime gracias a ti, ahora miraré con profundidad todas tus entradas para ver si encuentro lo mismo para la sidebar.

eternamente agradecida y hasta la próxima.
núria

Responder
JMiur  

Perfecto. Me alegra que se haya solucionado :D

Responder
PedroX  

Hola JMiur.. mira, tengo un problema con este Slide, y es que no me funciona.. No sé si es que hice mal algún paso:

Coloqué el codigo de las librerias debajo de < head>, Coloqué el script en sí encima de y seguido el CSS.. Y el codigo html lo coloqué en una "pagina estática".. No sé si el problema será que la pagina estática la tengo con un diseño distinto. Fíjate http://www.hastaabajosomos.com/p/pagina.html Entonces no sé si será que tengo que algún codigo en otro lugar.. No sé!

Gracias!

Responder
JMiur  

Si usas JQuery no puedes usar Prototype y visceversa. Por eso no funciona.

Si usas JQuery busca un slider para esa librería.

Responder
Imagina  

HOLA JMIUR REALICE TODO RAL CUAL INDICASTE PERO ME QUEDA HELADA EN LA PRIMER IMAGEN... SERA TAL VEZ PORQUE CAMBIE LAS MEDIDAS DE LAS IMAGENES EN EL CSS?? REEEMPLACE TODOS LOS 300 POR 600 Y LOS 400PX POR 800PX PORQUE NECESITO QUE SEA GRANDE.
LA DIRECCION DEL BLOG ES IMAGINASAILING.BLOGSPOT.COM
OJALA PUEDAS AYUDARME
MARIANA

Responder
JMiur  

Aparentemente, en ese blog, lo que ocurre es que Scriptaculous no se está cargando de manera completa, falta la parte de efectos que es la que usa el script y por eso no funciona nada.

Es extraño porque, por lo que veo, el código para cargar Prototype y Scriptaculous es correcto. Podría llegar a ser alguna interferencia de otro script o bien que requieras agregarle la clave del API. Esto último me ocurrió una vez y colocar esa clave (que se saca en un instante), resolvió el problema. Para eso, fíjate en esta entrada.

Llegado el caso, también podrías probar en una plantilla que no tenga tantos scripts agregados e incluso repetidos porque puede ser que algo de eso esuviera influenciando e impidiera que se cargue la librería.

Responder
ESNAPRI  

Hola de nuevo, J.Miur.
Me ha gustado mucho este slideshow y tengo varias preguntas ya que me gustaría utilizarlo en el, digamos, blog principal que estoy montando y anunciar con esto los demás blogs que tengo.
1ª,- ¿Puedo emplearlo como cabecera del blog ?
2ª.- ¿Puedo cambiar el marco que rodea las imágenes?
3ª.- ¿En qué partes de la plantilla (HTML), debo incluir cada código?
Bueno....por el momento, creo que será mejor, cerrar la boca. No es mi intención "asaltarte a preguntas". Lo malo de esto será que como me ponga manos a la obra, pueden llegarte unas cuantas más.
Perdona que te ande molestando pero mis nociones en todo este tema, son escasas.
Gracias anticipadas por tu ayuda.

Responder
JMiur  

Sí, puedes usarlo como cabecera y modificar cualquier parte.

Para modificar o crear un diseño personal, debes modificar el CSS agregando las propiedades; en el ejemplo que está en el post, no hay nada de eso, sólo se incluyen los detalles mínimos que habría que poner y no contiene ningún tipo de borde, fondo u otros detalle gráfico.

El script y el style van antesde de </head> y el HTML se coloca donde quieras mostrarlo, directamente en la plantilla o dentro de un elemento HTML.

Responder
ESNAPRI  

Aaaahh, qué bien. Pongo manos a la obra ya mismo.
Gracias por tu pronta respuesta.

Responder
JMiur  

Suerte y ... paciencia :D

Responder
Karla  

:D Ahh JMiur, me encantó este SlideShow y ya lo agregué a la plantilla que te mostré, super sencillo para que cualquiera pueda personalizarlo sin problemas.

Todavía no la termino, me faltan detalles per ahí vá:

http://atheros-compartidisimo.blogspot.com/

;) Gracias!!

Responder
JMiur  

Perfecto, Karla :D

Responder
MuviCuts  

Thanks for your great help. I have placed this slide show on my newly created blog. Everything is fine with the slide show but I am facing one problem - The slide show is showing on inner pages also where it should show only on homepage.
I can not understand where I went wrong.
My blog address: http://risks-cigarette-tobacco-smoking-weed.blogspot.com/

Please help

Responder
JMiur  

You have to use conditional tags to avoid it. By example:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id="slideshow">
............
</div>
</b:if>

Responder
Paula  

Hola! es la primera vez que escribo por aquí y primeramente GRACIAS, :)he utilizado este slideshow en mi blog y queda estupendo.
El único detalle que no consigo solucionar es que lo he utilizado a modo de cabecera (pero sin ser el widget de cabecera blogger) y me gustaría que al igual que ésta comenzara a mostrarse donde empieza el ancho del blog y no como unos 40px más a la derecha. El problema es que no se qué tocar en la plantilla html para que los elementos header (creo que se dice así), los situados encima de la sidebar y las entradas) no dejen ese margen por defecto. imagino que hay que meterse con padding e historias raras pero es que ya ahí me pierdo.. :S ¡espero que puedas echarme una mano y que me haya explicado suficientemente bien!
gracias nuevamente.

Responder
JMiur  

Paula:
Para eso, imagin oque deberías quitarle los márgenes. Por un lado, al gadget en si mismo porque Blogger agrega uno. Para eso:
.header-inner .widget {margin: 0 !important;}

Luego, el slider en si mismo que está centrado en el blog; para eso, cambias margin: 0 auto; por margin: 0; en esta aprte:

#slideshowDEMO {
...
margin: 0;
}

Responder
Paula  

muchísimas gracias :) ¡solucionado! ahora mi próximo proyecto es eliminar la sidebar completa en una etiqueta en concreto.. veremos la suerte que corro resolviendo el enigma. si veo que se me vuelve imposible ya te preguntare ;)
muchas gracias de nuevo.

Responder
JMiur  

Suerte, Paula :D

Responder
Diego Zulueta Piastra  

Hola, es la primera vez que escribo y tenía una pregunta. Tengo un blog de ajedrez y he pensado en algo parecido para poder cargar varios ejercicios de ajedrez en imágenes, es decir, varios diagramas en una misma ventana, pero me gustaría que en vez de ir presentándose el usuario tuviera que tocar algún tipo de botón para pasar a la siguiente imagen. Además he visto que se pueden añadir url. ¿Cómo? o, como podría hacer para poniendo el ratón encima de la imagen saliera un texto aclaratorio o la pregunta del ejercicio.
Gracias de antemano

http://ajedrezalaescuela.blogspot.com

Responder
JMiur  

Algo similar pero con "botones" es el ejemplo de esta entrada.

Responder
EmmaX  

una pregunta se puede cambiar el efecto a otro que no sea appear?? como por ejemplo que las imagenes se vayan moviendo para la derecha y asi cambien??

Responder
JMiur  

Todo es posible; puedes usar cualquier efecto pero claro, hay que modificar el script en si mismo, cosa nada sencilla.

Responder
César  

Saludos desde España nuevamente, JMiur. Cada vez que "estudio" tu página me impresiona un poco más la magnitud del trabajo que vienes realizando desde hace años con una solvencia y constancia a prueba de bombas (!)

Y ya entrando en materia, me gustaría plantearte una cuestión muy concreta al hilo de este magnífico script: ¿cómo añadirle una instrucción o rutina que permita detener momentáneamente el slideshow para recrearnos en una o más imágenes específicas?

Gracias anticipadas.

Responder
JMiur  

Eso podría respondértelo, obviamente, sería posible pero me excede ya que deberían agregarse más eventos para controlar esa parte.

Responder
randy  

ok todo muy bien pero como hacer para colocarle numeración en la parte de abajo pra mostrar solo una imagen la que yo quiera

Responder
JMiur  

Para eso, debes modificar el script y casi diría, hacer otro distinto. Es algo en lo que no puedo ayudarte.

Responder
César  

Estaba casi seguro de que mi planteamiento no tenía una respuesta sencilla. En cualquier caso, gracias por tu atención.

Responder
Christian Dan Bejarano  

Hola!
el Script me va perfecto, muchas gracias!
Sin embargo hay algo que no soy capaz de solucionar, como verás aquí:
http://arteyanimacionfinal.blogspot.com.es/

debajo del Slide me genera un margen enorme por debajo.

¿como lo elimino?
Muchas gracias!
Christian

JMiur  

No veo que haya ninguna clase de margen excesivo, se ve normal.

Responder
bring_me_the_horizon  

No veo el slideshow. ¿Sigue funcionando?

JMiur  

No veo que haya ningún problema.

Responder
naxo mangrana  

Hola JMiur. Quería consultarte una cosita. Este verano estuve trasteando con distintos slideshows de javascript y al ver el tuyo decidí utilizarlo para una práctica de crear una página web sencilla para utilizarla en el colegio, ya que no hacía falta alojar ningún script del lado servidor. La práctica era con Dreamweaver. Pues bien, una vez realizada en dreamweaver y alojada en conjunto en dropbox, resulta que el slide se ve bien en explorer o en firefox, paro no funciona en chrome. Es un tanto extraño porque si la previsualizo de manera local si que funciona.
El blog donde está es http://culturambo.blogspot.com.es/ y la entrada es la de la pestaña Informática > Prueba web y mas directo
https://dl.dropbox.com/u/3567207/Culturburgo/index.html
¿Alguna idea de por qué pasa esto? Gracias

JMiur  

No veo problema alguno en Chrome, lo veo funcionar perfectamente desde DropBox aunque convendría que no se usara https sino http para

En el blog, en cambio, si es esta página:
http://culturambo.blogspot.com.ar/2012/08/proyecto-web.html
no se ve porque no se cargan los scripts alojados en DropBox. No sé si eso es un problema temporal o no.

También revisa el código ya que estás cargando jQuery dos veces y eso es innecesario.

Responder
Admin  

hola he hecho los mismo pasos que tienes en el tutorial y no consigo que las imagenes cambien no hacen el efecto de la transición. aver si ves el error http://lomaximohost.com/slider/sliderLMM.html solo he cambiado el tamño en el CSS.

JMiur  

Tiene un archivo
http://lomaximohost.com/slider/slider.js
que incluye las etiquetas <script> y </script>
eso es un error, los archivos JS no deben contener etiquetas.

Admin  

muchas gracias ese era el error :D ya funciona perfecto

Responder
Alvaro Nicolas Gómez López  

Hola, mira aca en esta web no funciona www.chiletudestino.cl es el slide de abajo que esta mal?

JMiur  

Aunque no veo dónde está el ejemplo, es lógico que no funcione ya que en ese sitio usan la librería jQuery y son incompatibles. Si bien, con cambios y agregados, es posible usar ambas juntas, esto no es recomendable en absoluto así que conviene que busquen un slideshow para jQuery o uno que no requiera librerías extras.

Responder
Maxita  

gracias, me sirvio mucho, muy bien explicado :)

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