tEffects jQuery plugin - CSS3 transformation effects library and shim for legacy browsers

Introduction

The plugin allows you to convert simple markup into a slide-show with the set of fancy configurable transition effects. The plugin tries to render the effects with CSS3 transitions. However if the browser does not support CSS3 the efects will be achieved by JS.

Every available effect is encopsulated into a single module. So you do not have to violate YAGNI principle. Just remove redundant effect modules and leave the only code responding to your requirements.

Usage and API

Step 1

Include plugin scripts after jQuery (requires jQuery 1.4+):

<link href="./assets/t-effects.css" rel="stylesheet" media="all" />
<script src="./js/jquery.a-queue.js" type="text/javascript"></script>
<script src="./js/jquery.t-effects.js" type="text/javascript"></script>

Step 2

Provide a placeholder within DOM with images to slide inside:

<div id="slideshow">
    <img src="./slides/sample1.jpg" />
    <img src="./slides/sample2.jpg" />
    <img src="./slides/sample3.jpg" />
</div>

If you want to keep images elsewhere, you can pass them into the plugin through the option images.

Step 3

Here how the plugin being initialized and enabled.

<script type="text/javascript">
    $(document).ready(function(){
        $('#slideshow').tEffects({
        effect: 'FadeInOut'
        }).enable();
    });
</script>

Step 4 (optional)

The slide-show is running now and can be navigated by arrows-keys, but you surelly wish to assign your own controls. Well, you can do it this way:

$('#slideshow').tEffects({
effect: 'FadeInOut',
triggerNext: {
    node: $('button.next'),
    event: 'click'
},
triggerPrev: {
    node: $('button.prev'),
    event: 'click'
}
}).enable();

Available Options

effect: transition effect: Default, FadeInOut, Jalousie, Ladder, Scroll, Deck, Jaw, DiagonalCells, RandomCells
direction: transition direction: vertical or horizontal
transitionDuration: duration of transition in seconds
transitionDelay: delay between iterations in milliseconds
rows: number of images slices for vertical direction
cols: number of images slices for horizontal direction
dimension: number of columns and rows on a grid
initalIndex: forces the image of given index be current
triggerNext: the trigger for Next-image event: { node: node, event: 'click' }
triggerPrev: the trigger for Previous-image event: { node: node, event: 'click' }
controls: images direct controls: { template: 'button html', appendTo: toolbar node }
images: array with images when they passed manually. E.g. images: $('div.storage > img')

Events

start-transition.t-effect: fired staight before transition applied. Handler gets current image index as an argument.
end-transition.t-effect: fired staight after transition applied. Handler gets current image index as an argument.

Methods

enable: enables arrow-keys and given controls.
disable: disables arrow-keys and given controls. E.g. you have the slide show on an overlay. When overlay is hidden, you use disable method to unsubscribe controls. When the overlay is visible again, use disable method.
reset: you can reset options on a running tEffetcs instance