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'>Donde slideshowHolder se cambia en los 2 lados si se quiere poner mas de 2 galerías.
<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 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á:
Leer Importante...
Enlaza el blog ...
Ultimos comentarios
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
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.
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
EL ULTIMO PASO QUE ME DICES DONDE TENGO QUE PEGARLO...???
GRACIAS
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
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
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
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
perdon seme olvido la direccion
http://createcnic.blogspot.com/
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; }
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
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
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
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>
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
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
si ves q es muchas molestias haver si hay argo parecido a eso para hacer una presentacion como esa un saludo
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
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
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
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
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
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
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
<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
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
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
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
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)
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
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
Me alegro que ya este solucionado.
lo raro es que yo lo vi bien en tu blog
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
si kieres mirar mi plantilla aber ke puedes acerle, dimelo, <GRACIAS
si kieres ver mi plantilla para ver cual es el fallo, dimelo, GRACIAS
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)
muchas gracias....y te entiendo perfectamente!!! gracias
Intenta eliminar el gadget
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.
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'
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
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
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>
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/
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?
Ya está, error mío :P
Muchas gracias, en serio. Me serviste un montón. El blog excelente
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.
Elegir un botón o imagen, Seleccionar, copiar (Ctrl+C) y pegar en formulario de comentarios.
Nota: solo los miembros de este blog pueden publicar comentarios.