114

Rotando imágenes con Scriptaculous

Siguiendo con la serie de entradas sobre como usar la librería de script Scriptaculous para añadir distintos efectos en nuestro blog, vamos a ver en esta ocasión como construir un slide de imágenes o banners que podremos colocar en un gadget e incluso en una entrada.


[1] Para empezar tenemos que incluir el código necesario para el uso de cualquier efecto con Scriptaculous (como ya vimos en la primera entrada sobre Scriptaculous, este código solo es necesario incluirlo una vez en la plantilla) así que, si ya lo tenemos incluido nos saltamos este paso.

Si es la primera vez que vamos a usar un efecto mediante Scriptaculous, añadimos este código antes de la etiqueta </head> de nuestra plantilla (Edición HTML):

<script type='text/javascript' src='http://www.google.com/jsapi'></script>
<script type='text/javascript'>
google.load("prototype","1.6.0.3");
google.load("scriptaculous", "1.8.2");
</script>

[2] Añadimos a continuación el código html para construir el slide y el script para conseguir el efecto, que incluiremos como ya dije antes, en un gadget html o en una entrada.
<div style="height: 200px; text-align: center; width: 100%;">
<div class="slide" id="slideshow1">
<div>
<img src="URL_DE_LA_IMAGEN" /></div>
</div>
<div class="slide" id="slideshow2" style="display: none;">
<div>
<img src="URL_DE_LA_IMAGEN" /></div>
</div>
<div class="slide" id="slideshow3" style="display: none;">
<div>
<img src="URL_DE_LA_IMAGEN" /></div>
</div>

</div>

<script type="text/javascript">

start_slideshow(1, 3, 2000);

function start_slideshow(start_frame, end_frame, delay) {
setTimeout(switch_slides(start_frame,start_frame,end_frame, delay), delay);
}

function switch_slides(frame, start_frame, end_frame, delay) {
return (function() {
Effect.Fade('slideshow' + frame);
if (frame == end_frame) { frame = start_frame; } else { frame = frame + 1; }
setTimeout("Effect.Appear('slideshow" + frame + "');", 850);
setTimeout(switch_slides(frame, start_frame, end_frame, delay), delay + 850);
})
}
</script>


Notas y modificaciones:
Lo más apropiado para la correcta visualización del slide, es usar imágenes con la misma medida.

La primera línea del código es la que controla el <div> donde van incluidas las imágenes, y es ahí donde podemos controlar una serie de parámetros:

height: 200px; La altura del div. Sería apropiado colocar un poco más de lo que midan de alto las imágenes.

text-align: center; El contenedor de las imágenes estará centrado respecto al lugar donde se coloca, por tanto las imágenes del slide también.

width: 100%; Es el ancho del <div> que contiene el slide. En este caso he puesto 100% para que se adapte al espacio total de donde ha sido colocado. Puede variarse el porcentaje o colocar en pixeles un poco más de la medida de las imágenes.

En el ejemplo he usado 3 imágenes, pero podemos añadir más siempre antes del último </div> del código, repitiendo para cada una estas líneas de código:

<div class="slide" id="slideshow4" style="display: none;">
<div>
<img src="URL_DE_LA_IMAGEN" /></div>
</div>


Cada vez que añadamos una nueva imagen, tenemos que cambiar la id del código que la muestra, es decir, en el ejemplo la última imagen tiene como id "slideshow3", así que la nueva que añadamos a continuación tendrá que llamarse "slideshow4".
En el script que va debajo del código html, cambiaremos el 3 por el número de imágenes totales que mostraremos en el slide, lo haremos en esta línea:
start_slideshow(1, 3, 2000);

En el código no he añadido enlaces a las imágenes, pero pueden añadirse de la misma forma que hacemos habitualmente:

<a href="Url_del_enlace"><img src="Url_de_la_imagen"/></a>


Ejemplo:

BanakaBanaka




¡Gracias por la paciencia Unperro!

Consejo:
Para aquellos que usáis JQuery en lugar de la librería Scriptaculous, en el blog BanakaBanaka encontraréis como hacer algo parecido en la entrada Imágenes rotantes con JQuery.

Entradas Relacionadas:

114 comentarios:


Ckoco

Hola Rosa!

buen post!, sabes estoy buscando una entrada en donde explique como hacer el efecto del menu que se desplega al hacer click, como el que tu tienes en etiquetas, archivo etc,

Mil Gracias!

Rosa

