JMiur [E]

jqFancyTransitions es un plugin para jQuery que permite crear una galería de imágenes con diferente efectos de transición entre ellas.

Para utilizarla debemos tener jQuery en al plantilla así que, si no la tenemos, antes de </head> agregamos la librería directamenete desde Google:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
y debajo, el plugin, ya sea cargándolo desde un servidor donde previamente lo hayamos alojado:
<script type="text/javascript" src="URL_jqFancyTransitions.js"></script>
o copiando y pegando el código y colocándolo entre etiquetas:
<script type="text/javascript">
//<![CDATA[
... aquí copiamos y pegamos el contenido del archivo ...
//]]>
</script>
No hace falta nada más; ahora, para utilizarla, tenemos varias alternativas que podemos ver explicadas en la página de los desarrolladores pero, lo más simple es colocar las imágenes en un DIV de este modo:
<div id="migaleria">
<img src="URL_imagen1" />
<img src="URL_imagen2" />
<img src="URL_imagen3" />
... y seguimos agregando tantas imágenes como se nos ocurra ...
</div>
Luego, llamamos a la función:
<script> $('#migaleria').jqFancyTransitions({ opciones }); </script>
Podemos tener varias galerías en la misma página, cada una, identificada por un atributo ID diferente (en este ejemplo migaleria) y las opciones son parámetros que se agregan separados por comas:

width y height establecen el tamaño
effect es el tipo de transición y puede ser wave, zipper o curtain
position es la posición desde donde se iniciará la transción y puede ser alternate, top, bottom, alternate o curtain
direction es la dirección de la transción y puede ser fountainAlternate, left, right, alternate, random o fountain
delay es el tiempo que permanece la imaegn visible (por defecto 5000 o sea 5 segundo)
strips es un número que indica la cantidad de "pedazos" en que se desompone la imagen (por defecto 20)
stripDelay es el tiempo que permanece visible cada "pedazo" (por defecto 50)

Otras opciones permiten controlar los textos que pueden agregarse a las imágenes, colocándolos en el atributo alt:
<img src="URL_imagen1" alt="texto a mostrar" />
titleOpacity indica la opacidad de ese texto
titleSpeed es el tiempo que tarda en ser mostrado

Como alternativa, en lugar de imágenes podemos utilizar enlaces
<a href="URL_imagen1" />
En ese caso, las opciones son dos:

navigation puede ser true o false y agrega botones de navegación
links puede ser true o false para establecer si las imágenes son enlaces o no

En este ejemplo, las opciones utilizadas son las más simples así que la función es llamada de este manera:
<script> $('#migaleria').jqFancyTransitions({ width: 640, height: 400,direction: 'random',delay: 2000, effect: 'wave' }); </script>

48 comentarios:

Unknown  

Jquery es una galeria impresionante y si más encima vemos el efecto con las bellisimas fotos que has puesto es para tentarse jejeje :)
Cuando tenga tranquilidad lo probaré me gustó mucho ;)

besos ronroneados ^_^

Responder
Unknown  

Maravillosa, me gustan todas pero la Eva se lleva un 10!

Responder
Gem@  

Lo vi hace tiempo y me gustó por el efecto tan suave que tiene, encima pones en bandeja la forma de crearlo así que genial!!

Responder
JMiur  

Pau:
Pruebe, esta es bastante simple de usar. jQuery y yo no nos llevamos muy bien pero con esta, no tuve mayores problemas :D

Graciela:
Las imágenes son lindas ¿verdad?

Gem@
El efecto es genial. Muy elegante.

Responder
Karla Castañeda  

Me encanta este slideshow y las transiciones en forma de cortina, es una buena opción para poner un slideshow sin necesidad de usar servidor como slide, que no se si ya sepa pero recientemente fue adquirido por google, si que estan poderosos los de google, no descansan y siempre buscan expandir sus dominios, y ofrecer mas servicios como el de las llamadas telefonicas por medio de gmail...

