VerticalShift

A jQuery Plugin by Mark Tank

VerticatShift allows a row of elements to be condensed to fit within a partent elemet. This allows more objects in a smaller space, yet providing an easy way view all the objects. On mouseover the element is enlarged to show its full content. Download VerticalShift Plugin

Uses: Photos, stories, descriptions, cards and much more.

Requires jQuery 1.4.4 or newer

Box of Notes 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis condimentum porta risus, ac molestie erat egestas nec. Praesent ut elit nisi. Vestibulum ante ipsum primis.

Box of Notes 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis condimentum porta risus, ac molestie erat egestas nec. Praesent ut elit nisi. Vestibulum ante ipsum primis.

Box of Notes 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis condimentum porta risus, ac molestie erat egestas nec. Praesent ut elit nisi. Vestibulum ante ipsum primis.

Box of Notes 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis condimentum porta risus, ac molestie erat egestas nec. Praesent ut elit nisi. Vestibulum ante ipsum primis.

Box of Notes 5

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis condimentum porta risus, ac molestie erat egestas nec. Praesent ut elit nisi. Vestibulum ante ipsum primis.

Box of Notes 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis condimentum porta risus, ac molestie erat egestas nec. Praesent ut elit nisi. Vestibulum ante ipsum primis.

Box of Notes 7

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis condimentum porta risus, ac molestie erat egestas nec. Praesent ut elit nisi. Vestibulum ante ipsum primis.

HTML Source

1	<div id="notes">
2		<div>Note One</div>
3		<div>Note Two</div>
4 	<div>Note Three</div>
5 	</div>
6
7	or
8
9	<div id="photos">
10		<div><img src="images/forest.jpg" width="216px" height="216px" /></div>
10		<div><img src="images/ocean.jpg" width="216px" height="216px" /></div>
10		<div><img src="images/desert.jpg" width="216px" height="216px" /></div>
13	</div>
		

Javascript Source

1	$("#notes > div").verticalShift({options});

One important thing to remember is each item has to be enclosed with a div tag

There are only two options that can be set with a hash, verticalShift({options}). First is the rightMargin:12. this gives a margin on the right side. It needs to be a integer. The second option is opacity which is set with a floating point, opacity:.5. 1 is equal to no opacity and is the default.

VertialShift is linkable so you can do things like this:
$("#id > div").verticalShift().click(function(){});

Question or bugs, please contact Mark Tank