Ckoco No es un menú, son gadget a los que aplico ese efecto con Scriptaculous precisamente:
http://elescaparatederosa.blogspot.com/2009/05/expandir-y-contraer-gadget-con.html

Mucha Moda

muy buen post Rosa, siempre paso para ver lo nuevo! Ya lo voy a probar en mi blog!
Saludos

Mucha Moda

Ah, me olvidé de preguntarte, se puede cambiar la altura de las imagenes, en vez de height:200px ponerle 500px???
Muchas Gracias

Rosa

Mucha Moda Así es, si tus imágenes son mayores pues aumentas el height al mismo tamaño que tengan ellas o un poquito más incluso.

Gustavo

Muy buen post, me ayudaste mucho muchas veces, gracias. Donde puedo conseguir una plantilla para mi blog de fotos, tengo una pero bastante buena pero no me convence: http://lapuraverda.blogspot.com

Saludos y gracias de nuevo

Rosa

Gustavo Pues en BTemplates creo que he visto una sección con ese tipo de plantillas...¿has mirado allí? (el enlace está en mis Blogs de Ayuda en la sidebar)

Gustavo

Gracias Rosa!!! Que velocidad de respuesta!
Un abrazo.

Theemilio_crazy

Bien Rosa, Gracias :D

Supermamá

Hola Rosa...
Me alegró poder hablar contigo anoche...
Este efecto ya lo había incluido hace unos días en la cabecera de mi blog principal...y queda muy bien.
Gracias y un fuerte abrazo

Luno

Hola Rosa que tal...
Veo que en tu blog tienes al lado derecho un gidget que dice: Enlázame y que haciendo click automaticamente se enlace mediante artilujio con mi blogs. quisiera saber como poner eso en mi blog por favor.
Este es mi mail: luisnole@memoriasturbias.com
Miles de gracias anticipadas...!!

Antonio Ruiz

Hola Rosa!

Al fin podré eliminar el slideshow con mis fotos enlazadas desde www.slide.com. No me convencía del todo su diseño, entre otras cosas, porque al hacer click encima de alguna foto iba directamente a la web de slide.com.

Aunque tengo un problema. El script me funciona sólo en un gadget de la sidebar, no en un post. El código que utilizo en ambos es el mismo. Qué te parece Rosa?

Gracias.

Blog de Naturaleza y Viajes

Jorge Ángel Aussel

¡Rosa! La alegría que siento de que me hayas enlazado en tu página es enorme. Como dije en la respuesta a tu comentario en mi blog, es un incentivo que viniendo de tu parte se multiplica y me motiva a seguir adelante.


Espero a que llegue la tarde en Argentina para escuchar tu nueva transmisión en Dejotas Radio. Aquí son las 15Hs. cuando la voz de DJ Hada transmite a todos sus oyentes desde Asturias.

¡Un abrazo! Y un Gracias infinito.

Graciela

muy bueno Rosi, que tengas un día bonito :D

Chesana

Rosa, sé que no viene a cuento en este post pero estoy ya hasta el moño de mi favicon. Se ve (o yo creo que se ve) en IE8, pero en Firefox (tengo la última versión) aparece por un instante pero vuelve a salir la "B". Como ya te sabes mi plantilla de memoria... dime qué hago mal, qué sobra, falta... o si tiro la plantilla. Estoy... estoy... y no me puedo ir aún a tu radio porque no empezais hasta las 3. Atacada me tienes.

kikop

@Chesana has mirado este post? porque ahí sale el problema del favicon, ahora puede que sea otro también. Bueno espero que te sea de ayuda, a mi cuando me ocurrió el mismo problema que tu, con ese truco lo solucione. Suerte!

Vku

que honor estar ahi, un saludo rosa y gracias
Las 1000 y una cosas con Scriptaculous.

Rosa

Luno Puedes verlo aquí:
http://elescaparatederosa.blogspot.com/2008/03/link-tu-blog-mediante-un-widget.html

Rosa

Vku El honor es mio de contar con tu apoyo... por cierto has de perdonarme mi escaso tiempo en estos días, en cuanto pueda "desahogarme" un poco hablamos.
¡Muchísimas gracias!

Rosa

Chesana La forma correcta de incluir el navegador es la de esta entrada:
http://elescaparatederosa.blogspot.com/2007/04/favicon-para-el-blog.html

De todos modos fíjate en el post que kikop te recomienda en su comentario [16]

Rosa

