Carrusel de imágenes

[Lorenzo M. Oliver]

Hola,
¿Le interesa a alguien que explique aquí como hacer un "escaparate de imágenes" que se mueve horizontalmente y que incluye enlaces a otras páginas? Tengo uno en mi home con 5 imágenes:

Se trata de un código comentado en un foro de CreatorsNing y resuelto de una manera particular sin necesidad de usar servidores externos. Es muy fácil!

[Rosa Maria Lopez]

A MI ME INTERESA, MUCHAS GRACIAS. ROSA MARIA

[Alejandra Casanova]

A mi tambien me interesa muchísimo. Abrazos .Alejandra

[John]

Creo que hay interés.
Saludos,
John

[Vampas Kinomoto]

leamos, se ve interesante

[Mateo Poli Salsero]

Si por favor!!
Eres una caja de sorpresas.
Soy todo oidos

[Alexander Molina]

Yo me apunto.

[Rosario T.]

Sí por favor. Creo que puede ser muy interesante.

[Lorenzo M. Oliver]

Ok; Se trata de ubicar código JavaScript en un Cuadro de texto (ver ADMINISTRAR -> Aplicaciones para colocar un Cuadro de texto en el lugar que os interese).

Claro está en que por motivos de seguridad y de otra índole que no vamos a explicar aquí, no es posible colocar el código Javascript que nos dé la gana y dónde queramos (esto, que parece una desventaja en Ning, no lo es).

Así pues, lo que vamos a hacer es (1) escribir ese código en un archivo HTML (como si fuera una página web), (2) subir las imágenes del carrusel al servidor de Ning y (3) subir ese archivo HTML al servidor de Ning. Vamos a describir estas 3 fases:

1- Escribir el código en un archivo HTML
Me he permitido hacer ese trabajo por vosotros, así que lo teneis adjunto a este comentario (libros.htm). No obstante, debereis editarlo (mediante el Bloc de Notas u otro editor de texto ASCII) para poder especificar las imágenes que vais a utilizar en el carrusel. Aquí abajo os muestro las imágenes que yo esto utilizando (dynamicbook1.gif, dynamicbook2.gif, etc.):

No os asusteis; lo que realmente impresiona es la ubicación de esas imágenes en el servidor, que se trata de un código largo y encriptado. A continuación os explico cómo subirlas.
Ojo: las imágenes tienen que ser del mismo tamaño y, en este ejemplo estamos usando imágenes de 105px de ancho y 140px de largo. No obstante, podreis usar otro tamaño si lo especificais en el código.

2- Subir las imágenes del carrusel al servidor de Ning
No es ningún secreto: podeis subir cualquier imagen utilizando un comentario, una entrada en el blog, o cualquier otro item de publicación de vuestra red social; incluso seguirá en el servidor aunque borreis el item. Asi pues, publicad una entrada en el blog de vuestra red social donde quereis colocar el carrusel e insertar las 5 imágenes, una detrás de otra, en la misma entrada.

Una vez que hayais subido las imágenes, vereis que Ning les ha asignado una ruta de ubicación en el servidor; debereis copiar lo que se encuentra entre comillas: desde "http" hasta "gif". Por ejemplo:

Después, en el archivo HTML y haciendo uso del Bloc de notas, pegareis esa parte de código sustituyendo el código de cada una de mis imágenes. Observad que el código a sustituir se halla después de la etiqueta IMG SRC

Después, debereis editar el enlace asignado a cada imagen; en mi caso he hecho que todas las 5 imagenes enlacen a http://www.aprenderobotica.com/group/tutoriales
Guardar el archivo "libros.htm" modificado y borrar la entrada en el blog que os ha servido para subir las imágenes.

3- Subir ese archivo HTML al servidor de Ning
De la misma manera que habeis subido las imágenes, hay que hacerlo con el archivo "libros.htm"; en este caso usaremos el icono "Cargar un archivo" en la barra de herramientas para publicar entradas en el Blog. Después de cargarlo, copiar la ubicación de ese archivo que os ha asignado Ning y guardarla para usar después. Por ejemplo, en mi caso es:

Una vez que hayais borrado esa entrada de Blog, editar el Cuadro de texto que preparamos al principio escribiendo las etiquetas IFRAME y pegando entre estas la ubicación del archivo "libros.htm", tal como podeis ver en el siguiente ejemplo:

El tamaño especificado en la etiqueta IFRAME (210px ancho y 150px de alto) es el adecuado para una Caja de texto en la columna izquierda de la Home de mi red.

Podemos hacer algunas otras modificaciones en ese archivo HTML, como el tamaño de las imágenes y la velocidad del carrusel. Ya me preguntareis y os explico sin ningún problema.

Aunque me he extendido para ser lo más detallado posible, todo esto no debería comportar ninguna dificultad, aunque alguno de vosotros no sepa nada de Javascript ni HTML. De hecho, incluso si no lo veis interesante para colocarlo en vuestra red, os animo a probar y de esta manera comprobareis por vosotros mismos las posibilidades que existen en Ning para publicar cosas interesantes.

[Alexander Molina]

Gracias,
Pero no encuentro el codigo HTML para editarlo, Cuando le doy click al link libros.htm lo que me sale es el carrusel

[Lorenzo M. Oliver]

NO le deis al link "libros.htm"; teneis que guardarlo en vuestro disco y editar las modificaciones propuestas mediante el Bloc de notas de Windows u otro editor de texto ASCII (nunca con un procesador de textos Word, Work, etc.).

Cada vez que lo editeis y lo guardeis, procurad mantener siempre la extensión del archivo como "htm". No lo olvideis: se trata de una página web que mostramos en una "ventanita" (IFRAME) en nuestra página de la red social.

Sigo pendiente de vuestras dudas...

[Alexander Molina]

GRACIAS,
Yo aprendo.
Voy a intentar, te dejare saber los resultados.

[Alexander Molina]

EHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH Lo hice, lo hice, lo hice.
GRACIAS!!!
Ahora voy a trabajar con la edicion.