A jQuery plugin for a sliding image divider
JavaScript
Latest commit 71d4fda Apr 26, 2012 @jsantell jsantell Change demo link
Permalink
Failed to load latest commit information.
demo Initial commit Apr 19, 2012
make
src Initial commit Apr 19, 2012
.gitignore
LICENSE Initial commit Apr 19, 2012
Makefile Initial commit Apr 19, 2012
README.md Change demo link Apr 26, 2012
jquery.divider.js Initial commit Apr 19, 2012
jquery.divider.min.js

README.md

jquery.divider.js

A jQuery plugin for a sliding image divider.

View demo

Supported in IE6-9, Chrome, FF3.6,12, Safari

Dependencies

This plugin requires jQuery (obviously) and jQuery UI's draggable functionality

Options

  • panels: The selector used to find the panels inside the divider element (default: '.panels')
  • controller: The name of the class assigned to the controller objects (if string), or the element to use as the controller (if jQuery object) (default: 'controller')
  • direction: Accepts 'horizontal' or 'vertical'; denotes the direction of the dividers (default: 'vertical')
  • position: Accepts an array of numbers indicating the position of each controller. If no value is passed, the controllers are set up to be equidistant (default: [])
  • handle: The name of the class assigned to the handle object (if string), or the element to use as the controller (if jQuery object). If left unassigned, no handle is used (default: false)

Example

Sets #container1 to be a vertical divider, and #container3 to be a horizontal divider.

  $('#container1').divider({
    controller: 'v-divider', // class assigned to controller div
    direction:  'vertical',
    panels:     '.section',
    position:   [ 550 ], // Sets the only handle to be 550px from the left
    handle:     'handle'
  });

  $('#container3').divider({
    controller: $('<div />', { 'class' : 'h-divider' }), // jQuery element that will be used for controller
    direction:  'horizontal',
    panels:     '.section',
    position:   [ 0 ], // Start the controller at the very top (0px)
    handle:     $('<div />', { 'class' : 'handle' }); // jQuery element to be used for handle
  });

Contributing

This project uses smoosh for compiling, linting.