domingo, 2 de septiembre de 2012

JavaScript Slideshow Code + CSS3 Transitions

JavaScript Slideshow Code + CSS3 Transitions:
JavaScript Slideshow Code
TinyFader2 is a 2KB JavaScript slider code that is completely configurable through robust options. It is an upgrade to the previous TinyFader version adding a number of requested features and making additional improvements. It gracefully degrades without JavaScript support and is totally customizable using CSS.
Here are the current features:
  • CSS3 hardware transition support for Firefox and Webkit browsers
  • Automatic or manual slide rotation
  • Option to resume play after interruption
  • Toggle to pause auto play on slide hover
  • Set the initial slide index with a parameter
  • Pass a navigation ID of a list and have the script bind either click or hover events for navigating the slideshow
  • Ability to move to previous or next slide
  • Functions to play and pause the automatic slideshow
  • Parameter to set the transition duration
Other improvements include setting the opacity to 0 on slides besides the current one, cycling the z-index, improving code readability, upgrading the codebase to HTML5, and a handful of other tweaks.
To initialize the script use the following:
var ss = new TINY.fader.init("ss", {
 id: "slides", // ID of the slideshow list container
 position: 0, // index where the slideshow should start
 auto: 0, // automatic advance in seconds, set to 0 to disable auto advance
 resume: true, // boolean if the slideshow should resume after interruption
 navid: "pagination", // ID of the slide nav list
 activeClass: "current", // active class for the nav relating to current slide
 pauseHover: true, // boolean if the slideshow should pause on slide hover
 navEvent: "click", // click or mouseover nav event toggle
 duration: .25 // duration of the JavaScript transition in seconds, else the CSS controls the duration, set to 0 to disable fading
});
The first parameter is the variable name used for the object instance. This script has been tested in all major browsers and is available free of charge for both personal or commercial projects under the GNU GPL v3.0 license.

Click here for the demo.



Click to download
Downloaded 3 Times

No hay comentarios:

Publicar un comentario