JMiur [E]

A mi siempre me sorprende lo que hace leigeber. Esta vez es uno de los tantos slideshows que existen pero con dos particularidades que lo destacan, primero, porque no requiere librería alguna y segundo porque el script es pequeñisimo.

Todo lo que necesitamos es ir a su página y descargar el ZIP que tiene los archivos necesarios y un demo pero, la idea es muy simple.

Primero, colocamos el script, ya sea, directamente en la plantilla:
<script type='text/javascript'>
//<![CDATA[
  ... aquí copiamos y pegamos el contenido del archivo script.js ...
//]]>
</script>
o lo cargamos desde algún servidor externo, en ese caso, podemos elegir entre el archivo normal (script.js) o uno comprimido (packed.js) aunque es tan pequeño que no sé si vale la pena:
<script type="text/javascript" src="URL_script.js"></script>
Luego, el CSS con las variantes que dependerán de las imágenes que utilicemos:
<style type='text/css'>
#demowrapper { /* el rectángulo contenedor */
  margin: 0px auto;
  /* el ancho de la imagen + los anchos de las flechas de navegación + los bordes */
  width: 598px;
}
.sliderbutton { /* las flechas de dirección */
  float: left;
  padding-top: 148px
  width: 32px;
}
.sliderbutton img { cursor:pointer; }
.sliderbutton img:hover { background: #666; }
#slideshow { /* el rectángulo con las imágenes */
  background-color :#000;
  border: 2px solid #FFF; 
  float: left;
  height: 350px;
  width: 520px;
}
#slides { /* la lista con las imágenes */
  list-style: none;
  margin: 0;
  height: 350px;
  overflow: auto;
  padding: 0;
  position: relative;
  width: 520px;
}
#slides li { /* cada item de la lista es una imagen */
  height: 350px;
  width: 520px;
}
.pagination { /* la paginación inferior */
  float: left;
  list-style: none;
  height: 25px;
  margin: 15px 0 0 32px;
}
.pagination li { /* cada item es un número de orden */
  background: #000;
  border: 1px solid #666;
  color: #888;
  cursor: pointer;
  float: left;
  padding: 5px 8px;
  margin: 0 4px 0 0;
  text-align: center;
}
.pagination li:hover { border: 1px solid #FFF; color: #FFF; }
li.current { border: 1px solid #FFF; color: #FFF; }
</style>
Ahora, vamos a poner el HTML en cualquier parte, por ejemplo, en una entrada, o en un elemento HTML:
<div id="demowrapper">
  <div>
    <!-- la flecha de navegación hacia la izquierda -->
    <div class="sliderbutton"><img src="URL_imagen_izquierda" onclick="slideshow.move(-1)" /></div>
    <div id="slideshow">
      <ul id="slides">
        <li><img src="URL_imagen_1" /></li>
        <li><img src="URL_imagen_2" /></li>
        <!-- seguimos agregando todas las que se nos ocurra -->
      </ul>
    </div>
    <!-- la flecha de navegación hacia la derecha -->
    <div class="sliderbutton"><img src="URL_imagen_derecha" onclick="slideshow.move(1)" /></div>
  </div>
    <!-- la paginación inferior -->
    <ul id="pagination" class="pagination">
    <li onclick="slideshow.pos(0)">1</li>
    <li onclick="slideshow.pos(1)">2</li>
    <!-- seguimos agregando tantas como imágenes siempre con un numero correlativo -->
  </ul>
</div>
Inmediatamente después, llamamos a la función:
<script type="text/javascript">
  var slideshow=new TINY.fader.fade('slideshow',{ id:'slides', auto:3, resume:true, navid:'pagination', activeclass:'current', visible:true, position:0 });
</script>
donde

id:'slides', // es el ID de la lista UL
auto:3, // es la cantidad de segundos entre slides
resume:true, // poner false si no se quiere continuar después de una interrupción
navid:'pagination', // es el ID opcional de la paginación inferior
activeclass:'current', // es la clase que define la paginación actual
visible:true, // muestra la primera imagen al iniciarse
position:0 // el número de orden de la primera imagen

79 comentarios:

LNR  

BUENISIMO LO Q ANDABA BUSCANDO

Responder
La hormiguita  

Muy bueno... se puede poner texto como en el otro de Tiny???? :)

Responder
Unknown  

Precioso Jmiur :P

Responder
Gem@  

No es extraño que te sorprenda, tiene la virtud de hacer sencillo lo complicado.
Le parece a alguien que yo conozco :)

