127

Rotador de imágenes

Es una forma de mostrar diferentes imágenes cambiantes con un efecto de transición entre imagen e imagen muy lindo.
Puede utilizarse para mostrar cualquier tipo de imágenes teniendo en cuenta que todas han de tener las mismas medidas.
Es ideal para usarlo con banners o botones de otras web, ya que el código incluye la posibilidad de incluir un vínculo o enlace en cada imagen.
Podéis ver una demostración en la sidebar de mi blog de pruebas, en forma de mini-banners con enlace a cada página.

[1] Nos descargamos el archivo xfade2.js a nuestro PC, lo descomprimimos y lo subimos a un alojamiento de archivos.
Una vez obtenida la url del archivo, lo colocamos de esta manera antes del </head> de nuestra plantilla:

<script src='URL_DEL_ARCHIVO' type='text/javascript'/>

[2] A continuación colocamos unas líneas de CSS en la plantilla justo antes de ]]></b:skin>:

/* ROTADOR DE IMAGENES
----------------------------------------------- */
{
margin: 0;
padding: 0;
}
#rotator
{
border: 2px solid #CC0000;
overflow: hidden;
margin: 10px ;
padding:2px;
position: relative;
width: 200px;
height: 50px;
}
#rotator img
{
border: 0;
width: 200px;
height: 50px;
}

Donde dice: width: 200px; y height:50px;  colocamos los valores del ancho (width) y alto (height) de las imágenes que vayamos a usar.

[3] Ya solo nos queda incluir el código necesario en un gadget HTMLJavascript para mostrar el rotador de imágenes e incluir los cambios necesarios :
<div id="rotator">
<a href="url_de_la_página_web"><img alt="" src="url_de_la_imagen" title=""/></a>
<a href="url_de_la_página_web"><img alt="" src="url_de_la_imagen" title=""/></a>
<a href="url_de_la_página_web"><img alt="" src="url_de_la_imagen" title=""/></a>
<!-- Podemos poner todas las imágenes que queramos, siempre dentro del div-->
</div>
 En "alt" y "title" colocaremos un texto explicativo, por ejemplo el título de la web a la que enlaza la imagen, así los navegadores mostrarán un cartelito (tooltip) con ese texto al poner el ratón sobre la imagen.

Entradas Relacionadas:

127 comentarios:


LuzdeLuna

Gracias Rosi!! he estado esperando tu explicación de este truquito para las imágenes, desde que lo vi en tu blog de pruebas! Lo voy a tratar de colocar para los banners amigos!
Un abrazo

Rosa

LuzdeLuna, para eso precisamente queda lindo;)

Rubén

Queda precioso, Rosa. Gracias por ejemplarizar con mi banercito. Besos.

Rosa

Rubén, ¡cuanto bueno por aquí! ;)

Rubí

Al fin logré poner el rotador, batallé un buen!! jajaja pero me siento satisfecha porque ya lo puse. Pero... no se que hice que en la parte de las entradas del blog algunas cosas se me pusieron centradas, por ejemplo el contenido de los comentarios, ¿cómo le hago para volver a ponerlos como los tenía? no supe ni como fueron a ponerse así. Gracias Rosa!

Rubí

Ya se me arregló, cambié esta parte del código:
text-align: center; en vez de center puse left y listo. Gracias Rosa!!!

Decoracion

Lo he estado testeando y queda genial! Muchas gracias por el codigo!!
:$

MARGA'S HAPPY PATCHWORK

Rosa, lo he colocado y queda muy bien, pero ¿es posible poner mas de un gadget con este truco?

Rosa

MARGA, tendrías que abrir el archivo del scrip para modificarlo (el que tienes en el pc) subirlo también a un alojamiento y seguir todos los pasos como para el otro widget...

En el script habría que cambiar en esta línea:
imgs = d.getElementById('rotator').

Donde dice rotator por otro nombre, por ejemplo, rotator2 y en el css donde dice rotator poner también rotator2.

O sea, todos los pasos son los mismos pero necesitas cambiar la id, tanto en el script como en el nuevo css para cada widget...
Espero haya quedado más o menos claro, porque para explicar a veces me hago un lío :$

MARGA'S HAPPY PATCHWORK

Hola Rosa, la explicación ha quedado clara, el problema, es que mi ordenador no me permite abrir el script para efectuar los cambios, sabes cual puede ser el motivo?

Gracias Rosa, eres fantástica.

Rosa

MARGA, tranquila, eso nos pasa a todos si lo hacemos directamente.