Antonio Ruiz Tu comentario me ha dado que pensar que no he comprobado si puede usarse más de una vez el efecto, aunque casi que estoy segura que no es posible sin cambiar algunos parámetros...lo comprobaré y te indico algo.

Rosa

Jorge Ángel No es nada ;) gracias a ti por todo.

Chesana

Kikop, muchas gracias porque creo que con tu indicación se ha solucionado el problema. Al menos yo sí veo el favicon.

Rosa, gracias, porque a veces existe solución pero no sabemos encontrarla.

Un abrazo para cada uno.

Rosa

Chesana Yo también lo veo :D

GuillermoZ0009

Saludos Rosa!

Muy bueno, como siempre quisiera hacer un pequeña observacion, si queremos hacer un segundo "Slideshow" debemos de cambiar id="slideshow1"> por id="slideshow2"> o 3 segun cuantos haya.

¿Que opinas?

Un Saludote!

Mucha Moda

Gracias Rosa! Ahora tengo que probar lo de Favicon porque me cansé de probar en mis blogs y nunca lo veo!!
Gracias!!!

Rosa

GuillermoZ0009 No sería tan sencillo como eso creo yo, entonces empezaría el movimiento en uno y después en el otro, y la idea no es esa... tendré que mirarlo con calma:S

Un Perro

Rosa !! mil gracias !:D
ya mismo me voy a implementarlo en el blog que necesita de este "truco"
Hoy no pude pasar por la radio, ayer fuimos a un concierto con mi mujer y nos ha dejado la garganta y el cuerpo molidos.
Pero todo sea por el rock !!:)

un besote enorme y nos hablamos

El que sabe, sabe, y el que no ... debe pasar por el Escaparate

Rosa

Un perro Igual estuviste conmigo :D te nombré y puse a Marulata. Gracias!!!

Manuel Alejandro

Saludos Rosa, primera vez que estoy por aca en comentarios porq en el blog ya tengo como un mes, revisando hasta el rincon mas lejano de tu blog, jajaja, y es q ya era hora que te diera las gracias, todo mi blog esta hecho en su totalidad gracias a ti, bueno nose si lograstes escuchar la entrevista q me hicieron en los premios 20blogs en Luz Radio Blog este miercoles que paso en donde al igual que selena tambien te nombre agredeciendote por tu ayuda y ojala logres visitarme y darme un visto bueno al menos o decirme en q puedo mejorar seria estupendo un consejo super personal y exclusivo de tu parte jejeje, pues venga amiga te envio un abrazo desde Venezuela con cariño y bueno ya te comentare mas seguido....un besote!!!

Manuel Alejandro

http://actitudinproject.blogspot.com/ ese es el enlace a mi blog jejeje....

Mauro Torres De León

Estimada Rosa, llevo varios intentos (incluyendo éste) en escribirte un comentario para ver si podrías ayudarme con un problema de fuentes en mi Blog, ya te envié un correo.

No quiero molestarte, espero me puedas ayudar.
Cariños.

Rosa

Manuel Alejandro Vaya! ja,ja, escuché la entrevista hasta que finalizó la de Selene ya que ella misma me avisó, pero no tuve el placer de oírte a ti... ahora mismo voy a hacerlo :D
¡Gracias!

Mauro Torres De León

Estimada Rosa,
Logré solucionar el tema.
Muchas gracias igualmente :)

Rosa

Mauro A decir verdad, no había contestado tu comentario anterior, a la espera de recibir el email que mencionabas, pero no llegó :S ...
Gracias a ti!

Kazuma

Hola rosa quería preguntarte unas cosas como se puede poner una imagen en movimiento en el blog, que se hace cuando no sale los seguidores en el blog, si tuviese un contador en el blog me contaría mis entradas no sabes algún sitio dondehaiga contadores que no cuenten las veces que entre yo es que sino cada vez que entre en mi blog para ver los comentarios me contara mis entradas, como podría poner esto http://img10.imageshack.us/img10/9263/imagen2iqa.jpg en el blog y también como se puede poner las etiquetas o archivo del blog en forma de calendario,sabes algún lugar donde se pueda hacer un botón para el blog online gracias por delantado

Rosa