Responder
Karla Castañeda  

Hola JMiur

No se si lo habrás notado pero a mi me encanta todo lo que termina en ísimo, buenísimo JMiur me lo llevo! :D

Responder
Karla Castañeda  

Oh JMiur me imagino que ya viste todo lo que tiene, me encanto el tinyScroller, el tinyBox (buenísimo), el tiniSlider que es muy similar a este; por lo que veo le encanta todo lo tiny (chiquito, pequeñito).

En la UNI, de seguro le encantaban los tiny~resumenes, muy seguramente debe estar casado con una tiny~chica, todo tiny, tiny...ya te imaginarás...jaja estoy bromeando mis respetos para el, es mi ídolo. :D

Responder
Mauricio Andrian  

No me funciona en Firefox 3.6.10
Pero si en Chrome.
¿Qué ocurre?

Responder
JMiur  

La hormiguita:
Se puede. Debes fijarte en la entrada del desarrollador y alllí están als explicaciones para eso.

Andrian:
Se ve perfectamente en Firefox, Chrome, IE y Opera. Carece de funciones sofisticadas.

Responder
Unknown  

Hola JMiur dime como podria poner el slideshown dentro de una entrada, el primer script y el css estan en la plantilla y la parte del html+el segundo script estan en la entrada de prueba pero me sale un pequeño error al pasar la imagenes.
" http://mundo-pruebas-20.blogspot.com/2010/10/1-2-3-4-5-6-var-slideshownew-tiny.html " . Espero me puedas ayudar. Saludos y Gracias ...!

Responder
JMiur  

No veo que en esa entrada haya nada. Para ponerlo en un post es exactamente lo mismo que para ponerlo en otra parte. Si usas el nuevo editor puede copiarse tal cual; si usas el viejo editor, el HTML debe escribirse en una sola línea.

Eventualmente, puede haber detalles a ajustar en función de tu plantilla pero, no sé cuál es el error que tienes.

Responder
D2U2  

Amigo como podría colocar las flechas dentro de la imagen? como se ve en esta web http://store.steampowered.com/ y si es posible la barrita de abajo tambien :$ saludos

Responder
JMiur  

Para eso, debes usar algún otro tipo de script. No sé cuál emplean en esa página.

Responder
La Cajita Felix  

NO LOGRO ENTENDER DONDE COLOCAR EL SCRIPT Y LUEGO EL CSS AGRADECERIA TU AYUDA: YA ALOJE EL SCRIPT EN MI CUENTA DE GOOGLE SITES PERO NO ENTIENDO LO OTRO SALUDOS.

Responder
JMiur  

Ambas cosas las puedes poner en cualquier lado; antes de </head>, en un post o en un elemento HTML.

Responder
LNR  

a copadazo muchas gracias!

Responder
Mauri  

mm.. crei que era lo que andaba buscando; pero me di cuenta de que las imagenes se suceden en forma demasiado lenta y con ese efecto en degradado :( ..hay algun modo de que las imagenes se sucedan de una vez y no esperar esa nitidez paulatina que aburre la vista haciendo perder el interes en seguir observando?? (please, me respondes eso?)

Responder
JMiur  

El efecto es el que hace este script. Si es aburrido o no es subjetivo. Modificar el script no es algo que pueda hacer así que sólo queda seguir buscando alguno que se adapte a tus necesidades.

Responder
Michael Graber  

I love you!
Como siempre tu es una maravilha!
A Ariane e a Gem@ siempre ablan te ti grandioso JMmiur!
Parabens!

Responder
JMiur  

Gracias, Michael. Ariane y Gem@ son dos maestras en serio :-)

Responder
Karla Castañeda  

Hola JMiur

A mí me encanta el efecto suave de la transición, disipo de Juan, lo puse en una plantilla solo que la suavidad de la trancision se ve distinta, no me refiero a el tiepo en segundos ente cada elemento si no a el efecto de la trancision en si... a que se debe?