Mira, pincha en el archivo con el botón derecho y escoge "abrir con" y lo abres con el notepad, el blog de notas...o algún programa de edición de textos que te salga ahí y que tu tengas.

MARGA'S HAPPY PATCHWORK

Rosa, gracias por la información, una vez abierto y efectuados los cambios en que tipo de formato debo guardarlo, ¿puedo guardarlo en word? o no tiene importancia.

Muchas gracias.

Rosa

MARGA, una vez hechos los cambios, das directamente a guardar, te preguntará si quieres guardar los cambios, das a aceptar y volverá aguardarse en el formato que estaba.

Σ=o) Pau

Lo había visto en el blog de pruebas y me dije mmm.. hay una entrada en proceso :)
Me encantó, lo dejaré pendiente ya que el footer de tres columnas demora mucho la carga no sé si es eso o algún script, así que estoy pensando cuando tenga tiempo más adelante hacer reformas, que raro no jajajaja :D

Pero debo reconocer que mi sorpresa fue mayor y muy linda cuando ronroneaba contigo, gracias Rosita linda!!!!! :-L eso si cuando acabe navidad no se como sacaré a mi gatito :$ es que me encanta!!!! :D

Que tengas un año maravilloso lleno de satisfacciones, con felicidad, salud y miaucho amor :D por mi parte seguiré ronroneando para que siempre sonrías :-L

Un enorme abrazo ronroneado y muchos besos

Fernando Antonio™

Oye rosa éste truco se puede para rotar imagenes en la cabecera?

Nos estamos leyendo...

PD: Feliz Año 2009!!!

Céz

Un rotador de imagenes en la cabecera? Suena muy original


pd. Ya pude reestrenar mi blog de cine temático (www.aaasi-somos.blogspot.com)despues de 10 días de puras reformas con todo lo que aprendí de ti. Gracias maestra Rosita!!! :-)

Rosa

Fernando, pues si, se puede. De hecho en breve publicaré como hacerlo;)

Rosa

Céz, ¡me alegra oír eso! Ando apuradilla de tiempo estos días...en cuanto tenga un ratillo me paso.

Birdelo

Hola Ro!

Muchas gracias por tan excelentes y fáciles explicaciones, ya lo pongo en práctica y es una forma muy cuca de mostrar los banners amigos!!!.

Saludines y un abrazo!.

Rosa

Birdelo, ¿sabes una cosa? eres una de las pocas personas que me llama Ro...¿y sabes otra?...¡me encanta!

¡Un abrazo!:-L

Birdelo

Ok Ro!. Hehehe!.

Rubí

:S me dejó de funcionar el primer rotador ahora jejeje mejor me rio, yo se que por algun lado tiene que quedar bien otra vez, confio en que me ayudes por fa si?

Rubí

el primer comentario que puse no se agrego!! jajaja, bueno aqui va de nuevo

Te decia que puse otro rotador, segui los pasos que pusiste en un comentario de esta misma entrada hecho por ti explicando como, lo hice al pie de la letra, sólo que el segundo rotador me sale escalonado, se van desapareciendo 3 imagenes al mismo tiempo y luego aparece una y otra pero al mismo tiempo las 3, esto mismo me pasó cuando puse el primer rotador hace algunos dias y lo pude arreglar, pero NO ME ACUERDO COMO LO ARREGLE :o ... Y ahorita me doy cuenta que el 1er rotador ya no me funciona se quedó estático con la primera imagen! jajaja me hago un lio con esto de los códigos de repente, espero haberte explicado bien lo que sucede con mis rotadores.... gracias Rosa

Rubí

Logré ya poner bien el primer rotador.

Pero el segundo se queda estático sin movimiento, sólo muestra la primera imagen, no logro ponerlo bien!! :O :P

Rosa

Rubí, no pueden usarse dos rotadores a la vez con el mismo script.
Para el segundo hay que modificar el script, volver a subirlo a un alojamiento y repetir todos los pasos.

Dentro del script hay una línea que dice:
imgs = d.getElementById('rotator').getElementsByTagName('img');
Ahí hay que cambiar donde ves rotator por otra id por ejemplo rotator2 y luego en el CSS poner también rotator2 en lugar de rotator.

Rubí

Si Rosita hice todo eso porque vi en el comentario que le pusiste a Marga´s Happy ella te preguntaba lo mismo y seguí tus pasos como le explicabas a ella. Ya que terminé fue cuando me di cuenta que no me quedaba bien y fue cuando te pedí ayuda :P

Lo acabo de quitar para luego intenterlo otra vez, cheque todo paso a paso nuevamente y no doy con el problema.

Besos!!! :D

Rosa