Volviendo al tema de el slideshow que muestras: - :X ¿Qué hace Eva comiendose la Manzana? Que no se supone que es para Adan? :P

Muchisimas gracias Maestro :D

Responder
JMiur  

Me alegro que te gustara, Karla.

En cuanto a Eva, no sabría responder. Se me ocurre que, probablemente, ya le dió la manzana y ahora, quiere probar para ver si descubre el motivo de tanto jaleo.

Responder
carmenf  

Hola JMiur, excelente blog, gracias por compartir. Saludos desde Valencia-Venezuela

Responder
La Turca y sus viajes  

Hola!!!!
Te mencione en mi blog, porque Paula te menciono en el de ella y ahora estamos los tres blogs conectado y ha sido un placer para mi conocerte, se que aprenderé mucho de vos y tu espacio……te felicito tienes un blog con contenido.
Un abrazo de oso.

Responder
Joan Irazu  

de la mayoria de las galerias con transiciones esta es la mejor :P

Responder
JMiur  

Saludosm carmenf; gracias por el comentario.

Gracias, Común; esperemos que te sea útil :-)

Responder
Emerald  

Hola JMiur! Aún está vigente eso de que si tenemos Lightwindows, nones de JQuery, no????
Es un hermoso efecto para las imágenes!
Abrazo

Responder
JMiur  

Sigue vigente :D

Entodo caso, para este tipo de cosas, una alternativa simple es usar un blog auxiliar, colocar allí jQuery y luego, poner estas galerías u alguna otra cosa similar, utilizando un IFRAME. Es la forma en que lo hago en estas entradasa y funciona perfectamente.

Responder
Emerald  

:D oki, tendría que empezar por hacer un blog mínimo, como explicaste en anteriores post, poner todas las librerías de JQuery y usar los IFRAMES.
:o :S
cuando cruce esa montaña te aviso!! jeje manos a la obra!
Abrazo

Responder
JMiur  

Esa es la forma en que lo hago. Prueba, es bastate sencillo y podría llegar a ser una solución interesante para ciertas cosas.

Responder
Antonio Ruiz  

Hola JMiur.

He creado en un nuevo blog este slide. Funciona de maravilla, pero quisiera insertarlo como iframe en mi blog principal. Donde lo he insertado es un nuevo blog creado sólo con esa idea. El problema es que en mi blog principal no aparece la parte del slide que quiero (sólo el slide) más la parte izquierda del header. Hay manera de hacer visible en mi blog personal mediante un iframe sólo el slide sin el resto de elementos (header, sidebar...)?

Si no es posible, he pensado eliminar en la plantilla del nuevo blog todos los elementos del header (incluido título del blog y de la entrada) de tal forma que quede el slide justo arriba a la izquierda, de esa forma tal vez en mi blog personal pueda verse sólo el slide mediante el iframe. Es posible? Sabes qué tendría que eliminar?

Muchas gracias.

Responder
JMiur  

Sí, eso es posible. De hecho, en este post se usa ese concepto.

Hay una explicación en estas entradas: 1 | 2 | 3.

Responder
Antonio Ruiz  

Hola JMiur!

Estupendo, ya lo conseguí! He creado un nuevo blog con una de las miniplantillas de uno de tus archivos y mediante un iframe lo he insertado en mi blog principal. Me mandó Gema este enlace.

Mil gracias, aunque para mi sorpresa acabo de ver tu nuevo post de hoy, el slide. Es similar a este, y me gusta mucho también.

Lo que no me gusta del slide que he creado es la transición entre fotos, ese efecto cortina. ¿Hay manera de cambiar la transición de este slide (y no alguno de los otros dos posibles)? por ejemplo efecto disolver?

Gracias JMiur.

Saludos!

Responder
Emerald  

:D me salió!!!!! hhhhuuuuppyyyyyy :D :P

Responder
JMiur  

:D

