- Plantillas Web
- Plantillas E-commerce
- Plantillas de CMS y Blog
- Plantillas Facebook
- Constructor Web
FAQs
General Tutorials
MonsterONE Subscrioption
Slider “jqFancyTransitions”
marzo 17, 2011
Una barra de desplazamiento/Slider con una variedad de efectos de transición únicos. Para obtener las especificaciones completas visite el sitio web oficial: http://workshop.rs/2009/12/image-gallery-with-fancy-transitions-effects
JavaScript
Debemos incluir framework jQuery y jqFancyTransiotions.1.8.js señalando el atributo src de la etiqueta de script a esos ficheros .js.<script type="text/javascript" src="js/jquery-1.4.2.min.js" ></script> <script type="text/javascript" src="js/jqFancyTransiotions.1.8.js"></script>Colocamos el script de inicialización en la sección <head>. Es probable que necesite ajustar el ancho y la altura de la galería. Se puede hacer esto con ayuda del siguiente código:
$('#slideshowHolder').jqFancyTransitions({ width: 400, height: 300 });
También se puede definir algunos parámetros adicionales:
effect: '', // wave, zipper, curtain width: 500, // width of panel height: 332, // height of panel strips: 20, // number of strips delay: 5000, // delay between images in ms stripDelay: 50, // delay between strips in ms titleOpacity: 0.7, // opacity of title titleSpeed: 1000, // speed of title appearance in ms position: 'alternate', // top, bottom, alternate, curtain direction: 'fountainAlternate', // left, right, alternate, random, fountain, fountainAlternate navigation: false, // prev and next navigation buttons links: false // show images as links
HTML
Aquí se puede revisar la representación general de script HTML:Si Usted desea asignar enlaces a la imagen, el código será:<img src='img1.jpg' alt='img1' /> <img src='img2.jpg' alt='img2' /> <img src='img3.jpg' alt='img3' />
CSS
#slideshowHolder {
width:px;
height:px;
overflow:hidden;
}