Rubí, hay que cambiar el nombre de rotator por otro (el que sea) en el script, en el CSS y en el html, o sea, en todos.
Funcionar, funciona porque lo he probado yo misma.

Rubí

Voy a intentarlo otra vez cambiando todo como me has dicho, te aviso cuando ya lo logre!! :P

Rubí

Noooooooooo pude :(( no se que trae conmigo ese script :P lo ponía me funcionaba pero me dejaba de funcionar el anterior, o me fallaba alguna otra cosa jaja.. y lo que hice mejor para no batallar ya tanto es en una caja con barra de desplazamiento ;)

Gracias Rosa eres un cielo!!

!!!ßßøу Gℓค§§ 2øø9©....

HOLA ROSA ERES UNA SUPER PERSONA...DE VERDAD TUS RECURSOS ME HAN SERVIDO DE MUCHO EN MI BLOG...QUE DIOS TE LO PAGUE X 1000000000000000000000000000000000 Y MAS...QUE VENDIGA A TU FAMILIA Y A LAS PERSONAS QUE MAS QUIERES...DE VERDAD GRACIAS POR ESTE BLOG DE AYUDA SI PUEDES Y QUIERES VISITA MI BLOG PORFAVOR

http://descargalo-facilito.blogspot.com

VISITALO Y ME DAS TU OPINIO COMO REYNA DEL HTML...OK Y DE NUEVO GRACIAS...

★★!!!ßßøу Gℓค§§ 2øø8©...★★

apeupermontserrat

Hola Rosa!
Sabes si se puede configurar para que las imagenes se vean aleatoriamente y no empezar siempre por el mismo orden.
Gracias por la ayuda y felicidades por el blog.

Rosa

apeupermontserrat , para eso habría casi que construir el script de nuevo...

xCanibalx

olaaa primero ke nada tu blog me a sido super util es uno de los mejores se agradese tu esfuerzo...
una preguntita respecto alrotador ojala me puedas alludar como lo puedo harcer que al cambiar la imagen salga un texo (relacionado con la imagen)con un fondo transparente negro e visto rotadores asiii ojala tuvieras el codigo me seria muy util

un ejemplo en esta paguina
http://trig.com/

saludossssssss

Rosa

xCanibalx, eso no es exactamente un rotador de imágenes, es una galería de fotos con descripción, supongo que está hecha usando algún tipo de librería de script como Mootols...

No tengo nada de eso en mi blog, mira en http://vagabundia.blogspot.com/ que tiene varias publicaciones sobre presentación de fotos en galerías.

xCanibalx

hola rosa deberas que si te habia escrito antes aki encontre el pos jeje
una preguntita sobre este rotador x ahi lei que si se puede poner dos en la misma paguina sierto,
pero no me quedo claro como que quieres decir con lo de volver a subir a un alojamiento si me pudieras explicar eso x fisss te lo agradeseria y
gracias x la respuesta voy a ver la paguina
saludosss

Rosa

xCanibalx , como puedes leer en el comentario número 9, hay que modificar el script y el css.
Después para usarlo exactamente igual que hicimos con el otro, pues hay que subir el script modificado de nuevo a SkyDrive, por ejemplo (paso[1])

xCanibalx

oka rosa voy a intentarlo ojala me resulte
y gracias nuevamente de verdad que este rotador es genial estube buscando otros y no encontre nada paresido salvo una que era en PHP pero creo que no funciona en blogger......
.....saludinesss ros nos vemos xaup

Star

tengo el mismo problema que RUBI y nada. PONER 2 ROTADORES.

Puse uno (el que pone clases de padel) y funcionaba perfecto, al poner el otro tal y como dices Rosa. Pues ese funciona ahora, y el de clases de padel se queda estatico.

Ademas, el que pongo, una de las imagenes pasa demasiado rapido, no se ve.

Me gustaría si me ayudas a solucionarlo, ya que es por ahí donde quiero sacar algo para seguir manteniendo la web al meter a una profesional del padel a escribir :-D

Saludos yg racias.

Rosa

Star, mira en el comentario número 9.

INMA Y ANGEL

NO CONSIGO QUE SE VEAN LAS FOTOS, NO SE QUE HACER LO HE PROBADO VARIAS VECES.....

Rosa

INMA Y ANGEL Para enlazar cualquier archivo o imagen que hayas subido a SkyDrive, estos han de estar incluidos en una carpeta "publico" no en privado...creo que ese es el problema, ya que he intentado acceder con la url de una de tus imágenes y me sale un mensaje de "no permiso".

INMA Y ANGEL

GRACIAS POR LA CONTESTACION ROSA, YA LA HE PUESTO PUBLICO. PERO ME SIGUE SIN SALIR...:(
LLEVO 2 DIAS CON ESTO, CREO QUE SOY DEMASIADO TORPE... A VER SI ME ECHAS UN CABLE :)

Rosa

INMA Y ANGEL Ahora el problema es que la url que tomas de SkyDrive no es la correcta.

Tomemos como ejemplo la primera imagen que has colocado en el rotador, si colocas su url en el navegador, te lleva a esta página de skyDrive:
Pagina en SkyDrive

Cuando estás logueado en tu cuenta de SkyDrive y accedes justo a esa página, tienes que pinchar de nuevo sobre la imagen y entonces la imagen se mostrará ella sola en una página en blanco, es ahí donde debes optener su url.

Cuando veas la imagen así

INMA Y ANGEL

MUCHAS GRACIAS, YA VEO LAS FOTOS EN EL BLOG.
... AHORA NO ROTAN.... :( :( :( TE VOY A AMARGAR EL DIA. SEGURO QUE SERA UNA TONTERIA.
YA LO SIENTO SER TAN PELMA ES QUE TENGO GANAS DE QUE LO VEA ELLA A VER QUE LE PARECE.
ESPERO QUE SEA LA ULTIMA CONSULTA, MUCHAS GRACIAS OTRA VEZ

Rosa

INMA Y ANGEL Me voy a ir a la boda de gorra, ja,ja,ja.

A ver, es el mismo problema que antes, pero ahora con el script, la url no es la correcta.
Mira aquí como usar la url correcta:
http://elescaparatederosa.blogspot.com/2008/12/skydrive-alojar-archivos-y-usar-la-url.html

INMA Y ANGEL

JAJAJA CLARO QUE ESTAS INVITADA.
POR FIN LO HE CONSEGUIDO, QUE CHULO HA QUEDADO.
TE AMENAZO QUE VOY A SEGUIR PONIENDO COSAS... JEJEJE
MUCHAS GRACIAS
UN BESO

Rosa

INMA Y ANGEL Uyss que miedo me das!! :D

INMA Y ANGEL

HOLA SOY YO OTRA VEZ, QUERIA PONER OTRO ROTADOR DE IMAGENES. HE LEIDO LO QUE PONE EN EL COMENTARIO 9, PERO LA VERDAD QUE NO ME HE ENTERADO MUCHO. SOBRE TODO QUE ES UN SCRIPT.SI ME PODIAS PONER LOS PASOS UN POCO MAS CLARO TE LO AGRADECERIA.
EN LA BODA HAY BARRA LIBRE... ;)

Rosa

INMA Y ANGEL
Te descargas de nuevo el script tal como hiciste para el otro rotador.
Una vez en tu PC abres el archivo, normalmente "botón derecho abrir con" yo suelo hacerlo con el WordPad.

Luego es seguir las instrucciones del comentario 9 y hacer los pasos como para el primero.

P.D. ¡No bebo alcohol! ;)

Fabiana

Bueno, acá aparecí de nuevo y obvio que con dramas, jojo. Amiga, seguí todas las explicaciones, me leí todos los problemas en los comentarios y no doy con la solución.
Acabo de agregar este truco para mostrar orgullosa mis premios, pero no rotan!. Alojé el scrip en skidrive; le suprimí la parte de la url para que quede .js; está alojado en carpeta pública.... no sé en dónde le estoy errando, snif.
¿Una ayudita?

Rosa

Fabiana Veo el CSS colocado en tu blog correctamente, veo el código html en el gadget y parece correcto...NO veo el script colocado antes de </head> :o

Fabiana

Pasó que me mató la costumbre, alojé todo antes de skin..., ahora lo arreglé para antes de / head, pero me da el siguiente error: "No se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML se han cerrado correctamente.
Mensaje de error de XML: Element type "script" must be followed by either attribute specifications, ">" or "/>"."
Te aseguro que lo copié tal cual..., ufa, quisiera no molestarte tanto.

Fabiana

Deberé escribir "< / script >" después del script, aunque hallo raro ya que el anterior script está similar...
O será eso, que tengo dos scripts?

Rosa

Fabiana Eso quiere decir que al script, esta línea:
<script src='URL_DEL_ARCHIVO' type='text/javascript'/>

Le falta la barrita / de cierre o pudiera ser también alguna comilla...revisa ahí de nuevo y recuerda que ha de ir antes de </head>

Fabiana

Es cosa de blogger modifiqué las comillas ' y ' por " y " y ya quedó!! Sólo tengo que hacerle unos retoquecitos en el largo. Gracias.
Por cierto mi hija ha quedado encantada con tu música, jojo.

Fabiana

jaja, el chiste es que tiene 11 años, y está meta sacudirse!! jaja si la vieras.
Un abrazo.

Fabiana

Otra pregunta: ¿cómo hago para que las img queden en su tamaño original? Me explico, estoy editando un rotator2 y lo voy a aplicar en el gadget de los sitios que me gustan (el "Yo leo") y quisiera permanecieran tal cual son y no que se ajusten a las medidas del script. Espero entiendas, jaja.

Rosa

Fabiana
En width: 200px; y height: 50px; puedes cambiar el ancho y el alto. Fijate que son dos veces que tienes que cambiar cada uno y ambas veces tienes que poner la misma medida.

En cuanto a la música que sonaba, je,je, me encanta que le guste a tu "enana", ¿sabes? es una radio online y el chico que presentaba los temas es mi marido... shhhh :D

Con un enlace puedes oírla en tu PC y además pedir dedicatorias o canciones a través del msn. :D

Fabiana

:D jaja, con razón!! está muy bueno el programa.
Un abrazo y gracias por todo.

Marianella

Hola Rosa, anoche coloque el rotador y me quedo muy chulo pero hoy, no rotan las imagenes :( puedes verlo en mi Blog porfa, no que estara pasando :(( , espero tu ayuda.

En tu Ausencia

Marianella

Ya me di cuenta que paso, Rosa me disculpo si hice que perdieras un poquito de tiempo pero me desespero no saber que pasaba, era que como tengo mi blog de pruebas habia utilizado el mismo codigo para dos rotadores y eso no esposible a menos de hacer unos cambios, lo elimine de mi blog de pruebas y ya esta!!! :D

Gracia por los bonitos tips que das para alegrar nuestros blog's un beso

Marianella
En tu Ausencia

Rosa

Marianella Nada de tiempo perdido cielo...voy contestando por orden y acababa de tocarte a ti, así que no he tenido que hacer nada ;)

NOSOTRAS

hola Rosa tenias razon no estaban las fotos en el servidolas habia pasado a una carpeta ya las he puesto bien, lo que pasa es que no rotan que hice?

Rosa

NOSOTRAS ¿Para cual de los blogs era? Siempre pensáis que voy a recordar todos los casos y me es imposible... y si comentáis sobre lo mismo, días más tarde y en distinta entrada...uff, entonces se de que va el tema de milagro :S

NOSOTRAS

perdona Rosa el blog en cuestion es http://lomasnueve.blogspot.com/ muchas gracias cariño

Rosa

NOSOTRAS Ahora te pasa lo mismo pero con la url del script...no es dificil de comprobar estas cosas cuando algo falla...y conseguís retrasar todo por no probarlo vosotras....

Cuando un "truco" no anda y usa url del tipo que sea, se copia la url se pega en el navegador y se mira...en el caso del script lo haces y mira tu misma lo que sale, pega en el navegador la url:
https://dl-web.getdropbox.com/get/Photos/CABECERA/SCRIP%20CABECERA.js?w=a01ea591

Esa no es la url que necesitas, la que necesitas es la que sale en "public url" siempre que hayas guardado en Dropbox el archivo en una carpeta publica claro, sino no funciona...

NOSOTRAS

toda la razon, muchas gracias Rosa un abrazo maestra

Rosa

NOSOTRAS Es que te juro que a veces me da pena el tiempo que perdéis en lograr algo por no pararos a pensar las cosas :P
Y al fin ¿qué? rota o no rota:D

INMA Y ANGEL

HOLA ROSA, NOSE QUE ME HA PASADO HE QUERIDO CAMBIAR LAS FOTOS Y AHORA NO SE ME VEN EN EL BLOG, SI PINCHAS SI SE VEN EN GRANDE.
PARA QUE TOCARE LAS COSAS....

Rosa

INMA Y ANGEL Por lo que veo has retirado el rotador...en fin, no se que hiciste, pero cambiar las imágenes es tan fácil como sustituir unas url por otras en el código.

INMA Y ANGEL

HOL, NO HE QUITADO EL ROTOR LO QUE PASA ES QUE NO SE CARGAN LAS FOTOS, PERO SI QUE SE VAN CAMBIANDO

Rosa

INMA Y ANGEL Ya veo, ya...supongo que no estáis a diario en esto de los blogs y es por eso que no os habéis enterado que SkyDrive dejó de funcionar, o sea, funciona pero no mantiene las url de los archivos que se alojan allí.
Tenías allí subido el xfade2.js y es por eso que ya no va el rotador...tienes que subir ese archivo a otro alojamiento y cambiar la url en la plantilla.

NOSOTRAS

rotan perfectamente, eres una maquina

Rosa

NOSOTRAS ¡Bien! lo has logrado ¿ves? ;)

XCris44X

www.todoenlaluna.blogspot.comHola Rosita, me gusto mucho esta entrada, pero queria preguntarte si sabes como hacer un CARRUSEL DE IMAGENES, en este blog hay uno:

http://softonickfull.blogspot.com

En la parte superior hay imagenes que rotan infinitamente, y me preguntaba si podias publicar el codigo de ese carrusel, bueno eso es todo espero que lo tomes en cuenta, gracias adios

Rosa

XCris44 Es fácil :D
Ese efecto está hecho con la etiqueta marquee, exactamente así:

<marquee scrolldelay="145" direction="up" onmouseover="stop()" onmouseout="start()" scrollamount="2">
AQUI PONES LA URL DE LAS IMAGENES UNA SEGUIDA DE OTRA
</marquee>

.|. +++ .|.

www.todoenlaluna.blogspot.comGRACIAS ROSITA :) , ES EL CODIGO QUE BUSCABA, GRACIAS MUCHAS GRACIAS, Y SOBRE ESTA ENTRADA, ¿COMO HAGO PARA QUE LAS IMAGENES PASEN MAS LENTAS? ESQUE LO QUIERO PONER PARA UNA ESPECIE DE PUBLICIDAD EN MI BLOG, Y QUIERON QUE PASEN MAS LENTAS, GRACIAS ESO ES TODO

Rosa

.|. +++ .|. Tendrías que modificar el script:

setTimeout(so_xfade,3000);

Fabiru69

Gracias por el truquin, como tengo pocas secciones lo utilize de banner de ellas y se ve super nice, chido por la info, gracias.

Rosa

Fabiru69 Genial! Gracias a ti :D

P2Pcorp

Hola rosa quisera implementar este rotador en mi blog pero el xfade2.js no esta disponible porfa abria la manera que me lo pasaras de algun modo estare agredecido

por que este rotador es casi identico al de esta pagina creo espero lo veas

http://scenelatina.org/

P2Pcorp

mira rosaa encontre esto se parece bastante a este post oajala agas un tutorial de como poner esto en un blog saludos

http://www.frontpageslideshow.net/

P2Pcorp

Hola otra ves encontre un tutoria pero no se donde poner los script

http://igneoo.blogspot.com/2009/06/como-instalar-tiny-slideshow-en-blogger.html

Rosa

P2Pcorp Veo en los comentarios de esa entrada que Ignacio está tratando de ayudarte, y además muy amablemente...
El lo sabrá mejor que yo, ya que lo ha instalado y ha visto como funciona, yo no.

soloconstruccion

Gracias por el truco, pero la verdad no logro hacer q roten las imagenes, el scrip lo subi a GoogleSites y desde alli tome la url...talvez estoy tomando mal las url de las imagenes? son imagenes que ya las he cargado para entradas desde blogger...

...el blog donde intento colocar el rotador de imagenes es Zona Estrenos...y de una vez aprovecho para preguntar si es posible hacer q quede centrado, como podras ver queda muy corrido hacia la izquierda...gracias por la ayuda

soloconstruccion

Hola...seria posible realizar un efecto q se vea como el que sale en esta pag. http://quehayparahacer.com (rotan las imagenes y sale texto...)

Rosa

soloconstrucción Funcionar, funciona, así que revisa el código o como tu bien dices, las url de las imágenes.
Para centrarlo, trata de cambiar "position: relative;" en el código por "position: center;"

En cuanto al efecto que dices de esa página, lo siento, pero ahora mismo no tengo la posibilidad decomprobar si es posible.

ZETSU

donde puedo alojar el archivo .js por que lo e echo pero no me funciona hayudame.

http://peliculasddonline.blogspot.com/

Rosa

ZETSU Pon en mi buscador "alojar scripts"

Ascesino96

HOLA ROSA!!! tu que script usas para el gadget de últimos comentarios, porque los que tu pusiste aqui ninguno me funciona, pruebo de nuevo a ver si alguno funca!!!

Rosa

Ascesino96 Todos los script que tengo publicados para últimos comentarios funcionan, menos el que te indiqué el otro día, los demás van sin problema.
Yo uso el último que he publicado en el blog.

Ascesino96

ok, igual ya lo consegui!!!
bueno, ahora el problema es, yo pude agregar el ggadget de últimos comentarios personalizados con icono, y todo marcho de maravilla, "but the problem is":
quiero ponerle esos puntitos que separan al autor del texto, quiero sacarle la fecha, quiero sacrle desde que entrada es el comentario, yen tu entrada si explica el problema es que no me funciona, bueno, gracias de antemano, y responde lo mas antes posible si puedes

Rosa

Ascesino96 Si, allí se explica, así que solo tienes que seguir las instrucciones, si yo y más gente han podido hacerlo, tu también... revisa los comentarios que seguro te ayudan.
Y te repito por favor que comentes en la entrada que corresponde, este comentario no debería estar en esta entrada...

Un Perro

Y ahí va el Perro de nuevo...uff :S
Bueno en el comentario 23 de Rubí casi encuentro solución a mi problema...pero me he quedado con las ganas de saber como se soluciono.
El rotador previamente se carga mostrando todas las imágenes al unisono (desprolijo)...luego comienza a rotar pero se escalonan entre si las fotos...
Comienza con la imagen1...esa misma imagen se desplaza hacia abajo, encima de ella se presenta la imagen2 y a su vez la imagen1 desaparece, el mismo criterio para las tres imágenes.
dejo el blog "por si las moscas" BLOG
:S
Yo me quedo aquí quietito, esperando en la fila..no tengo apuros. :)

Un beso Rosa :D

Rosa

Un perroMira, si tienes la paciencia de mantenerte un poquito más en la fila, voy a publicar pronto un sistema que hace eso mismo usando Scriptaculous y que no da ni la mitad de problemas que este...

Un Perro

Rosa, a ti, toda la vida igual :D
Espero aquí quietito :)

