article:
Plugin: BlogSlideShow
article:
Plugin: Image Placeholders

Plugin: Transition Effects

Advertisement

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.

Plugin: Transition Effects


Usage

Step 1

<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

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


Step 3

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


Step 4 - optional

$('#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')




source
download

Advertisement
Tags: transition, effects, js, jquery, css, design, web, html, develop

Leave a Comment

No Comment

© Creative3x Ltd.