A jQuery plugin which creates a slideshow featuring a blinds effect transitioning
JavaScript CSS
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
demos
blindify.css
blindify.jquery.json
blindify.min.css
jquery.blindify.js
jquery.blindify.min.js
license.md
readme.md

readme.md

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.

blindify 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).