English
资源说明：Provides such effect as fade, blur, jalousie, scroll, ladder, zoom and others. Shims CSS3 effects on legacy browsers
# tEffects jQuery plugin
The project site: https://github.com/dsheiko/Transition-Effects-JS-Library
The demo site: http://demo.dsheiko.com/blogslideshow/
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 willbe 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.
### How to use
#### Step 1
Including plugin scripts after jQuery (requires jQuery 1.4+):
#### Step 2
To have slideshow running it is enough just to provide a placeholder within DOM with images to slide inside:
Though if you want to keep images elsewhere, they can be passed into the plugin through images option.
#### Step 3
Now here how the plugin can be initialized and enabled.
#### Step 4 (optional)
The slide-show is running and can be navigated by arrows-keys, but you want to subscribe you own navigation controls. Well, you can do it like that:
$('#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
[](http://githalytics.com/dsheiko/Transition-Effects-JS-Library)
本源码包内暂不包含可直接显示的源代码文件，请下载源码包。
