Navigation Menu

Skip to content

Commit

Permalink
README and jQuery package info files added
Browse files Browse the repository at this point in the history
  • Loading branch information
dsheiko committed Apr 2, 2012
1 parent c5055b3 commit 75c2d99
Show file tree
Hide file tree
Showing 3 changed files with 81 additions and 0 deletions.
Empty file removed README
Empty file.
58 changes: 58 additions & 0 deletions README.md
@@ -0,0 +1,58 @@
# 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+):

<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

To have slideshow running it is enough just to 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>

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.

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

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();

23 changes: 23 additions & 0 deletions package.json
@@ -0,0 +1,23 @@
{
"name": "t-effects",
"title": "Simple HTML5 Form Shim",
"version": "1.0",
"author": "Dmitry Sheiko",
"description": "CSS3 transformation effects library with a shim for legacy browsers",
"homepage": "https://github.com/dsheiko/Transition-Effects-JS-Library",
"licenses": [
{
"type": "GPLv2",
"url": "http://www.example.com/licenses/gpl.html"
}],
"repository": {
"type": "git",
"url": "https://github.com/dsheiko/Transition-Effects-JS-Library"
},
"main": "./js/jquery.t-effects.js",
"dependencies": {
'jquery.a-queue.js': 'Asynchronous queue'
},
"engines": {
}
}

0 comments on commit 75c2d99

Please sign in to comment.