Blockfader jQuery plugin

The blockfader jQuery plugin allows you to create a slideshow of images / thumbnails that fade in and out with a "block" effect. A real world example of this plugin in action can be found on the home page.

Download

Version 0.2, released February 8th, 2011

Blockfader v0.2 (minified) (3KB)
Blockfader v0.2 (10KB)

Prerequisites

Include jQuery and the blockfader plugin:

<-- Load jQuery -->
    <script
        type="text/javascript"
        src="/your/script/path/jquery-1.5.min.js"></script>
<-- Load blockfader plugin -->
    <script
        type="text/javascript"
        src="/your/script/path/jquery.blockfader.min.js"></script>

A basic example

Create a javascript file or script tag (after the two mentioned above), and initialize the blockfader on your element when the document is ready:

$(document).ready(function(){
//  Initialize the blockfader
    $('#yourelement').blockfade([
        { image:    'image1.jpg' },
        { image:    'image2.jpg' },
        { image:    'image3.jpg' },
        { image:    'image4.jpg' }
    ]);
});

That's it! You're done!

More advanced examples

Showing a loading indicator

When the blockfader is preloading your images, it will apply the class blockfader-loading to your parent element. To show a loading indicator, all you need to do is define this class in your css file:

.blockfader-loading {
    background-image: url(/images/loading.gif);
    background-position: center center;
    background-repeat: no-repeat;
    height: 200px;
}

Configuration

You can configure the following options when initializing the blockfader jQuery plugin:

image (REQUIRED)
The URL of the image to load.
href
If set, the URL to link to when the image is clicked.
blocks_x
The number of horizontal blocks the image is divided in.
blocks_y
The number of vertical blocks the image is divided in.
delay
The amount of time the image is to be shown, in milliseconds.
transition_in
The fade-in transition method (currently only "random" is available).
transition_out
The fade-out transition method (currently only "random" is available).

Example

An example showing all of the above configuration options:

$(document).ready(function(){
//  Initialize the blockfader
    $('#yourelement').blockfade([
        {
            image:          '/images/google_logo.jpg',
            href:           'http://www.google.com/',
            blocks_x:       8,
            blocks_y:       2,
            delay:          2000,
            transition_in:  'random',
            transition_out: 'random'
        },
        {
            image:          '/images/contactus.jpg',
            href:           '/contact',
            blocks_x:       8,
            blocks_y:       6,
            delay:          6000,
            transition_in:  'random',
            transition_out: 'random'
        }
    ]);
});