christophercaburog/blindify

A jQuery plugin which creates a slideshow featuring a blinds effect transitioning

Blindify

Blindify is a jQuery plugin which creates a slideshow featuring a blinds effect transitioning (either vertical or horizontal) between a list of images. Have a look at the demo.

Requirements

jQuery 1.4+

Browser support

Tested in the following browsers:

• Google Chrome 29+
• Mozilla Firefox 21+
• Opera 12+
• Microsoft Internet Explorer 9+
• Safari 5+

Usage

First of all, you have to include Blindify's CSS file (or just copy and paste the code to one of your own), include a version of the jQuery library, and anywhere after jQuery, either the full or the minified version of Blindify. For example:

<link rel="stylesheet" href="blindify.css" media="all" />
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="jquery.blindify.js"></script>

Afterwards, you'll need a list of images, wrapped in a container element with a unique id. For example:

<div id="blindify">
    <ul>
        <li><img src="photo_1.jpg" alt="" /></li>
        <li><img src="photo_2.jpg" alt="" /></li>
        <li><img src="photo_3.jpg" alt="" /></li>
        <li><img src="photo_4.jpg" alt="" /></li>
    </ul>
</div>

You can make the whole slideshow be a link to a specific page, by using an anchor element as the container, e.g.:

<a href="#" id="blindify">
    <ul>
        <li><img src="photo_1.jpg" alt="" /></li>
        <li><img src="photo_2.jpg" alt="" /></li>
        <li><img src="photo_3.jpg" alt="" /></li>
        <li><img src="photo_4.jpg" alt="" /></li>
    </ul>
</a>

If you wish every image to point to a unique URL, you just have to specify an option while initialising the plugin, and format your code as follows:

<div id="blindify">
    <ul>
        <li><a href="#"><img src="photo_1.jpg" alt="" /></a></li>
        <li><a href="#"><img src="photo_2.jpg" alt="" /></a></li>
        <li><a href="#"><img src="photo_3.jpg" alt="" /></a></li>
        <li><a href="#"><img src="photo_4.jpg" alt="" /></a></li>
    </ul>
</div>

Finally, to apply Blindify to your HTML code, you'll just need to initialise it and attach it to the element acting as the container, e.g.:

<script type="text/javascript">
    $(document).ready(function(){
        $('#blindify').blindify();
    });
</script>

You can override the default options of the plugin, like that:

<script type="text/javascript">
    $(document).ready(function(){
        $('#blindify').blindify({
            numberOfBlinds: 10,
            animationSpeed: 600,
            delayBetweenSlides: 200
        });
    });
</script>

You can find a list of the available options in the next section.

Configuration Options

numberOfBlinds (integer) — default: 20
The total number of blinds.

slideVisibleTime (integer) — default: 2000
Controls the time that a slide will be visible (excluding the animation time), in milliseconds (ms).

color (string) — default: '#000000'
The HEX code of the colour of the blinds.

margin (integer) — default: 2
Controls the distance between the blinds, in pixels. Note that it's the border size of each individual blind, therefore if you choose 1, the total distance is going to be 2 (one for each blind), etc.

width (integer) — default: 960
The width of the container (should be the same as the images), in pixels.

height (integer) — default: 600
The height of the container (should be the same as the images), in pixels.

gap (integer) — default: 100
The total gap of the slides from the edges of the container, in pixels. The individual gaps are calculated randomly.

animationSpeed (integer) — default: 100
Controls the speed of the animation that opens/closes the blinds, in milliseconds (ms).

delayBetweenSlides (integer) — default: 500
Controls a small delay between animating the blinds to their open state, in milliseconds (ms).

hasLinks (boolean) — default: false
Set to true, when there are individual links for every image.

orientation (string) — default: 'vertical'
The orientation of the blinds; it can be either vertical or horizontal.

startClosed (boolean) — default: false
Set to true to start with the blinds closed.

firstOpenDelay (integer) — default: 500
Controls the delay before the blinds are opened for the first time, when startClosed is set to true; in milliseconds (ms).