Delicious LinkedIn Facebook Twitter RSS Feed

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

0 comments:

Post a Comment