Kazuma Blogger no admite subir directamente imágenes en movimiento, has de subirlas a un alojamiento y enlazarlas desde allí (usar su url).
El gadgte de seguidores no funciona bien y no se ve en algunos navegadores, esperar a que lo solucionen los de Blogger otra cosa no podemos hacer.
No conozco un contador que no cuente los accesos al blog, sena tuyos o de quien sea, los que conozco los cuentan todos.
La imagen que me muestras no sale, da error.
Al calendario para archivos y al botón online, te diré que en mi blog rebuscando un poco puedes encontrarlo, lo del botón concretamente está en la etiqueta "Botón de enlace", lo otro no lo recuerdo ahora mismo, pero usa el buscador y pon "calendario" o algo así...

Céz

Me encanta esta entrada, yo la había implementando de una manera sencilla mediante links con imagenes. Se los recomiendo para festejar ciertas ocaciones como 1er aniversario de sus blogs y sus seguidores quedarán apantallados! :)
Rosa, tanto tiempo sin "verte" jejeje. Muchos saludos desde el caluroso México :)

Rosa

Céz Lo mismo digo ;) es un placer volver a "verte".
¡Un besito! :D

Noticias al instante

hola rosa te hago una pregunta como poner en una plantilla cualquiera dos columnas para los post. espero la respuesta

Rosa

Noticias Es imposible que pueda explicar algo así en un comentario, tendrás que buscar la información en otro sitio o esperar que la publique... por supuesto no podría decirte cuando va a ser eso, aunque si lo tengo en mente.

BanakaBanaka!!

Hola Radio-Rosa jejeje!!

Con tu permisito, tengo un truquito muy parecido para los que usamos JQuery, así que te dejo caer el enlace por aquí, como quien no quiere la cosa... así, disimulado...

Imágenes rotantes con JQuery

jeje!!
Un beso "gamberret-a"
★Iván.

Rosa

BanakaBanaka!! ¡Añadido en la entrada!
Cualquier cosilla que me "venga bien" para recomendar o ampliar información, ya sabes que yo "lo pillo to"...
¡Besos gamberro!:D

BanakaBanaka!!

jajaja!! te he dicho ya que eres un encanto, Rosa? muchas gracias ;P
★Iván.

Antonio Ruiz

Hola Rosa!

No se si me explique con claridad en mi consulta anterior.

Mi idea no es tener el slide tanto en la sidebar como en un post. No tengo insertado el slide en la sidebar. Quiero reemplazar el slide que tengo enlazado en mi Home desde slide.com por este.

Saludos.

http://naturalezayviajes.blogspot.com

GuillermoZ0009

Tal vez me exprese mal, je

Lo que quise decir es que si queremos tener dos o mas de estos en una misma pagina habria que cambair el Numero de "Id" por 1,2,3, segun..

Probare repitiendo el numero de ID y cambiandolo y haber que pasa, luego te cuento que paso ;)

Saludos Rosa!

Rosa

Antonio Pues ya ves, aquí está funcionando en una entrada y no he hecho más que copiar el código que muestro en la entrada... eso si, desde la pestaña HTML del editor.

CEPRESM

Hola que tal... desde Perú.
Cuando intento pones 11 imágenes solo aparecen rotatívamente 3. Sospecho a que se debe que son del mismo tamaño. O hay un límite para colgar imágenes. ¿?
Agradeciendo

Rosa

CEPRESM Se debe a que el código de mi ejemplo solo es para tres, tendrás que hacer los cambios necesarios para poder añadir más (hasta 2000 se puede).
Lee en la entrada y verás como hacerlo...

La Bruja

Muchas gracias Rosa, sos grande!!! es justo lo que buscaba, saludos.

El-DiGiTaL

Hola Rosa.
mira e agregado el codigo en mi blog para el efecto de fotos, pero no lo hago funsionar, aver si me puedes dar alguna orientacion, pues lo lo e hecho como tu lo describes en tu blog

Rosa

El-DiGiTaL Es imposible que lo hayas hecho bien, porque funciona 100% si se hace de forma correcta... revisalo, porque en algo has errado.

Ironú Mora

DESEO APLICAR ESTO A LA CABECERA DE MI BLOG COMO LO HIZO SUPERMAMA..QUE DEBO HACER..POR FAVOR

Rosa

Ironú Supermama está confundida en su comentario, ella no tiene este aplicado, sino este otro:
http://elescaparatederosa.blogspot.com/2009/01/rotando-imagenes-en-la-cabecera.html

Aunque si te guías por el otro puedes aplicar este también en el header...

Jorge

Hola Rosa:

