Download the plugin: regular (6k) or minified (2k)

Proper readme/instructions coming soon. If you find this plugin useful, please leave a comment below with the URL where you are using it – I’d really like to see it in action.

Basic usage:

$('.slider1').slidingDoor();

This is a photo from my old tutorial on how to build a DIY holiday wreath out of plywood, recycled artificial Christmas tree limbs, and some wire. It's good fun for the whole family, and I won a book for it.

Add some options:

$('.slider2').slidingDoor({opacity : .70, openSpeed : 100,
closeSpeed : 1000, openWidth: .6});

This gets your doors open in .1 seconds and they will be 60% opaque when they are open. The doors open 60% of the way, and close in 1 second.

This is a photo from my old tutorial on how to build a DIY holiday wreath out of plywood, recycled artificial Christmas tree limbs, and some wire. It's good fun for the whole family, and I won a book for it.

Here are all the settings you can use, and their default values.

openSpeed : 200
//time for the doors to open, in milliseconds
closeSpeed : 500
//time for the doors to close, in milliseconds
openWidth : .9
//the percentage of the total image width that the doors will slide
opacity : .20
//how transparent will the doors be at the end?  1 is opaque, 0 is transparent.
linkText : 'click here'
//If there's a link, this text appears.  You could replace it with an img tag.