JqFancy - slideshow con efectos de transiciones - jquery



Poner estos 2 códigos arriba de </head>:

Código 1, Jquery: (si ya lo tienen, no es necesario repetirlo)
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"/>

Código 2:
<script src="http://workshop.rs/projects/jqfancytransitions/jqFancyTransitions.1.7.min.js" type="text/javascript"/>

Descargar archivo jqFancyTransitions.1.7.min.js y subirlo a su propio alojamiento.

En el lugar que quieran mostrar la galeria de imágenes poner el siguiente código, cambiando las imágenes, el link y el titulo de la imagen.

<div id='slideshowHolder'>
<img src='img1.jpg' alt='img1'/>
<a href ='http://link1'></a>
<img src='img2.jpg' alt='img2'/>
<a href ='http://link2'></a>
<img src='img3.jpg' alt='img3'/>
<a href ='http://link3'></a>

</div>

<script>

$('#slideshowHolder').jqFancyTransitions({ 'navigation' : true, effect : 'wave', 'links' : true, width: 400, height: 300, });

</script>
Donde slideshowHolder se cambia en los 2 lados si se quiere poner mas de 2 galerías.
Donde src='img1.jpg' va la imagen y  alt='img1', el titulo si se quiere poner.
Así para todas las imágenes.

Navigation: true o false. botones de navegación anterior y siguiente.
Effect: tenemos 3 distintos efectos para elegir: wave, zipper o curtain.
Links: true o false. Activa los link de las imágenes.
Width: ancho de la imagen.
Height: alto de la imagen.

 ver otros detalles acá:

47 comentarios:

  1. Hola,estoi intentando poner este slideshow para mostrar unas imagenes y no lo consigo,me podrias guiar o si quieres te mando las imagenes para que me pases los codigos y me explicas como voi subiendo mas imagenes cada vez que quiera poner una nueva. gracias

    ResponderEliminar
  2. Con gusto te ayudo, pero el tarbajo lo tienes que hacer tu.
    Pasame el blog donde estas intentando ponerlo y que error te da.
    Cuando me pases el blog tiene que estar colocado jquery y jqFancyTransitions.1.7.min.js entre la etiqueta head.

    ResponderEliminar
  3. muy buenas, lo que nos pasa es que cuando subimos el .js al servidor, no sabemos que direccion .js coger, nos sale un archivo a descargar, pero no una direccion. gracias

    ResponderEliminar
  4. EL ULTIMO PASO QUE ME DICES DONDE TENGO QUE PEGARLO...???
    GRACIAS

    ResponderEliminar
  5. Createcnic
    En el lugar que quieran mostrar la galería de imágenes
    En un nuevo gadget HTML/Javascript

    Anónimo
    No entiendo si no me das mas datos de donde estas alojando, si es en xooimagen tengo una entrada con un tutorial

    ResponderEliminar
  6. ESTE ES EL CODIGO KE E SUBIDO, DENTRO DE ESTE ARCHIVO TENGO KE CAMBIAR ALGO, O ESTÁ BIEN SUBIDO AL SERVIDOR?? SI ESTÁ BIEN SUBIDO MANDAME EL CODIGO 1 Y 2 RECTIFICADOS. GRACIAS


    http://img49.xooimage.com/files/5/5/b/jqfancytransitions.1.7.min-1b4e993.js

    ResponderEliminar
  7. el código 1 copialo tal cual esta, ya que es el de jquery
    el 2 cambia el link: http://workshop.rs/projects/jqfancytransitions/jqFancyTransitions.1.7.min.js
    por el tuyo: http://img49.xooimage.com/files/5/5/b/jqfancytransitions.1.7.min-1b4e993.js

    fijate si ya no tienes incorporado el de jquery en tu plantilla para no ponerlo 2 veces y que no este el de scriptaculous

    ResponderEliminar
  8. hola e metido los codigos que me dices cada uno en su lado pero no me sale como deve de salir solo veo las imagenes una debajo de otra pero el codigo ccs no me funciona o no se q hago mal lo dejo puesto y mirame la pagina haver que ves mal un saludo y muchisimas gracias

    ResponderEliminar
  9. perdon seme olvido la direccion

    http://createcnic.blogspot.com/

    ResponderEliminar
  10. El error se encuentra ya que al ponerlo en una entrada te genero los saltos de linea <br />
    El código tiene que ir en una sola linea sin ningún salto o sea sin <br />

    Si quieres ponerle fondo al titulo agrrega en CSS:
    .ft-title { padding: 10px 10px; width: 95%;}
    Cambiando 95% por el ancho de la imagen

    y para prev y next:
    .ft-prev, .ft-next { background-color: #000; padding: 0 10px; }

    ResponderEliminar
  11. El salto de linea no lo encuentro, me puedes mandar el css y el html para yo cambiarle las imagenes...?? o sino mandame una cosa parecida para hacer un muestrario de imagenes... GRACIAS

    ResponderEliminar
  12. lo de Css:
    .ft-title { padding: 10px 10px; width: 95%;}
    .ft-prev, .ft-next { background-color: #000; padding: 0 10px; }
    esas 2 lineas la pones arriba de ]]></b:skin>
    en Edición de HTML
    y para que no salga lo de <br />
    En lugar de poner el código en una nueva entrada lo haces en Diseño,Elementos de la página y añadis un nuevo gadget, ahi en la ventana que se te abre eliges HTML/Javascript
    adentro pones el código con las imagenes

    ResponderEliminar
  13. ya lo e montado como meas dicho me puedes visitar para ver por que no me sale igual las imagenes cuanto debe medir y por q no me sale pa darle a siguiente ni se cambian las imagenes ni nada solo las imagenes como las ves no se ya q hacer para q me salga como tu lo haces perdona por las molestias y gracias haver si lo puedo consegir con tu ayuda

    ResponderEliminar
  14. tenias que cambiar los datos de ancho y alto de las imágenes
    en este caso son de 142 x 142

    el código esta separado y tiene que ir todo junto

    cambia donde dice 95% por el ancho que es 142px

    y el otro código es así:

    <div id='slideshowHolder'><img src='http://img153.imageshack.us/img153/2681/camisetamujerpequea.jpg' alt='img1'/><a href ='http://link1'></a><img src='http://img263.imageshack.us/img263/5856/camisetahombrepequea.jpg' alt='img2'/><a href ='http://link2'></a><img src='http://img153.imageshack.us/img153/2681/camisetamujerpequea.jpg' alt='img3'/><a href ='http://link3'></a></div><script>$('#slideshowHolder').jqFancyTransitions({ 'navigation' : true, effect : 'wave', 'links' : true, width: 142, height: 142, });</script>

    ResponderEliminar
  15. si vas a cambiar de imagenes acordate de cambiar el tamaño en css 142 px y en el código 142 y 142 por el ancho y alto correspondiente a la imagen

    ResponderEliminar
  16. ya esta cambiado pero esto sige sin valer miralo pero no me sale cambiando todo lo q meas puesto no se por q si quiere te mando la plantillas y me lo restificas si puedes por que ya ves q hago los paso pero nada no sale como te sale a ti muchisimas gracias

    ResponderEliminar
  17. si ves q es muchas molestias haver si hay argo parecido a eso para hacer una presentacion como esa un saludo

    ResponderEliminar
  18. Hola la verdd que no le encuentro el error esta bien como esta puesto.
    A mi me sale bien en todas las pruebas que he echo.

    Si quieres algo simple para que cambie las imagenes

    http://img1.xooimage.com/files/a/5/f/shideshow-1b57aed.txt

    Ahí podes ver el codigo como va lo que esta entre body lo pones en un nuevo gadget

    Acordate de quitar lo anterior

    si quieres algo distinto me avisas y como es que lo quieres y busco a ver si lo se hacer

    ResponderEliminar
  19. eso me vale pero quiero poner tres juntos por ejemplo pa q la entrada sea esa na mas lo demas quiero ponerlo en los botones lo quiero hacer es poner una presentacion con imagen q vallan cambiando un saludo

    ResponderEliminar
  20. estoy utilisando en programa aleo 3d flash slideshow creator pero el codigo html q me da no me deja ver el visor en el blog haver si conoses ese programa q es fantastico para lo q quiero y me puedes alludar un saludo

    ResponderEliminar
  21. el programa ke te digo ke estoi utilizando(aleo 3d flash slideshow creator) me da un codigo al meter las imagenes ke kiero ke aparezca en mi blog, pero no se donde tengo ke pegarlo, o si tengo ke acer otro paso a seguir para ke funcione.Podrias ayudarme porfavor...??
    gracias

    ResponderEliminar
  22. Pasame el código por correo anfelweb@gmail.com
    Y no entiendo que es lo que no te deja ver eso del visor a parte donde lo pusistes

    ResponderEliminar
  23. Fijate si tiene estos 2 códigos:

    dentro de object
    <param name="wmode" value="transparent" />
    y dentro de embed
    wmode="transparent"

    Generalmente esos tipos de programas no lo utilizan

    y hay que subir todo los archivos generados cambiando la url en todo sobre todo en el código dentro del html y si genera que generalmente si el xml
    o sea primero subir las fotos
    modificar el xml
    subir el xml
    modificar el código del html que es el que se pone en el gadget

    estoy comentando sin saber bien que te genero el programa
    pero conozco bien esos tipos de programas como es que trabajan

    ResponderEliminar
  24. hola ya te mande el codigo no se si te habra llegado al correo por que a mi no me sale en enviado lo mande de un correo de mi amigo haver si te llego un saludo

    ResponderEliminar
  25. <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="600" height="200">
    <param name="movie" value="slide.swf" />
    <param name="quality" value="high" />
    <param name="allowFullScreen" value="false" />
    <param name="wmode" value="transparent" />
    <embed src="slide.swf"
    wmode="transparent"
    quality="high"
    type="application/x-shockwave-flash"
    width="600"
    height="200"
    allowFullScreen="false"
    pluginspage="http://www.macromedia.com/go/getflashplayer" />
    </object>

    Este es el código que pones en el gadget
    Subis el archivo slide.swf a xooimagen y lo agregas al código ojo esta en 2 lugares.

    ¿No te genero nada mas? alguna carpeta, un archivo xml.

    Mandame toda la carpeta comprimida si podes
    Y las imagenes tienen que ser del mismo tamaño, la de tarjeta de presentación es mas grande.
    lo raror que de ancho te ponga 600 y las imágenes son de 198

    ResponderEliminar
  26. hola amigo muchas gracias ya nos vale con la ensenñansa q nos a dado muchas gracias hay pocos como tu pa tener tanta pasiencia con jente como nosotros de torpe jejeej muchas gracias lo q no entiendo es lo de la imagen ancho 600 y alto cuanto se le pone ya q en 600 se ven muy mal un saludo y muchisimas gracias

    ResponderEliminar
  27. Ya no puedo entrar a tu blog para ver, no me permite

    Si la imagen es de 198 se va a ver mal a 600

    ResponderEliminar
  28. Hola Vku,

    Estoy montando un blog y quiero utilizar este slideshow para mostrar fotografias he instalado y me funciona bien con todos los navegadores excepto el explorer, mi version es la 8, he visto en la página original del slide que esta testado con el 6, podria ser este el problema, la versión del explorer? con chrome, safari i firefox ningun problema, te dejo la dirección del blog http://lescalaesport2.blogspot.com/.
    Gracias.
    Rafel

    ResponderEliminar
  29. LESCALAESPORT:
    Yo lo veo bien en Internet Explorer 8,tanto en el ejemplo como en tu blog.

    Lo unico que veo mal es la imagen del li en "Noticies de l'Escala", tanto en IE como en firefox, en "Blocs dels programes" y "Programes2 se ve bien (la estrella amarilla)

    ResponderEliminar
  30. Hola Vku,
    Gracias por contestar tan rápido, he probado en otros ordenadores utilizando el explorer con Vista y XP y no funciona, pero mirando el ejemplo de la pagina de workshop funciona correctamente, incluso he cambiado los archivos jquery y jqFancyTransitions copiando el código de su página y sigue sin funcionar, ¿el problema podria estar en que he puesto el codigo directamente en el HTML de la plantilla y no en un gadget? es cierto, las estrellas se ven mal y me parece que voy a quitarlas.

    Muchas Gracias,
    Rafel

    ResponderEliminar
  31. Hola Vku,

    He encontrado la solución , he estado mirando en la página de workshop en la zona de comentarios y el problema estaba en la ultima coma que hay despues de poner las medidas del slideshow, hay que quitarla y funciona correctamente.

    Nuevamente gracias

    Rafel

    ResponderEliminar
  32. Me alegro que ya este solucionado.
    lo raro es que yo lo vi bien en tu blog

    ResponderEliminar
  33. Hola VKU me pongo en contacto contigo porque realizé un efecto zoom para mis imagenes en mi blog, y al principio me iba perfectamente, pero ahora de repente nose que le pasó y no me funciona, los pasos a seguir estan en este enlace, porfavor necesito tu ayuda, GRACIAS.

    http://www.pazosblogger.com/search/label/HTML%2Fcss

    ResponderEliminar
  34. si kieres mirar mi plantilla aber ke puedes acerle, dimelo, <GRACIAS

    ResponderEliminar
  35. si kieres ver mi plantilla para ver cual es el fallo, dimelo, GRACIAS

    ResponderEliminar
  36. Createcnic

    El problema esta en el script.
    Cambiarlo por el mío y se soluciona:

    http://loseasi.blogspot.com/2009/08/expandir-imagen.html

    Yo con gusto te ayudo pero me parece mas correcto que la solución la aporte el dueño que publico la entrada. Entiendes lo que quiero decir. :23)

    ResponderEliminar
  37. muchas gracias....y te entiendo perfectamente!!! gracias

    ResponderEliminar
  38. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  39. Si no te funciona bien, puede ser varias cosas, tal ves no quitastes el total del código del otro script. O en tu plantilla hay algo con el css tipo clear: que cause el mal funcionamiento en la imagen.

    ResponderEliminar
  40. En tu caso vi 2 errores.

    1: el archivo js lo subistes mal. Te falto abrir ese link para obtener el link del script.

    Pon este.
    http://img49.xooimage.com/files/5/5/b/jqfancytransitions.1.7.min-1b4e993.js

    2: el id va con mayuscula la h.
    id='slideshowholder' y es así: d='slideshowHolder'

    ResponderEliminar
  41. hola quisiera saber si puedo hacer lo siguiente:
    en el menu de navegacion cambiar el "next" por alguna imagen.
    xq en el css que hice le pongo ft-next{background-image:url(lafoto.jpg)};
    pero la pone detras del texto y yo quiero sacar el texto o que aparezca atras de la img (de ultima xD)

    desde ya muchas gracias
    PD: ta muy bueno el blog sigue asi...
    un abrazo desde Misiones

    ResponderEliminar
  42. modifica el script
    <a href='#' id='ft-prev-"+el.id+"' class='ft-prev'>prev</a>

    por

    <a href='#' id='ft-prev-"+el.id+"' class='ft-prev'> </a>

    algo asi

    ResponderEliminar
  43. Hola! Qué tal? Muy bueno el blog. Estaba buscando este truco hace bastante y no lo encontraba por ningun lado.
    Seguí todos los pasos pero no se porque no me funciona. En el blog se me aparecen las 3 imágenes una abajo de la otra y ni siquiera con los links que yo si le habilité. Mi blog es www.goangeles.com.ar
    Igual no lo vas a ver ahí porque por un tema de que quedaba horrible lo saqué pero me gustaría que me puedas ayudar a ver que estoy haciendo mal:
    Acá te dejo mi codigo que edite y que está codificado. Desde ya, gracias. Saludos!


    <div id='slideshowHolder'>
    <img src=' http://uploadimage.com.ar/images/00859300446625956608.jpg ' alt='Pablo'/>
    <a href ='http://www.goangeles.com.ar/2010/12/pablo-estar-al-frente-de-una-tira-es.html'></a>
    <img src=' http://uploadimage.com.ar/images/58281420786370575986.jpg ' alt='Lali'/>
    <a href ='http://www.goangeles.com.ar/2010/12/lalime-muestro-como-soy-no-actuo-nada.html'></a>
    <img src=' http://uploadimage.com.ar/images/76986613281510153264.jpg ' alt='Nico'/>
    <a href ='http://www.goangeles.com.ar/2011/01/nico-la-teve-me-gusta-pero-quiero.html'></a>

    </div>

    <script>

    $('#slideshowHolder').jqFancyTransitions({ 'navigation' : true, effect : 'wave', 'links' : true, width: 600,height: 277, });

    </script>

    ResponderEliminar
  44. GoAngeles
    Es segun donde lo pongas. Si lo haces en un gadget html hay que cambiar ' por "

    Así:

    <center><div id="slideshowHolder">
    <img src=" http://uploadimage.com.ar/images/00859300446625956608.jpg " alt="Pablo"/>
    <a href ="http://www.goangeles.com.ar/2010/12/pablo-estar-al-frente-de-una-tira-es.html"></a>
    <img src=" http://uploadimage.com.ar/images/58281420786370575986.jpg " alt="Lali"/>
    <a href ="http://www.goangeles.com.ar/2010/12/lalime-muestro-como-soy-no-actuo-nada.html"></a>
    <img src=" http://uploadimage.com.ar/images/76986613281510153264.jpg " alt="Nico"/>
    <a href ="http://www.goangeles.com.ar/2011/01/nico-la-teve-me-gusta-pero-quiero.html"></a>
    </div>
    <script>
    $("#slideshowHolder").jqFancyTransitions({ "navigation" : true, effect : "wave", "links" : true, width: 600,height: 277, });
    </script></center>


    Fijate: http://vku-jquery.blogspot.com/

    ResponderEliminar
  45. Buenísimo, muchísimas gracias. Una ultima cosita con la que te jodo. Trato de agregarle más imágenes que 3 pero no me deja. No se puede ponerle más de 3 o hay que cambiarle algo al código?

    ResponderEliminar
  46. Ya está, error mío :P
    Muchas gracias, en serio. Me serviste un montón. El blog excelente

    ResponderEliminar

Si tienes alguna opinión respecto a la entrada, tienes un punto de vista distinto, o simplemente quieres saludar, te invito a que dejes un comentario. NO SE ACEPTAN LINKS DE REFERIDOS para que los comentarios no se conviertan simplemente en una forma de publicitarse.

Nota: solo los miembros de este blog pueden publicar comentarios.