Primero que nada gracias por compartir con todos nosotros tus conocimientos. Tengo una peguntita. Cual seria la mejor manera de implementar este "truco" con imágenes y enlaces aleatorios? Estaba pensando en una array pero se me complica con el hecho que quiero una imagen y un enlace.

No se si me explico, de antemano te doy las gracias. Aqui te dejo un enlace donde lo tengo implementado.

Rosa

Jorge Por aleatorio entiendo que las imágenes aparezcan en distinto orden, y con este irán apareciendo tal como lo establecemos siempre la primera será la primera y sucesivamente...

Jorge

@Rosa:

Entonces no se puede cambiar el orden, o que en lugar de las 3 que tengo aparezcan otras imagines?

Gracias.

Rosa

Jorge El orden no puede cambiarse, es el que viene dado en el script, pero imágenes pueden añadirse hasta 2000... mira las instrucciones en la entrada, porque me da la impresión que no has terminado de leerla...

Jorge

mmm bueno. digamos que yo quiero algo diferente pero bueno, investigare y tratare de hacerlo. Gracias Rosa.

Priamo

Hola de nuevo Rosa: No me realiza el efecto en el POST y no sé el porqué¿me puedes ayudar?

otra cuestión que he leido pero no la respuesta:Se puede tener el efecto como gadget y al mismo tiempo en Entradas???

Muchas gracias
Mi blog de prueba es: priamo24.blogspot.com y la entrada se llama: "XLOT de N inco"

Rosa

Priamo A tu sengunda pregunta te diré que tal cual está no puede usarse dos veces, habría que modificar el código, aunque no se exactamente como, ya que no he tenido tiempo de mirarlo...

A la primera... no se que decirte, el mio ya ves que está en una entrada funcionando sin problemas, y no he hecho más que lo que explico en la entrada...

Priamo

Gracias Rosa, ya lo tengo solucionado.El problema era que en tu explicación en el punto (2) deberias haber indicado que la parte del script deberia ir en la plantilla ya que yo lo copie todo en la entrada.Lo averigué porque vi la explicacion de otra entrada tuya"Visor de imagenes en movimiento Gracias nuevamente.

Rosa

Priamo En la 1 indico que el script va antes de </head> y en la 2 que el HTML puede ir tanto en la entrada como en la sidebar... creo que está claro.

Si hablas del script que está en el paso 2, TODO va en la entrada o en el gadget html,así lo tengo yo aquí, y ahí funciona a la perfección.

armando bittar

Hola Rosa, te saludo desde Paraguay para agradecerte toda la ayuda que nos das para dejar agradable nuestro blog. El mio es http://www.tucasahora-armandobittar.blogspot.com, por si quieras visitarlo, es relativamente nuevo como los otros que encontrarás en la sidebar y te invito a que visites. Mi pregunta es la siguiente: Tema: Javascript. No puedo colocar en una entrada nueva un rotador de imágenes, no me funciona. En la sidebar si funciona pero en la entrada no ¿Qué puedo hacer?. Desde ya gracias y espero una ayudita ok?

Rosa

armando bittar Si, aún tengo pendiente revisar eso, lo siento, de momento solo puede usarse una vez...he de mirar que cambiar para poder usarlo más de una...en cuanto tenga tiempo.

Azul

Hola Rosa...

He seguido los pasos y las imagenes en una de las entradas que realice para ver las imagenes rotativas no funciona. No rotan. Cual podría ser el problemas. Gracias!!!!

Azul

HOLAAAAAAAAAAAAA !!!! ROSA...

¿PUEDEN IR MAS DESPACIO LAS IMAGENES?

Rosa

Azul Cuando tengas algún problema de este tipo, lo mejor es leer comentarios anteriores antes de preguntar...

Azul

Intentare no preguntar más...

Rosa

Azul No es no preguntar más... es tratar de no preguntar si no es necesario...

volter100

Hola Rosa, me gusto mucho esta entrada, pero disculpa que insista con una pregunta que te hicieron anteriormente, no hay alguna manera de que se pueda hacer este procedimiento pero de manera que muestre las imagenes al azar?, sé que este funciona de manera que tiene un determinado orden pero no se si me podrias enseñar la manera de modificarlo, gracias de todas maneras.

Rosa

