Fluid Fader Demo

"D" for download

Download and fork Fluid Fader on GitHub.

The jQuery

The jQuery for the fader on the current page is as so.

$('#fluid-fader').fluidfader();

This is equivalent to:

$('#fluid-fader').fluidfader('init');

The mark-up

For a fader with three frames you would use the following mark-up.

<div class="fluid-fader" id="fluid-fader">

    <div class="fluid-fader-frames" id="fluid-fader-frames">

        <div>Content or images here</div>
        <div></div>
        <div></div>

    </div>

    <div class="fluid-fader-links" id="fluid-fader-links">

        <a href="#fluid-fader"></a>
        <a href="#fluid-fader"></a>
        <a href="#fluid-fader"></a>

    </div>

    <a id="fluid-fader-direction-left" class="fluid-fader-direction-left fluid-fader-direction" href="#fluid-fader">&lt;</a>
    <a id="fluid-fader-direction-right" class="fluid-fader-direction-right fluid-fader-direction" href="#fluid-fader">&gt;</a>

</div>

The id's must all be kept the same, apart from top level parent div, which is passed to the function in the jQuery. The classes are only necessary if you wish to use classes to style the fader.

The CSS

For fluid images:

img.fluid
{
    width: 100%;
}

For the fader itself:

.fluid-fader
{
    position: relative;
    width: 100%;
    padding-bottom: 48.33%; /* HEIGHT/WIDTH * 100% OR (290 pixels / 600 pixels) * 100% = 48.33% */
    display: none;
}

.fluid-fader-frames
{
    width: 100%;
    position: relative;
}

.fluid-fader-frames div
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #DEDEDE;
}

.fluid-fader-links
{
    position: absolute;
    bottom: 12px;
    left: 12px;
    z-index: 2003; /* HIGER THAN FRAMES */
    display: none;
}

.fluid-fader-links a
{
    background-color: #666;
    display: block;
    float: left;
    font-size: 1px;
    height: 6px;
    margin-right: 6px;
    width: 6px;
    border: 1px solid #fff;
}

.fluid-fader-links a:hover
{
    background-color: #2200C1;
}

.fluid-fader-links a.current
{
    background-color: #EB7E21;
}

.fluid-fader .fluid-fader-direction-left
{
    position: absolute;
    top: 60%;
    left: -40px;
    background-color: #666;
    color: #fff;
    width: 40px;
    height: 40px;
    line-height: 40px;
    display: block;
    text-decoration: none;
    text-align: center;
    z-index: 2004;
}

.fluid-fader .fluid-fader-direction-right
{
    position: absolute;
    top: 60%;
    right: -40px;
    background-color: #666;
    color: #fff;
    width: 40px;
    height: 40px;
    line-height: 40px;
    display: block;
    text-decoration: none;
    text-align: center;
    z-index: 2004;
}

You may need to change the z-index values in your layout.

Extra parameters

interval

The time period in milliseconds between each animation. Must be a valid integer larger than one.

speed

The time between the start and finish of the animation. A larger speed value means a longer animation. Must be a valid integer, but can be set to zero for show/hide animations.

animation_type

The type of animation the fader will use, listed below.

fade

The default fading animation. This works best for images, but less well for frames including text, such as the fifth slide in the demo above.

flash

Hides the current frame before fading in the next frame, creating a "flash" as the next frame fades in. Better for frames including a lot of text.

Parameters should be passed as the second parameter of fluidfader as an object. An example of the jQuery with extra parameters:

$('#fluid-fader').fluidfader('init', {
    interval : 3000,
    speed : 500
});

Creating your own animations

To create your own animations, you must create a new values in the "methods" object in the fluidfader source named "animation_type_test", where "test" would be the value passed in the parameters.

For example, to create the animation "test" (which is incidentally exactly the same as the default fading animation) we would add the following to the "methods" object.

animation_type_test : function(options) {

    // FADE IN NEW IMAGE
    $('#fluid-fader-frames div:nth-child(' + options.next_frame + ')').fadeIn(speed, function(){

        // FADE OUT CURRENT FRAME
        $('#fluid-fader-frames div:nth-child(' + options.current_frame + ')').fadeOut(speed/2, function(){

            $(this).fluidfader('next_animation', options);
        });

    });

}

And we would call the fader with jQuery as follows.

$('#fluid-fader').fluidfader('init', { animation_type : 'test' });

Browser compatibility

The following compatibility table applies to the in-built animations and settings only.

IE6+

Works well in IE but be careful with z-index

Chrome, Safari, webkit

Tested in up to date versions with no problems

Firefox, gecko

Tested in up to date versions with no problems

Mobile

Tested and working on default (webkit) Android browser and iPhone

Tablet

Tested on Android tablet and iPad with no problems

To do

All or none of these things may get done at some point.

• Use JavaScript to apply the CSS to make deployment easier
• Add sliding type animations
• Integrate with jQuery easing plugin