Responder
Antonio Ruiz  

Hola Jmiur!

¿Y es posible ponerle un marco a este slide del tipo del slide del post de hoy, 13 de sept.?

Perdona la intromisión nuevamente. No olvides mi pregunta anterior sobre si es posible cambiar el tipo de transición, ¿vale?

Mil gracias Vagabundia por compartir tu sabiduría.

Saludos

Responder
JMiur  

Supongo que el diseño puede ser cambaido modiicando el CSS. Por ejemplo, bordes o marcos podrían ponerse en esta parte:
#ftcontenedor { }

Efectivamente, hay decenas de otros modelos y cada uno efectua transiciones diferentes. Este en particular realiza esta transición y no otra.

Responder
Antonio Ruiz  

Hola JMiur.

Muchas gracias nuevamente por la información.

Saludos.

Responder
Unknown  

hola soy nuevo en tu web este efecto de transiciones con jquery no lo he podido realizar y he seguido tus indicaciones lo unico diferente esque
no subi ningun archivo a un servidor si no que lo estoy probando local mente sera que por eso no funciona.
otra pregunta en la pagina donde estan los plugins ahi muchos cual version es la que debo de bajar o si me la puedes pasar la que usaste en este ejemploy para llamarla en donde se debe de poner arriba del header o terminando el header y antes del body se pone esto:
script$('#migaleria').jqFancyTransitions({width:436,height:202,direction:'random',delay:3000,effect:'wave'});script
bueno espero y me puedas ayudar y muy buena pagina recien la encontre aller en la noche y trai muchos themas interesantes.

Responder
JMiur  

Funcionará onnline u offline siempre que jQuery se cargue correctamente. En la página de descargas hay varias versiones así que lo razonable es siempre bajar la última, l más nueva. En ese caso, tambien hay dos modelos, una comprimida y otra sin comprimir. Cualquiera es lo mismo pero la que n oestá comprimida es más fácil de editar si es lo que uno quiere hacer.

Los scripts se colocan antes de &lt/head> primero JQuery y luego el plugin.

En la página, se colcoa el HTML y al final de ese que es el que contiene las imágenes, se coloca el script que llama a la función.

Responder
iGuey  

amigo, abra manera de que me expliques como lograrlo, intente mil veces y nada (utilizo wordpress)

Responder
JMiur  

No puedo explciarlo más allá de l oque está explciado aca. Si mostraras tu ejemplo, tal vez podría verse si hay un error.

Responder
Viviana Farfan  

Buenas Tardes

Tengo un problema con jfancy, funcionan perfectos los efectos, pero los links que coloco me loas abre en la misma ventna, a pesar de escribir en el href target="_blank". Agradeceria muchisisisimo su colaboracion.

Responder
JMiur  

Tendrías que ver el sitio del desarrollador del script para saber si es posible hacer eso o no.

Responder
Quién te lo dijo...  

Hola JMiur, muy buen efecto, lo acabo de poner en mi blog. Quería preguntarte ¿como puedo hacer para agregarle algún estilo, por ejemplo: un recuadro alrededor de las imágenes, cambiarle el tipo de letra, etc.?.

Gracias

Responder
JMiur  

Podrías usar el ID que le hayas colocado. Por ejemplo:

#migaleria img { border:2px solid red; }
#migaleria div { font-size:20px; }

Pero deberías ir verificando que esos espacios extras no interfirieran con el script.

Responder
Quién te lo dijo...  

JMiur, disculpa pero es que no se donde puedo poner lo que me indicas. en el HTML en el DIV me ha quedado así (le he puesto asteriscos para que me lo deje poner aquí):

<div id="migaleria">
<img src="https://sites.google.com/site/quientelodijoarch/mis- archivos/Cero.jpg" alt="Vestido de Fiesta"/>

<script> $('#migaleria').jqFancyTransitions({ width: 214, height: * 323,direction: 'fountainAlternate',delay: 5000, effect: 'wave', strips: 10 });
</script>