volter100 No, lo siento :( al menos yo no sabría como hacerlo.

jose_3

Hola rosa, estoy buscando como hacer el típico slideshow de imágenes que pasan de derecha a izquierda, como el que hay en esta web descargasdirectamente.tk debajo del buscador, sabes como se hace esto?

Rosa

jose_3 Eso que me muestras son simples imágenes dentro de una etiqueta llamada marquee que les da el movimiento.

Sería algo así:

<marquee>AQUI LAS URL DE LAS IMAGENES CON <img src="url de imagen"/></marquee>

PRUEBA

Rosa. Muchas gracias por este post. Quería poner las imágenes de los miembros de nuestro grupo en el Blog usando el típico Slideshow. Con este script queda muy mejorada dicha presentación. Sigo con interés tu blog para seguir aplicando tu conocimiento sobre el tema.

Veloso

Rosa,
perdona mi español porqué soy portugués,yo queria saber se podemos alterar el tiempo de rotación de las imagenes, porque yo queria hacer eso con los banners de mi blog y con anúncios a unos posts.

Veloso

Mira como pongo smyles en los comentários?

ESTUDIANTE DE ELECTRICIDAD DE LA E.T.I.

buenas Rosa como estas soy Manuel primero me parece exelente tu blog, el mas completo en cuanto a trucos para blogger yo tambien tengo uno se llama Super Blog abajo te dejo el enlace. y la mayoria lo he aprendido de aqui complementando con otros blogs de ayuda. muchas gracias. sigue asi. otra cosa tengo un problema con el truco de post expandibles que cuando lo activo que se ve bien por cierto, los gadget de las columna derecha se van hacia abajo, es decir cuanndo puse el truco tenia una imagen en el gadget y la imagen se fue hacia abajo bueno la imagen con todo y titulo, espero que puedas ayudarme, no es tan urgente. gracias.

ESTUDIANTE DE ELECTRICIDAD DE LA E.T.I.

http://superblogoriginal.blogspot.com

este es mi blog

Rosa

ESTUDIANTE DE ELECTRICIDAD DE LA E.T.I. Pues no se que decirte... quizá la imagen era demasiado grande para la sidebar y no había problema hasta que incluiste el cambio de los títulos que ocupa un cierto espacio... no puedo decirte más, ya que no veo el efecto incluido en el blog...
Por cierto que este comentario debería estar en la entrada de los títulos expandibles...

Andres

Rosa q tal?? me llamo andres hace mucho tiempo q sigo tu blog aunq es la primera vez q te escribo, de ahora en mas seguire aqui...
Muy bueno tu ultimo post y me gustaria saber si al slide de fotos q pusiste se le puede poner un tiempo de rotacion, es decir necesito q las imagenes duren 10 segundos por lo menos, si puedes ayudarme te lo agradezco...

Rosa

Andres Cambia en el script el último 850 que ves, por un valor mucho más alto, por ejemplo 5000 o más...

Andres

listo rosa muchisimas gracias, acabo de agregar a mi msn lejaniaimposible@hotmail.com no se si sera tu correo pero si lo es me alegro q lo sea asi podre chat contigo, de nuevo muchisimas gracias

Andres

rosa aca ando nuevamente molestandote, perdona si se te ha hecho dificil lidiar conmigo ya que es la tercera vez q te escribo, queria preguntarte si esto funciona solo para un gadget porq puse dos o tres en diferentes gadget, hasta probe los tres juntos en un mismo gadget y solo me funciona el primer rotador de fotos,queria saber si esto esta diseñado para q funcione asi o si puedo modificarle algo para q funcionen todos los demas rotadores tmb

Rosa

Andres Solo funciona con uno, lo siento... traté de averiguar como a base de pruebas, pero no di con ello...

ABRIL

Hola Rosa
Acabo de probar el rotador y no me funciona.
Creo que todo lo hice bien: el primer código va en la plantilla y el segundo va en la entrada pero sólo se visualiza la primera foto.
¿Qué puede ser? Uso Firefox, espero que no sea este el problema.

ABRIL

Hola
No había probado con un gadget html/javascript y así funciona perfectamente pero con las Entradas no. Si sabes como habilitarlo en Entradas lo cuentas por favor.
Mil gracias

Rosa

ABRIL El mio está funcionando en esta misma entrada como puedes ver... y no he hecho más que lo que indico en la entrada.

Chiqui

Hola Rosa, antes de nada, muchas gracias por tu blog. Es una gran ayuda

Ahora, una duda que agradecería me resolvieras si tienes tiempo y ganas.

He puesto en un blog de pruebas algunos gadgets con el efecto deslizante de expandir y contraer de Scriptaculous y funciona perfectamente.

Como veo que mencionas en todas las entradas sobre Scriptaculous que hemos de descargar los scripts para después subirlos a un alojamiento apropiado, tengo la molesta sensación de que le estoy "robando" a alguien sin querer.

Ya los he descargado la libreria y la he subido a una página de google sites.

¿Qué he de hacer ahora?, ¿he de sustituir:



por la dirección de la carpeta donde tengo alojados los scripts?

Gracias de antemano y disculpa si ya has aclarado este punto anteriormente (he buscado pero no lo he encontrado)

Chiqui

En el comentario anterior se borró:

script src='http://www.google.com/jsapi'/>
script (lo que sospecho he de sustituir).

Rosa

ChiquiNo, para usar cualquier efecto con Scriptaculous, no necesitas subir el código a ningún lado... tal como digo en la entrada lo añades antes de </head> y ya está... no le robas en este caso a nadie, ya que Google permite su libre uso de esta manera y ellos no tienen problema de ancho de banda ni nada de eso...

Chiqui

Gracias Rosa. Seguro que mezcle la lectura de varios post e interpreté lo que me vino en gana. La próxima vez, procuraré prestar más atención, que ya bastante tiempo le dedicas a formarnos como blogeros.
Mil gracias

Dark

Hola Rosa, nuevamente te pido ayuda, mira me gustaria poner un slide con imagenes y contenido del post, como en este ejemplo.
http://prueba2-dark.blogspot.com/
En este momento estoy usando un slide en flash pero es un poco mas pesado y no me permite poner contenido del post espero me puedas ayudar.
Gracias y besos y abrazos.

Talin

Hola de nuevo Rosa
Tendría 3 dudas:
1) Cómo podría hacer para que salieran enmarcadas las imagenes, ya sabes eso de "border: 1px ....."?
2) Cómo puedo poner un título a la imagen encima de ella?
3) Cómo puedo poner un pie (pequeña descripción)debajo de la imagen?
Saludos y nuevamwetne gracais por todo - Talín