c

Hola rosa, ya saque las 3 columnas y deje solo una arriba de la entrada para colocar alli las imágenes, se que debería agrandar cada foto pero el gadget es pequeño, como hago que ocupe todo el ancho? María c

Rosa

c Vamos a ver... el gadget ocupa todo el ancho de las entradas... ¿o hablas del ancho del cuerpo del blog (entradas-sidebar)? porque si es así, lo que debes de hacer es colocar el gadget en el crosscol:
http://elescaparatederosa.blogspot.com/2008/10/aprovechando-espacios-en-la-plantilla.html

Y si tu plantilla no tiene esa opción (crosscol) puedes añadirselo sin problemas siguiendo esa misma entrada.

c

Rosa GENIA!!!!!!!!! GRACIAS, ESTA QUEDANDO REQUETE LINDO!!!! MARIA

¿Quién te lo dijo...

Rosi: Me gustaría que no tuviese borde las imágenes que quiero rotar y no se como se hace, y también poderlas centrar en el lugar donde las pongo. ¿Me puedes decir como lo hago?.

Gracias

Rosa

¿Quién te lo dijo... Eliminas esta línea en el código y ya no tendrás borde:

border: 2px solid #CC0000;

Para centrarlo deberás añadir en esta línea del código: <div id="rotator"> algo como esto:

