JMiur [E]

Ultimate Fade-in slideshow es un script de Dynamic Drive que crea galerías animadas con imágenes y utiliza JQuery.

Tiene muchas opciones personalizables: velocidad, posibilidad de generar galerías manuales o automáticas, usar enlaces, agregar textos con descripciones, y tal vez, lo más interesante, es que podemos agregar varias en la misma página, cada una con sus respectivas opciones.

Vamos con lo simple ... en la página del autor se pueden ver otros ejemplos y posibilidades.

Primero que nada, si no la tenemos agregada, necesitamos JQuery que ponemos antes de </head>; la cargamos directamente desde las librerías de Google de este modo:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.js' type='text/javascript'/>
Luego, descargamos el script fadeslideshow.js y lo alojamos en algún servidor o lo copiamos y pegamos directamente en la plantilla:
<script type='text/javascript'>
//<![CDATA[
  // AQUÍ PEGAMOS EL CONTENIDO DEL ARCHIVO
//]]>
</script>
En el script sólo necesitamos modificar las direcciones de las imágenes que son tres y que también podemos descargar desde la web del autor: restore.png, x.png y loading.gif.

¿Cómo lo usaremos? Basta colocar un DIV con un ID donde querramos mostrar la galería, por ejemplo:
<div id="fadeshow1"></div>
Y a continuación de eso llamamos a la función y establecemos las opciones:
<script type="text/javascript">
  // le damos un nombre único, si usamos otra, le ponemos otro nombre
  var migaleria1 = new fadeSlideShow({
    wrapperid: "fadeshow1", / este es el ID del DIV anterior y también debe ser único
    dimensions: [400, 260], // aquí indicamos el ancho y el alto, si usamos imágenes de diferente tamaño, poemos el tamaño mayor
    // colocamos la lista con las direcciones URL de las imágenes a mostrar
    imagearray: [
      ["URL_imagen_1"],
      ["URL_imagen_2"],
      ["URL_imagen_3"],
      ["URL_imagen_4"]
    ],
    // el resto de las opciones
    displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
    persist: false,
    fadeduration: 500,
    descreveal: "ondemand",
    togglerid: ""
  })
</script>
donde, las opciones posibles son:
displaymode es obligatorio y tiene varios parámetros:
  • type puede ser auto o manual e indica la forma en que se mostrará la galería
  • pause indica la pausa entre imágenes (en milisegundos)
  • cycles si ponemos 0, el slideshow se repetirá indefinidamente, cualquier otro valor indica la cantidad de veces que se ejecutará
  • wraparound si ponemos false deshabilita algunas de las funciones al navegar manualmente
  • randomize si ponemos true, las imágenes se muestran en cualquier orden
persist lo ponemose en true si si queremos que se agreguen cookies de tal modo que el navegador "recuerde" el estado de la galería y no deba recargar todo al volver a entrar en la página
fadeduration es la duración de las trancisiones (por defecto es 500)
descreveal es lo que permite establecer las diferentes opciones de los textos que podemos agregar y no he probado
Si quisiéramos colocar una barra de navegación, debajo del DIV, colocaríamos otro con este esquema:
<div id="fadeshow1toggler">
  <a href="#" class="prev"><img src="URL_imagen_anterior" /></a>
  <span class="status"></span>
  <a href="#" class="next"><img src="URL_imagen_siguiente" /></a>
</div>
y en el parámetro togglerid, pondríamos el ID de ese DIV; por ejemplo:
togglerid: "fadeshow1toggler"
En ese DIV, es importante colocar las clases tal como están definidas ya que son utilizadas dentro del script; si queremos poner otros nombres, deberemos editar el código.

23 comentarios:

SDK  

se puede que las imagenes tengan enlaces?

Responder
John Mistery Doe  

Hola JMiur

Que bien me a venido esta galería, llevaba una semana intentando colocar una de “motools” (o algo así) y al final no lo conseguí.

Esta galería me funciona perfectamente en todos los navegadores menos en IE , además me da el siguiente error:

Mensaje: 'imagearray[...].0' is null or not an object
Línea: 727
Carácter: 3
Código: 0
URI: http://trucoconsolas.blogspot.com/

He repetido el proceso varias veces haber si había cometido algún error, pero sigue igual.

¿Qué puedo hacer? Saludos!

Responder
Beben Koben  

nice slide...:)

Responder
del batitú  

Hola Jmiur, tengo dos preguntas que no tienen nada que ver con esta entrada: hace unos días vi mi blog en un monitor plano y super moderno, y me encontré con que se ve horriblemente hacia la izquierda. Busqué una respuesta en tu blog y la encontré, no estaba en mi compu, así que no guardé la entrada en marcadores, pensando que de todas maneras fácilmente volvería a encontrarla, uuyy, pero no la encuentro,podrías pasármela para intentar centrar el blog?
y la segunda, quiero subir en uan entrada un video de youtube con fotos, hay manera de agrandarlo un poco para que no quede tan pequeño ahí en el centro? chas gra Jmiur, abrazos

