Cómo hacer un slide show o como se llame

BrotherCS · #1 (**permalink**) 13/05/2011, 20:28

Hola a todos!

Soy nuevo en la comunidad y me gustaría recibir ayuda y ayudar en mi camino a ser (o tener una base) sobre diseño web.

Siempre me pregunté como hacer un slide show (si es que se le llama así) con CSS o con JavaScript.

Sé que no puedo publicar links, pero los que entraron en el sitio web de Apple sabrán de qué les hablo. Es un slide show que va pasando de imagen cada 5 segundos y que tiene un fondo fijo y en la parte inferior unos botones que son pequeños circulos que si los apretas va a la imagen que corresponde.

Los vi tambien en otros sitios pero no recuerdo en cual.

Alguien sabe cómo hacer este tipo de slideshow?

Gracias de antemano!

ArturoGallegos · #2 (**permalink**) 13/05/2011, 21:08

buscaste en google?

búsqueda en google -> clic aquí

BrotherCS · #3 (**permalink**) 14/05/2011, 08:01

Cita:

Iniciado por Ag666

buscaste en google?

búsqueda en google [URL="http://www.google.com/search?q=crear+slideshow&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:es-ES:official&client=firefox-a#sclient=psy&hl=es&newwindow=1&safe=off&client=fi refox-a&hs=AlQ&rls=org.mozilla:es-ES%3Aofficial&source=hp&q=slideshow&aq=f&aqi=&aql= &oq=&pbx=1&bav=on.2,or.r_gc.r_pw.&fp=f979d7707f4dc 7a1"]-> clic aquí[/URL]

Pero no encontré lo que busco, lo que es raro porque es un slide que se usa mucho. Por eso no me quedó otra que pedir ayuda ^^

TEPO · #4 (**permalink**) 14/05/2011, 08:28

Lo que vos queres hacer se puede hacer de dos formas (Tal vez se pueda hacer de otra manera, pero hasta donde yo conozco de dos) una, es hacerlo con Flash y otra es hacerlo con Javascript, para hacerlo con Flash, obviamente tenes que saber manejar Flash y ActionScript, y para hacerlo con Javascript podes utilizar un framework, llamado jquery, no se si lo conoces, los frameworks hacen la tarea por vos, simplemente tenes que seguir algunas instrucciones como linkear algunos css y js a tu html, lo que vos buscas se puede hacer con JQUERY CYCLE PLUGIN, la pagina web donde te explica como usarlo y bajarlo es:

http://jquery.malsup.com/cycle/

Espero que esto te aclare las cosas.

ArturoGallegos · #5 (**permalink**) 14/05/2011, 10:23

pues no veo nada en especial en ese slideshow es similar a estos

slideshow 1
slideshow 2

y acá otros cuantos ejemplos de slideshow que me han sido utilices -> clic aquí

quizás si eres mas descriptivo en como es el slideshow que necesitas, para darnos una idea de porque no has podido encontrarlo y haber si tenemos algo entre nuestras curiosidades

otra cosa si tienes las firefox con los addons firebug y web developer solo visita la pagina donde viste dicho slideshow y examina su código para conocer como lo han realizado y con suerte sabrás como extraer esa sección del código para implementarlo en tu sitio

TEPO · #6 (**permalink**) 14/05/2011, 10:56

Bueno no se si a BrotherCS le servio de algo, pero los enlaces de Ag666, no los conocia y me parecen muy buenos, asi que los voy a aprovechar.

BrotherCS · #7 (**permalink**) 14/05/2011, 10:57

Hola TEPO y Ag666 !

Los links que me mandaron me sirven, sin embargo para ser exacto, lo que busco es el slider que aparece en apple.com/ipad/ . Como dije antes, tiene unos botones pequeños en forma de círculo abajo y al hacer clic en uno, se hace azul y van pasando a un determinado intervalo de tiempo. Eso lo he visto en muchos sitios sin embargo busqué en Google y no encontré cómo hacerlo (quizás porque no se cómo se llama exactamente).

He visto algo de JQuery sin embargo no encontré lo que buscaba, aunque supongo que con modificaciones lo podría hacer parecer al de Apple.

TEPO · #8 (**permalink**) 14/05/2011, 11:08

Cita:

Iniciado por Ag666

otra cosa si tienes las firefox con los addons firebug y web developer solo visita la pagina donde viste dicho slideshow y examina su código para conocer como lo han realizado y con suerte sabrás como extraer esa sección del código para implementarlo en tu sitio

Con esta herramienta de Firefox que te paso Ag666 vas a poder saber exactamente que es lo estan usando en la pagina de la manzana.

BrotherCS · #9 (**permalink**) 14/05/2011, 12:23

Cita:

Iniciado por TEPO

Con esta herramienta de Firefox que te paso Ag666 vas a poder saber exactamente que es lo estan usando en la pagina de la manzana.

Voy a intentarlo :D Si logro hacerlo lo publico

EDITO:

No pude hacerlo. Hay muchos códigos y me perdí. Lo único que pude ver es que es una mezcla de CSS y Javascript, y que las imagenes del slider están ordenadas en una lista tipo 'li' . es lo único :/
Voy a ver si consigo el código por otro lado.

TEPO · #10 (**permalink**) 14/05/2011, 13:04

Pasame el link de la pagina deonde esta el slider.

BrotherCS · #11 (**permalink**) 14/05/2011, 13:29

http://apple.com/ipad

Es ese slider grande que ocupa toda la pantalla que dice en grande iPad 2

Gracias de antemano!

TEPO · #12 (**permalink**) 14/05/2011, 16:36

Bueno, lo unico que puedo decirte es que usan estos frameworks:
Prototype y Scriptaculos
Yo estuve buscando bastante porque me termine interesando yo en ese efecto,pero esta dificil, encontre muchos, pero no ese, obviamente ese codigo esta retocado, es cuestion de buscar y leer sobre estos frameworks e ir agregandole las cosas.
Fijate esta pagina:

http://javascriptimagegallery.com/sc...g-gallery.html

Saludos.

BrotherCS · #13 (**permalink**) 14/05/2011, 17:29

Cita:

Iniciado por TEPO

Bueno, lo unico que puedo decirte es que usan estos frameworks:
Prototype y Scriptaculos
Yo estuve buscando bastante porque me termine interesando yo en ese efecto,pero esta dificil, encontre muchos, pero no ese, obviamente ese codigo esta retocado, es cuestion de buscar y leer sobre estos frameworks e ir agregandole las cosas.
Fijate esta pagina:

[URL="http://javascriptimagegallery.com/scriptaculous-horizontal-sliding-gallery.html"]http://javascriptimagegallery.com/scriptaculous-horizontal-sliding-gallery.html[/URL]

Saludos.

wow muchísimas gracias! Es lo más parecido que vi. Como vos decís, es cuestión de retocar

TEMA RESUELTO

ArturoGallegos · #14 (**permalink**) 14/05/2011, 19:41

muy muy buen aporte compañero @TEPO directo a mis bookmarks