Rosa

Dark Lo siento... nunca he mirado como hacer algo de eso... supongo que con JQuery se podría... pregunta en Vagabundia a ver si Jmiur sabe...

Rosa

TalínNo es fácil adaptar las cosas a veces a lo que uno necesita y lo mejor es buscar en cada caso lo más aproximado y no tratar de usar algo diseñado de otra manera...

Aún así prueba si quieres:

Para el borde, primera línea del código:

<div style="height: 200px; text-align: center; width: 100%; border: 1px solid #ddd;">

El título escrito directamente en el código sobre el de la imagen y entre <p> y </p> y lo mismo para el pide de imagen, pero debajo del código de la imagen.

Dark

Hola rosa, ya averigue como poner el slide como yo deseaba es un codigo muy largo pero sirve de mucho. Si te interesa aca te dejo el codigo

http://7cyfvq.bay.livefilestore.com/y1pXYkHZ0DEWRSbfBtE5Q1IQg0CxGWLzeY1WtM-XTVXskaxfVS2uj_3OVShkLWYcCjp3mJkFBlDfHC8iYSRM4pgEwKvQE_pnG-T/script%20type.docx?download

besos y abrazos Dark

Rosa

Dark ¡Gracias! lo miraré ;)

Hogar CRECER

Hola!
Este rotador de imágenes es hermoso y simple. Lo usé con 13 fotos en una entrada hace tiempo y ahora armé otro con 34 para la sidebar.

Y acá es donde se produjo el inconveniente: muestra solo las 13 primeras, la misma cantidad de la entrada anterior, a pesar que le cambié el número en el script: start_slideshow(1, 34, 2000);

El númeo de fotos no es el problema porque lo probé con 14 y muestra siempre 13.

Si abrís la entrada http://hogarcrecer.blogspot.com/2009/09/blog-post_23.html, verás cómo se interfieren ambos códigos. En este caso, el de la derecha no arranca hasta que hayan pasado las 13 fotos de la entrada. Y por supuesto que no muestra sus 13 primeras en la sidebar, solo las 21 restantes.

Supngo que con algún pequeño cambio los códigos tendrán la independencia necesaria.

Espero tu respuesta - hogarcrecer@gmail.com - porque es una galería lindísima. Aprovecho para decirte que no es lo primero que he sacado de tu blog, solo que nunca tuve inconvenientes, las explicaciones son muy claras.

