Espero que este blog ayude a aquellos que están buscando conocimientos, al igual que yo.
Sígueme en:
Blogger Google+ facebook twitter you yube Ver perfil en Linkedin Agregar a Favoritos/Marcadores
pica pica curioso Mi Ping en TotalPing.com Buscar en el blog
Cerrar X Bienvenido amig@!!! Recuerda que puedes recibir las actualizaciones del blog a través de Facebook y/o Twitter, o Suscríbase al Feed vía RSS o vía Email.

Siempre, Siempre, Siempre, antes de modificar tu plantilla guarda una copia.

Descarga la plantilla o copias el código en el bloc de notas.

¿Que es RSS?:

RSS (Really Simple Syndication)

Es un sistema que nos permite enterarnos de las actualizaciones de las paginas que visitamos frecuentemente, sin tener que visitarlas directamente.

¿Cómo funciona?

Así cómo para poder leer correos electrónicos tenemos que tener una cuenta y un lector de correo electrónico, para poder leer nuestras paginas en RSS tenemos que tener un lector de RSS.
Existen muchos lectores de RSS pero uno de los mas sencillos de usar y mas utilizados por todos es el Google Reader, este lector se encarga de agrupar todos los sitios que visitamos frecuentemente mostrándonos la actualización que cada sitio tiene sin necesidad de ir a visitarlos.
Antes yo entraba a los sitios a mirar si habían publicado algo nuevo, ahora mediante los RSS cuando el sitio publica algo nuevo me llega su actualización.

Sencillo, rápido y útil.
votar
Achicar Entrada Agrandar Entrada


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á:

Leer Importante... Comentar esta entrada ▼ Ir al principio de la entrada
Anónimo dijo...

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

Vku dijo...

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.

Anónimo dijo...

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

Vku dijo...

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

Createcnic dijo...

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

Vku dijo...

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

Createcnic dijo...

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

Vku dijo...

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; }

Createcnic dijo...

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

Vku dijo...

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

Createcnic dijo...

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

Vku dijo...

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>

Vku dijo...

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

Createcnic dijo...

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

Createcnic dijo...

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

Vku dijo...

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

Createcnic dijo...

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

Createcnic dijo...

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

Createcnic dijo...

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

Vku dijo...

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

Vku dijo...

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

Createcnic dijo...

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

Vku dijo...

<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

Createcnic dijo...

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

Vku dijo...

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

LESCALAESPORT dijo...

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

Vku dijo...

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)

17130lescalaesport dijo...

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

LESCALAESPORT dijo...

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

Vku dijo...

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

Createcnic dijo...

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

Vku dijo...

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)

Mith86 dijo...

Hola VKU, mira, tengo un problema con un slideshow, el tema es que dejo de funcionar, y quiero quitarlo de mi plantilla, pero poner este que veo aca en su lugar, el problema que tengo, es que cada vez que lo intento, me tira error... y estuve un buen rato a prueba y error sin tener suerte..

Mith86 dijo...

No se podia, tenia propiedad "locked" creo la cosa es que le cambie esas propiedades y "aparecio" el gadget para poder ser editado, lo acabo de borrar. GRAX

Mith86 dijo...

http://darkcloudxs.blogspot.com/

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/><script src='http://img49.xooimage.com/views/5/5/b/jqfancytransitions.1.7.min-1b4e993.js/' type='text/javascript'/>
</head>

----

Y el codigo q ingrese al gadget es este que pongo a continuacion:

<div id='slideshowholder'><img src="http://lh3.ggpht.com/_FmRyxvXGUN0/TIytnmiIy7I/AAAAAAAAAlg/9oGShDnXpi0/titulo.jpg" alt="Skins CMR Dirt 2" /><a href ='http://darkcloudxs.blogspot.com/2010/09/dirt-2-skins-17_6325.html'></a><img src="http://lh4.ggpht.com/_FmRyxvXGUN0/TIytn_pUTkI/AAAAAAAAAlk/BqO6sJlb7JQ/Mass_Effect_2.jpg" alt="Descargalos!" /><a href ='http://darkcloudxs.blogspot.com/2010/08/descarga-los-dlc-directo-de-bioware_1835.html'></a><img src="http://lh4.ggpht.com/_FmRyxvXGUN0/TIyvyNTDdRI/AAAAAAAAAlo/FbdLBBkx4RM/IWNLOGOMITH.jpg" alt="Enterate Como.." /><a href ='http://darkcloudxs.blogspot.com/2010/09/juega-online-gratis-al-call-of-duty_4209.html'></a></div><script>$('#slideshowHolder').jqFancyTransitions({ 'navigation' : true, effect : 'wave', 'links' : true, width: 490, height: 280, });</script>

Me sale una imagen debajo de la otra. ves algun error???

Vku dijo...

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.

Vku dijo...

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'

Juan José dijo...

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

Vku dijo...

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

GoAngeles dijo...

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>

Vku dijo...

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/

GoAngeles dijo...

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?

GoAngeles dijo...

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.

Si no puedes comentar, intenta con el antiguo formularioO leer solución

VituaRadio
Informe Importante

Por un tiempo voy a estar sin internet, así que no voy a actualizar ni poder contestar a los comentarios.
Suscribirse a las entradas Suscribirse a las entradas vía Mail Suscribirse a los comentarios
¿Que es RSS?