<div style="text-align: center;" id="rotator">

Quien te lo dijo...

Hola Ro que tal!!, acá de nuevo con algún tema...
sabes que el tema del centrado no se porque pero no me funciona (lo he puesto en el Gadget, lo guardo y pone una linea más alrededor de la imagen, luego voy nuevamente al Gadget, y no dice lo q puse, lo cambia automáticamente, pero NO ME DEJA PONERTE EL CODIGO COMO QUEDA ACÁ

Además, debajo de las imágenes me queda una línea negra bastante desprolija y cada una son del mismo tamaño.
Gracias, y saludos

Rosa

Quien te lo dijo... Todos esos cambios se logran en el CSS.
Los he hecho por ti esta vez...
Cambia el CSS por este:
/* ROTADOR DE IMAGENES
-------------------------------- */
{
margin: 0;
padding: 0;
}
#rotator
{
border: 0px solid #8A084B;
overflow: hidden;
margin: 10px 10px 10px 50px;
padding:2px;
position: relative;
width: 193px;
height: 280px;
}
#rotator img
{
border: 0;
width: 193px;
height: 283px;
}

Quien te lo dijo...

Dios que linda eres!!!, ya quedó y genial como siempre...

Voy con otras dudas (para cuando puedas claro),

Quiero poner imágenes dentro de mis entradas y si es posible que abarque todo el ancho, pero... no se como se hace para saber cuánto es el mismo..
Además ¿puedo poner un flash, o swf, o con el rotador que nos enseñaste tu?

Gracias
PD: Te mandé un mail (solo para recordarte), cuando puedas leelo por favor que me preocupa el problema de los tags si es que lo he puesto mal!!

Rosa

Quien te lo dijo... No estoy muy segura, pero creo que respondí tu email...lo revisaré a ver...

En cuanto a usar el rotador con flash, no, no es posible.

Quien te lo dijo...

Hola Rosa..

Ya hace unos días hice lo del rotador de imágenes (que me has ayudado por supuesto). Hoy las cambié por otras de un tamaño distinto, cambie también el alto/ancho pero no se porque motivo cuando realiza "la segunda pasada" se ve una línea debajo de las fotos. ¿Puedes ayudarme?

Gracias

Rosa

Quien te lo dijo... Es el mismo problema de la otra vez, es el alto de las imágenes... has de dar con el adecuado, prueba a cambiar los valores como 1px o así...

manu6666

a que alojamiento de archivo puedo subir el
xfade2.js

manu6666

NO ME ROTAN LAS IMAGENES QUEDO ESTANCADO EN LA PRIMERA NO SE QUE PASO.AYUDA PLISSSSSSSSSS

Rosa

manu6666 Que ayuda quieres?... la única que puedo darte es la que ves en la entrada, no se explicarlo mejor... revisa comentarios anteriores y quizá notes que estás haciendo mal...

manu6666

gracias rosa ya lo logre.si quieres puedes mirar mi blog.

http://peliculasenzonadirecta.blogspot.com/

si quieres me puedes recomendar algo para mi blog.

Rodolfo Aceves Jiménez

Rosa:

Te felicito por tu blog.

Te recomiendo que subas y expliques Vozme que es un widget para que una voz (masculina o femenina), le dé lectura a tu post.

Lo encuentras en http://vozme.com/webmasters.php?lang=es

Saludos !!!!

Gustavo Pérez Guerra

Hola Rosa.
¿Cómo estas?

Yo lo he intentando pero no me sale y creo no haber fallado en nada. Pero no tengo rotación de imágenes.

El blog es, por si puedes echarle un vistazo,
http://motoclubvespagrancanaria.blogspot.com/

La imágen es donde pone Pizzería la Vespa.

Si me pudieras ayudar sería magnífico. Gracias

Saludos, Gustavo

Rosa

Gustavo Pérez Guerra ¿Donde has subido el archivo, el script?... creo que ahí está el fallo...

Smocker

Hola Rosa, me gustaria incluir en mi blog este slideshow

http://sandbox.leigeber.com/javascript-slideshow/

que he encontrado aquí

http://www.leigeber.com/2008/12/javascript-slideshow/

ya he subido los scripts y las imagenes, pero no termino de encajar donde tengo que poner exactamente el codigo css y el html, no se si podras echarle un vistazo, pero si puedieras te estaria muy agradecido. Muchas gracias de antemano y enhorabuena por tu blog.

Rosa

Smocker Pues creo que es esta misma galería la que dices:

http://loseasi.blogspot.com/2010/03/tiny-slideshow.html

Smocker

Si es el mismo, pero sigo teniendo la misma información, no se donde poner exactamente el codigo css y el html.

Rosa

Smocker Te envié ahí precisamente para que preguntaras lo que necesites, ya que Vku lo instaló el sabrá orientarte mejor que nadie...
En cuanto al CSS, como en todas las plantillas de Blogger ha de ir antes de ]]></b:skin> y el HTML en el lugar que vas a mostrar el slide, que supongo sea una entrada.

Smocker

Ok ya he probando lo que me has dicho, pero estoy haciendo algo mal, le preguntaré a Vku como me has dicho, muchas gracias Rosa, un saludo :D

Smocker

Rosa he estado probando el slideshow que te comente, el del blog de Vku, pero al incluirlo deja de funcionar scriptoculus, ¿sabes a se debe esto? Gracias de antemano.

Rosa

Smocker Usa JQuery y las dos librerías de script son incompatibles, no pueden usarse ambas.

Smocker

Ok Rosa, creo que haré algunos cambios, muchísimas gracias.

Cocofansclub

Hola Rosa!queria hacerte solo una pregunta este rotador puedo usarlo en una entrada? no alcance a leer todos los comentarios,puede que este la respuesta,no te enojes!!
como siempre muchas gracias

Rosa

Cocofansclub En una entrada no puede utilizarse, pues el editorde Bloger no interpreta bien el código y las imágenes se deforman...
Para eso puedes usar este con Scriptaculous:
http://elescaparatederosa.blogspot.com/2009/08/rotando-imagenes-con-scriptaculous.html

Cocofansclub

muchas gracias Rosi!voy a probar con esa entrada.

Sensation 4 a Dance

Lamentablemente en mi plantilla no funciona :(

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