Muchas gracias!

Rosa

Hogar CRECER Pues deberían tener la independencia como dices, pero no he sido capaz deconseguirlo, a pesar de cambiar ids y todo lo que suele hacerse en script de este tipo... lo siento.

El segundo al no ser como dices independiente, es como si formara parte del otro, así que solo muestra el mismo número de imágenes...
Siento el trabajo que te has tomado :S... en anteriores comentarios había ya respondido esto mismo... por eso siempre es bueno echar un vistazo a los comentarios de cualquier entrada antes de hacer nada... muchas veces ahí está la respuesta...

Hogar CRECER

Es verdad. Gracias igual por la pronta respuesta!

Felipe

Wow.
Este efecto no lo había visto, y me viene como 'anillo al dedo' pues precisamente estaba pensando en hacerlo con jQuery en un blog de pruebas y luego incluirlo con un Iframe. :D
Excelente!!

Felipe

Y hasta que por fin lo incluí... gracias Rosa... este truco nos ahorra tiempo y es bastante facil... fijate que hasta me descargué un programa para crear SWF :D y menos mal me tope con esta entrada.

Por cierto Rosi.. ¿alcanzaste a ver un correo para poder lograr cambiar el 'Anonymous' por 'Anónimo' en tu entrada de los ultimos comentarios?

http://elescaparatederosa.blogspot.com/2009/04/ultimos-comentarios-personalizados-con.html

Un saludo cordial.
Felipe. :D

Rosa

Felipe Si, me llegó el email... lo tengo ahí reservado para cuando tenga un tiempito, ahora ando con problemillas para conectarme todo lo que quisiera.

¡Gracias! :F

Felipe

¡Nooo, gracias a ti!
Esta bonita tu nueva firma. :D

Dj's Club

Hola Rosa como estas , voy a intentar hacerlo y te cuento, mientras tanto te queria preguntar si tambien se podria hacer algo asi como tieen esta pagina http://msn.foxsports.com/
en donde rotan las noticias y se puede seleccionr qnumero de noticia ver, escuche de un programa llamado cuber pero nose si funciona en blogguer
http://www.taringa.net/posts/animaciones/5077839/Flash-Slide-imagenes-Cuber.html
Besos , Gracias-!

Rosa

Dj's Club Mira en Vagabundia o en Gem@, allí encontrarás algunos tipos de esos slides... yo no tengo nada sobre el tema, pues a menudo se complica demasiado para los más inexpertos.

Dj's Club

muchas gracias :) un abrazo!

Dj's Club

como estas :D , intente hacerlo , pero nose porq motivo no se mueven las imagenes, lo puse en una entrada
http://thdjsclub.blogspot.com/2010/05/photobucket.html
es el primero q aparece. Esdta entrada tiene compartida otros codigos.

Rosa

Dj's Club Si estás usando JQuery en el blog para cualquier otro efecto, no funcionará, ambas librerías son incompatibles.

Dj's Club

rosa elimine el jquery pero lo mismo, nose porq :(, no habra otra alternativa? :), la imagen queda quieta .

Rosa

Dj's Club Sigues usando Query por ejemplo para últimas entradas... piensa si merece la pena solo por tener esto, deshacerte de lo que ya tienes...
En Vagabundia creo que hay algo para rotar imágenes con Jquery.

© ۞Jair Octavio۞

Hola Rosita, Que Tal? Espero y Te Encuentres Bien, Pues Yo Aquí Estoy De Nuevo Hace Tiempo Que No Tenía Contacto Con El Ciberespacio y Pues El Motivo Fue Que Me Formatearon La Máquina y Es Un Relajo El Instalar Todo; Así Que Pues, Creo Que Ya Estoy De Nuevo…
El Motivo De Mi Consulta Es Porque: Me Gustaría Saber Si Se Puede Hacer Más Lento El Cambio De Imagen Por Imagen, Es Que Van Muy Rápidas, De Lo Contrario Tendré Que Cambiar Un Rotador Por Otro, Bueno Mil Gracias De Antemano Que Tengas Una Excelente Semana…

© ۞Jair Octavio۞

Hola, creo que ya lo logre, gracias je je je...

Publicar un comentario en la entrada

Si vas a dejar una consulta, procura tener habilitado tu perfil en Blogger o deja la url del blog a revisar (no enlace).

Los comentarios están siendo moderados.

:) :(( :( :P :D :$ ;) :I :X :O |O :S