Responder
JMiur  

SDK:
No tengo idea. Probablemente no, a menos que se modifique sustancialmente el script.

John Mistery Doe:
En lugar de escribirlo así:
imagearray: [
["URL_imagen_1"],
["URL_imagen_2"],
["URL_imagen_3"],
["URL_imagen_4"]
],
prueba escribirlo así:
imagearray: [["URL_imagen_1"],["URL_imagen_2"],["URL_imagen_3"],["URL_imagen_4"]],

del batitú:
No sé cuál entrada sería pero no importa. Efectivamente, tu blog no se ve centrado pero eso se corrige fácilmente. Busca la regla #outer-wrapper {} allñí debes ver algo como esto:

#outer-wrapper {
.......
left: 18px;
position: absolute;
top: 0;
}

Y elimina esas propeidades, fundamentalmente, position: absolute;

No sé cuál código de YouTube utilizas; si es el que provee el sitio mismo, allí puedes seleccionar el tamaño o bien cambiar los datos del código, modificando los parámetros width y height

Responder
L  

increible galeria !!!
gracias por el post lo voy a usar

Responder
del batitú  

Muchas gracias Jmiur, un máestro (con á) como siempre

Responder
John Mistery Doe  

Ya encontré el error, como quería añadir enlaces y descripciones a las imágenes, cambie esto:
["URL_imagen_1"],
["URL_imagen_2"],

Por esto:
["Url Imagen", "Url Entrada", "linktarget", "Descripción"],
["Url Imagen", "Url Entrada", "linktarget", "Descripción"]

Y el fallo estaba en que en la última línea no había que poner la coma al final.
Gracias por echarme una mano siempre, Saludos!

Responder
JMiur  

Perfecto :D

Responder
L  

hola JMiur
gracias por el post
pero ayudate con algo porfa
pasa que en mi blog quiero publicar mangas para lo cual quiero usar esta galeria...pero necesito ayuda con tu post de :
http://vagabundia.blogspot.com/2007/05/personalizar-los-posts.html
quisiera al ingresar a post se oculten la sidebar, cabecera, footer y mantener el formulario de comentarios , los botones de compartir
Perdon si estoi pidiendo mucho. porfa apoyame con esa nota
Gracias de antemano y por todos tus pos q me han sido de gran ayua

Responder
JMiur  

Tendría que saber qué has hecho y cuál es el post donde quiers hacer eso porque el ID a poner depende de eso.

Responder
L  

Chevere ! loco
http://ecua-sagas.blogspot.com/
aqui esta la plantilla..para cualquier cosa
http://cid-982615e5f70ce123.office.live.com/self.aspx/.Public/Plantilla.txt
:p

Responder
JMiur  

Pero, no me has dicho en que entrada estás intentando hacer eso ya que no es algo que se vea en la plantillla sino en un post en si mismo.

Responder
L  

hola JMiur necesito ayuda para añadir la galeria ...
la parte de añadir el fadeslideshow.js no entendi en que parte de la plantilla debo pegarlo ?
- asi seria o como? Ayuda porfavor
<script type='text/javascript'>
//<![CDATA[
// https://sites.google.com/site/ecuasagas/archivador/fadeslideshow.js
//]]>
</script>
</body>

Responder
JMiur  

Eso debe estar antes de </head> o bien en el post o elemento HTML donde se ubique la galería.
Sería así:

<script type='text/javascript' src='https://sites.google.com/site/ecuasagas/archivador/fadeslideshow.js' />

Responder
L  

Hola Jmiur ya pude integrar la galeria pero al parecer tengo q usar iframes xq si que causa conflictos con otros scripts q al final no se ve la galeria
cada vez se pone mas trabajosa la galeria
ai esta el 1er logro http://ecuasagas-manga.blogspot.com/2011/03/galeria1.html
quisiera ayuda para hacer cmo hiciste en http://vjquery.blogspot.com/2010/10/fadeshow.html
muchas gracias aunque se puso jodido aprendi aunque sige medio jodido jaja
pero..Gracias

Responder
JMiur  

Lo que se muestra acá es un IFRAME de esa página que indicas.

Responder
L  

hola JMiur soy yo otra vez...
necesito ayuda..para hacer un blog donde poner las galerias como tu trabajo con http://vjquery.blogspot.com para despues publicarlas con iframes -
gracias de antemano :D

Responder
JMiur  

Fíjate en estas entradas: 1 | 2 | 3

Responder
L  

gracias loco
como siempre Gracias :D

Responder
Cabañas Pehuen  

Se puede ajustar el ancho de la galería a la resolución de la pantalla? Como?

Responder
Robinxon Esthip Benavides Gomez  

Como creear una galeria de fotos en mi pagina web diseñada en html?

JMiur  

Esa s una pregunta un poco abstracta. En realidad, del mismo modo que en un blog.

Responder

¿Quiere dejar un comentario?

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

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

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