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á:
0 comments:
Post a Comment