Lo puedes ver aqui:

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

lo siento por los acentos que me comi, pero me esta sacando al usar el alt...$`

:D Regreso y que tengas una estupenda noooche!

Responder
JMiur  

La transición se ve bien, probablemente, es muy rápida pero eso se resuelve cambaidno un dato en el script que colocas debajo de la lista de imágenes. Ahora, el ejemplo muestra:
auto:2
en el de esta entrada dice:
auto:3
cuanto más grande es el valor, más "lenta" es la transicion; prueba con eso.

Responder
Karla Castañeda  

Si, ese lo cambié, inicialmente use el valor de 3 seg. y si se tarda más en cambiar la imagen, pero el efecto entre cada transición es el mismo, al efecto de desvanecimiento (como que desaparece) la imagen, no se si me explico.

Jajaja...quise decir difiero de Juan...jajaj seguramente estaba pensando en la quijadas del burro, la oreja de Van Gogh o quizás se me disiparon las neuronas, o ya me estoy volviendo loca con tanto código...¿Y Usted que opina? :D

Que tengas un disipado día..:P

Responder
JMiur  

Pués ese del tiempo es el único detalle que noto. Tal vez, el hecho de ser imágenes más pequeñas influya en algo pero, lo desconozco ya que no hay otros parámetros que se deban personalizar.

Responder
Karla Castañeda  

No te preocupes, el slideshow es excelente incluso se ve bien en IE6, excepto por los botones que tienen fondo transparente, pero, eso es lo de menos, el script es más chiquito que Poly Pocket, asi que no le busquemos peros al asunto...

:D Gracias y que tengas una estupenda noche!

Responder
Karla Castañeda  

aah otra cosa, agregaste una propiedad CSS3 en los botones de la paginaciOn? por que se ven como degradados desde el centro...se ve bien... :)

Responder
JMiur  

Sí. Eso puede hacer usando gradientes o sombras. Por ejemplo:

.pagination li {
...........
-moz-box-shadow:0 0 10px #AAA inset;
}

Responder
Unknown  

Hola
Queria saber si puedo instalarlo en mi blog!!!
Andrea

Responder
JMiur  

Sí, claro, que si. Sigue las instrucciones y no deberías tener problemas.

Responder
Pavelkapaz  

Hola Jmiur. Gracias por el pedagogico tutorial.
queria hacerte una consulta, pero relacionada relativamente con la entrada. Sucede que me encontre en internet con una tira de imagenes, que es similar a un slideshow, pero nose si es lo mismo. En esta pagina sale debajo del menu: http://www.danimes.com/ .

Queria hacer algo parecido, aplicandole alguna ventana modal. Nose si tienes dentro de tus tutoriales algo por el estilo, o al menos saber si es o no un slideshow para poder buscarlo.

Saludos

Responder
JMiur  

Eso que ves es similar pero usa JQuery. Es un script de dynamicdrive que puedes ver acá.

Responder
Un amigo  

Hola, yo soy un poco novato en todo esto y estoy aprendiendo mucho con tu blog. El caso es que esta aplicación no la puedo ver bien en el explorer y sí en muchos otros navegadores. He visto la solución que le habías dado a un lector, pero no la he entendido. El blog q estoy preparando es: http://parada144.blogspot.com/, pero no te asustes que empecé ayer, es sólo un proyecto.
Gracias, felicidades por el trabajo y Felices fiestas a todos.

Responder
JMiur  

Lo que no se ven son las imágenes; incluso si las colcoo de modo manual y trato de verlas en IE no están:

http://dl.dropbox.com/u/1116720/Parada%20144/tinyfader%20%28galer%C3%ADa%29/photos/iman1.jpg

Eso, puede ser debido al tipo de URL donde utilizas espacio, paréntesis y acentos. Siempre conviene que las carpetas y archivos no contengan caracteres especiales; que sean simples, algo así:
Parada144/tinyfadergaleria/.........

Responder
Un amigo  

Ok, perfecto, pues gracias, voy a intentar cambiar la url de esas imágenes, a ver que sucede. Yo pensaba q podía ser debido al código, que vaya en una sola línea o algo así.
Lo raro es que en el firefox se ve perfectamente y en algún otro tb.
Gracias por la pronta respuesta

Responder
JMiur  

Sí, es raro pero no veo ningún otro error y es curioso que las imágenes no se vean ni siquiera poniéndolas en la barra de direcciones así que imagino que el error está allí. Es cuestión de probar :-)

Responder
Un amigo  

Pues no hay manera, compañero, le he cambiado el link a alguna imagen y no logro que se habra, yo creo que está todo perfectamente colocado, pero en el explorer no logro verlo y en otros navegadores sí. Igual muchas gracias de nuevo por la rápida respuesta, voy a probar con otra galería q tb comentaste en el blog para ver si hay más suerte.

Responder
JMiur  

No veo que hayas cambaido las imñagenes, solo un par de ellas que apunan a direcciones como:
http://cid-c145cf172641bd25.office.live.com/self.aspx/.Public/iman1.jpg
y por lo tanto, no pueden ser cargadas ya que no son las imñagenes en si mismas sino la página web donde están incluidas. Es an particular, por ejemplo, debería tener esta URL que es la imagen en si misma:
http://public.blu.livefilestore.com/y1peEt3MTlep2v2Amn6PgdrNXESzVfdGqk-j_AWnAItd0CPJ8nDiYOROct9B147HKGI9YC4sWCYXS9T1Nxsp3_fDA/iman1.jpg?psid=1

¿Por qué no las subes a Blogger mismo en lugar de usar servicios externos?

Responder
Un amigo  

Hola de nuevo, pues ya te dije que era bastante novato xD, ja ja, disculpa las molestias hombre. No sabía q se podían subir a blogger directamente, ahora mismo veo como se hace y espero arreglarlo.
Gracias por la atención y la respuesta, de verdad. Ya te informaré de como me fue. No tendrá nada que ver lo del código, imagino, pq lo copié directamente de tu blog (lo que has puesto arriba) y lo modifiqué, pq he leído en algún lado lo de escribir en una sola línea y todo eso. Bueno, veremos, saludos.

Responder
Un amigo  

La movida es que el slide está en un Gadget, pq no sé cual es el problema al meterlo en una entrada, ahí me cambia todo, hasta los botones de los lados. Se ve fatal.

Responder
Un amigo  

Creo que ya está, compañero, las he alojado en donde las tienes tú. Ya se ven en el explorer: http://parada144.blogspot.com/, lo de subirlas a blogger, no tengo idea, pq no es una entrada, como te comenté antes.
Bueno, no te doy más la lata, pero sí te felicito pq haces un trabajo bunísimo.

Responder
JMiur  

Para subir imágenes a Blogger, simplemente abres una entrada, subes las imñagenes, copias las diercciones y si quieres, borras la entrada. Sino, puedes acceder directamente a tu cuenta de Picasa asociada y subirlas allí.

Si quieres, fíjate en esta entrada.

Responder
Un amigo  

Sí, perfecto, entendí, no había pensado en ese método. Igual ahora creo que ya está bien, pero la próxima haré así. Gracias de nuevo

Responder
elSant0  

En tu CSS, en los parámetros para "las flechas de dirección", hay un pequeño error, dejas fuera de ".sliderbutton{...}" el parámetro "with: 32px;".

Por el resto, todo rula a las mil maravillas y es bastante configurable.

Muchas gracias.

Salu2

Responder
JMiur  

OK. YA está corregido.

Responder
Tienda Claro Perú  

Hay forma de borrar los números de abajo del slide? :)

Responder
JMiur  

Sí. Quitando la lista que comienza con <!-- la paginación inferior -->

Responder
depozoblanco  

Enhorabuena por el blog y las explicaciones.

¿Qué habría que modificar para que este script vaya deslizando solo las imágenes sin tener que pasarlas manualmente pinchando en las flechas>>??

Gracias

Responder
JMiur  

Modificar el script. No sabría decirte cómo. Convendría que buscaras un oque tenga ese efecto.

Responder
adm100388  

Excelente, JMiur.

¿Se puede ponerle texto encima?

Lo que me gustaría es que sea tipo el script de "Mootools", el slideshow que tiene es bastante bueno. Se le puede poner un recuadro de texto encima.

¿Podrás explicar ese script en alguna entrada? Si es que podés. Ya que no logro configurarlo.

Gracias por el detalle de este, es muy bueno.

Responder
JMiur  

Se puede hacer lo que quieras, es cosa de experimentar.

No uso MooTools. Justamente, al idea es no usar librerías externas.

Responder
Lic. Enrique Dalla Villa  

Me encanta pero ¿Dónde encuentro el archivo script.js? Cuando bajo el ZIP llamado "tyfader.zip" me encuentro con el siguiente listado de archivos: index.html, packed.js, style,css y tinyfader.js.
No encuentro ninguno llamado "script.js" y, en consecuencia, no sé dónde obtener el script necesario.
Gracias.

Responder
JMiur  

Eso puede ser porque la entrada tiene más de un año y el desarrollador pudo haber actualizado los archivos así que imagino que es el llamado tinyfader.js ya que el otro comprimido sigue llamándose packed.js.

Puede usarse cualquiera de los dos.

Responder
Lic. Enrique Dalla Villa  

Gracias.

Responder
Amiitha Aoi  

Hola JMiur ^^ tengo una pregunta ¿Es posible hacer funcionar este script→ http://vagabundia.blogspot.com/2012/07/una-forma-sencilla-de-desplazarse-con.html en el pager de este slide?

Me refiero a que cuando haga clic en el número de una de las imágenes, además de cambiar la imágen me lleve al inicio de la página.

El caso es que las imágenes que quiero mostrar en este slide son bastante largas (1200px) y cuando hago clic en los números de la paginación me cambia la imagen pero se muestran de la mitad hacia abajo... y es un poco molesto tener que estar subiendo con el mouse cada vez que cambio la imagen :/

¿es posible utilizar ese script?

JMiur  

Tal vez lo sea, habría que modificar el script y probar, no sé.

Más sencillo es colocar la numeración arriba y resolver ese problema porque hacer click y que la pantalla se desplace tampoco es agradable a lo que le sumarias la incomodidad de tener que bajar para cambiar por otra imagen.

En realidad, en este tipo de cosas, lo lógico es usar imágenes de poco tamaño porque sino, tardará mucho en cargarse y será incómodo.

Si la imagen original es demasiado grande, conviene usar una miniatura y enlazarla con la de mayor tamaño.

Amiitha Aoi  

Claro, en realidad el desplazamiento es favorable en mi caso. Ya que las imágenes son de una historieta, si o si hay que ir bajando para leer los diálogos (si achicara las imágenes los textos no serían legibles) por eso no es un inconveniente tener que bajar para cambiar la imagen ^^

El problema era que cuando llegaba al final de una página y cambiaba a la siguiente, la imágen se veía de la mitad hacia abajo... por eso había que desplazarse hacia arriba manualmente para comenzar a leerla :/

Logré hacer que se desplace y cambie la imagen, agregando un simple
a href='#' en la numeración, pero me gustaría que en vez que de lleve al inicio del blog me llevara al inicio de la entrada (el post-header) ¿sabe cómo puedo hacerlo? intenté poner a href='#post-header' pero no me funciona, solo cambia la imagen y no se desplaza T^T

puede verlo aquí→ http://pervert-mind-mangas.blogspot.com.ar/

JMiur  

No se desplaza con esto: href='#post-header'
porque no existe ninguan etqiueta cuyo ID sea esa.

En esas plantillas nuevas de Blogegr hay pocos IDs. Podrías probar con:
href='#demowrapper'

Amiitha Aoi  

Perfecto *-* muchas gracias JMiur!
Como siempre su ayuda es 100% efectiva ;)

Antes que lo olvide tengo una observación, en el código CSS le falta un ; luego de "padding-top: 148px"...

De nuevo gracias por esta gran entrada!
Tenga un buen día ^^

Responder
Amiitha Aoi  

Hola JMiur ^^ de nuevo paso a sacarle un poco de tiempo... Tengo una pregunta acerca del pagger ¿Cómo hago para poner la numeración en un selector?
Intenté poner:

opt.. value="slideshow.pos(0)">000a000b000a</option

pero sigue sin funcionar :/

Antes que nada le pregunto ¿Es posible hacerlo? y si se puede no me echa una manito?

JMiur  

Imagino que cambiando ul id="pagination" por el select pero no puedo darte muchos detalles más:

<select>
<option onclick="slideshow.pos(0)">1</option>
<option onclick="slideshow.pos(1)">2</option>
......
</select>

Amiitha Aoi  

De nuevo funcionó ^^ muchas gracias por su ayuda!

Responder
Amiitha Aoi  

Buenas de nuevo JMiur ^^
perdón por insistir tanto con este tema... es que tengo una nueva consulta.

gracias a su ayuda pude colocar el pager de este slide en un selector y dejé otro debajo del slide por si a alguien le resulta mas cómodo manejarse con los numeritos...

Ahora que estaba probando a ver si todo funciona correctamente me percaté de algo, cuando hago clic en un número desde el selector del pager o bien desde las flechitas y cambio de imágen, el número de imagen del pager que está debajo del slide se cambia automáticamente.

Quisiera que el número del selector también lo hiciera, me refiero a que cuando cambie la imagen también cambie el número que aparece en el selector ¿Es posible hacerlo?

este es el blog de pruebas→ http://pervert-mind-mangas.blogspot.com.ar/

JMiur  

El número inferior cambia. No sé a qué selector te refieres. Si son los controles superiores deberás buscar en el sript y ver la forma en que se maneja esa parte.

Responder
Sebas  

Buenas compañero, tengo un problemilla con el script y es que cuando pongo una galeria de imágenes PNG con su transparencia correspondiente y sin background-color, al cambiar de clip se muestra la imagen anterior detrás. Es decir, el clip no desaparece y se coloca atrás. Hay algún modo para que pueda ocultar estos clips que no se están mostrando en ese momento? No sé si me explicado bien, muchas gracias de antemano.

JMiur  

No tengo idea si tal cosa es posible, mucho más sencillo es que colocque un color de fondo igual al color de fondo donde se muestra:

#slideshow { /* el rectángulo con las imágenes */
background-color :#000;
}

Sebas  

Ok compañero. No me sirve poner un background-color o image. De todos modos, muchas gracias por tu tiempo!

Responder
jeazu  

Hoola,
Tengo dos banners en una misma página pero tengo un problema cuando pincho en el boton de siguiente del banner 2 se mueve la imágen del banner 1, alguien sabe porque.
Saludos

JMiur  

Eso ocurre seguramente porque ambos tienen el mismo ID; no estoy muy seguro si pueden ser colocados dos en una misma página.

Responder
Unknown  

No veo el enlace para descargarme el fichero.zip donde se encuentran los .js.

JMiur  

En la página de los desarroladores.
http://www.leigeber.com/2010/09/fading-slideshow-script/

Responder
Unknown  

esta muy bueno este post super recomendado

Responder
Unknown  

hola JMiur ojala puedieras ayudarme con un slider que tiene 4 imagenes lo quiero adaptar a 3 pero no encuentro como hacerlo

JMiur  

No sé cual es ese slider, deberia ver el ejemplo.

Responder
Unknown  

amigo puedo usarlo asi como esta o necesito agregarle mas cosas?

JMiur  

A gusto de cada uno.

Unknown  

no me corre las imagenes amigo, solo me aparecen una arriba y las demas de bajo.

Responder
Unknown  

me puedes pasar el Zip que no lo tengo y de pana perdon por tantas preguntas

JMiur  

Lo siento pero no tengo ningún ZIP y para ver el problema, tendrías que decir donde esta tu ejemplo para poderlo ver online.

Responder
senderos montañosos  

hola buenas tardes, felicitarte por esta pagina , que para los que estamos aprendiendo es de gran ayuda.solo hay un pequeño problema, el enlace hacia la pagina de "leigeber" nos lleva hacia un "404 not found",podrias poner el script necesario o decirme donde lo puedo descargar gracias

JMiur  

es este:
http://dl.dropboxusercontent.com/u/21163834/SRC/tinyfader.txt

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

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