Gracias

Responder
JMiur  

En el CSS de la página o en la misma entrada donde tienes la galería,:

<style>
#migaleria img { border:2px solid red; }
#migaleria div { font-size:20px; }
</style>

Responder
Quién te lo dijo...  

Jmiur, por favor necesito de tu ayuda. Hasta ahora he colocado este efecto en un blog de pruebas, y el efecto se veía perfecto (solo quería ponerlo más lindo con los márgenes y el tipo de letra, por eso te consulté anteriormente). Ahora que lo he logrado, lo he puesto en mi blog definitivo, y aunque todo se bién, no realiza la transición. Si tuvieras tiempo, por favor podrías echarle un vistazo a mi Blog (quientelodijo.blogspot.com).

Gracias

Responder
JMiur  

No veo donde está tu ejemplo, recuerda que debes tener jQuery para que funcione.

Responder
Quién te lo dijo...  

JMiur: Ya lo tengo puesto para que lo puedas ver. Le puse como título Fancy Transiction -Vestidos- tengo otro slide más arriba (que pretendo borrar si funciona Fancy) para que no te confundas.

Y por supuesto que si tengo JQuery (quientelodijo.blogspot.com).


Gracias, y espero puedas ayudarme a solucionarlo.

Responder
JMiur  

Supongo que el sitio es:
http://blogquientelodijo.blogspot.com/
y no:
http://quientelodijo.blogspot.com
Y allí, lo veo en la sidebar y está funcioandno perfectamente.

Responder
Quién te lo dijo...  

JMiur, si efectivamente mi sitio es blogquientelodijo.blogspot.com. He borrado un script que tenía al principio y dejé solamente el Fancy (a la derecha -Vestidos de Fiesta-) pero no veo el efecto cortina, además el texto aparece desfasado respecto a la transición de la imagen. Tengo IE9, ¿será ese el problema?.

Disculpas si te molesto demasiado pero no doy solucionado esto.

Gracias

Responder
JMiur  

Puede ser que el navegador sea el problema. No sé cómo funciona IE9, no lo puedo usar y no sé si el script está pensado para ese navegador.

Responder
Quién te lo dijo...  

JMiur, pues desde que empece a escribirte tenía instalado el IE8, y recién hoy migré al IE9.

De todos modos gracias.

Responder
JMiur  

Si funcionaba en el 8 debería funcionar en el 9 pero ahi ya no puedo agregar más nada proque no he tenido la oportunidad de usarlo.

Responder
Quién te lo dijo...  

JMiur; Es que tampoco funionaba en el E8. Yo creo que el problema está en mi Blog, solo que mis conocimientos no alcanzan para identificar donde está.

Saludos, y muchas gracias

Responder
JMiur  

Puede ser que hubiera algún conflicto con otro plugin eso es bastante comun cuando se usa jQuery.

Responder
joseph  

:p gracias me funciono de maravilla.

Responder
Quién te lo dijo...  

JMiur, como puedo correr las imágenes un poco a la derecha para que me quede alineado?, puedes ayudarme.

Gracias

JMiur  

Habría que ver tu ejemplo concreto pero, en general debes centrar el div contenedor colocando su ancho y margin auto; por ejemplo:

#migaleria {
margin: 0 auto;
width:500px;
}

Responder
Quién te lo dijo...  

JMiur,

Está en mi blog http://blogquientelodijo.blogspot.com/ a la derecha debajo de Moda Premama, lo quisiera centrar un poco.

Gracias

JMiur  

Ahoa dice:
#migaleria {
.......
margin: 10px;
}

así que puedes cambair ese valor.

Centrarlo así: margin:10px auto;
o desplazarlo a la dercha con: margin: 10px 10px 10px 50px:
con el valor que quieras claro.

Responder
Quién te lo dijo...  

Muchas gracias JMiur, quedó como deseaba.

Saludos

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