Crear slider de imaxes con varios efectos

Crear slider de imágenes con varios efectos

Grazas ao framework jQuery que nos permite interactuar co código HTML de forma moito máis sinxela, crear efectos para a web converteuse en algo relativamente sinxelo e apareceron magnificos scripts como jqFancyTransitions.

jqFancyTransition é un Slideshow que utiliza jQuery para crear un slider(deslizador) de imaxes con diferentes efectos cortina moi vistosos nas transicións de imaxes, podes ver a seguinte demo para facerche unha idea.

Utilizar este slider é realmente sinxelo, tes que realizar os seguintes pasos:

O primeiro será crear un div onde interiormente introducirás o código das imaxes do seguinte xeito:

<div id=’Slider’>
<img src=’imagen1.jpg’ alt=imagen1′ />
<img src=’imagen2.jpg’ alt=’imagen2′ />
<img src=’imagen3.jpg’ alt=imagen3′ />
</div>

Engadirás á cabeceira da túa páxina web os scripts jQuery e jqFancyTransitionsque terás que descargar e despois agregar do seguinte xeito:

<script src=»js/jquery.js» type=»text/javascript»></script>
<script src=»js/jqFancyTransitions.js» type=»text/javascript»></script>

Finalmente farás unha chamada a a función jqFancyTransition:

<script>

$(‘#Slider’).jqFancyTransitions({ variables });

</script>

As variables que terás que modificar para xerar o efecto desexado son as seguintes:

effect: », // efectos : wave, zipper, curtain
width: 500,
height: 332,
strips: 20, // número de tiras
delay: 5000, // retardo entre las imágenes en ms
stripDelay: 50, // retardo entre tiras en ms
titleOpacity: 0.7, // opacidad del título
titleSpeed: 1000, // velocidad de aparicion del título en ms
position: ‘alternate’, // top, bottom, alternate, curtain
direction: ‘fountainAlternate’, // left, right, alternate, random, fountain, fountainAlternate
navigation: false // botones de siguiente y anterior (true y false)
links: false // mostrar imágenes como enlaces

Esquéceche do flash cando teñas que facer un slider de imaxes, con este script conseguirás un efecto similar que poderá ver todo o mundo e ademais que pesará moito menos.

Relacionadas:

• Slider jQuery, 10 exemplos diferentes
• Crear efectos e animacións en Flash online
• ManSlide: Presentacións con efectos 3D
• Pon marcos e efectos ás túas fotos con CSS
• IxEdit – Efectos jQuery sen necesidade de saber programar.
• Crear un PDF con formulario.
• Script para crear un hosting de imaxes