/***********************************************************************
*
* @author Ammar
* Jdemonstrate - A jQuery plulgin for project or work demonstrations.
* http://sandbox.ammaridris88.com
* http://www.jquery.com
* Version: 0.5.0
* Copyright (c) 2011 Ammar Idris (http://ammaridris88.com)
* Licensed under the MIT license
* http://www.opensource.org/licenses/mit-license.php
*
* planned updates:
* - v0.5.0: Added - Collapsed item returns to original index. **
* - v0.6.0: Added draggable content pane.
* - v0.7.0: Added grid content re-size feature.
* - v0.8.0: Added grid navigation.
* - v0.8.0: Added custome grid bg image.
* - v0.9.0: Added parallax scrolling feature.
* - v1.0.0: Beta Release!
*
************************************************************************/
What is Jdemonstrate?
Jdemonstrate is a jQuery plugin created for showcasing project demonstrations, examples of your work,
tutorials, articles or whatever you can think of. The plugin exists as two parts, the 'grid' and the
'content'. The 'grid' is made up of a collection of captioned images which, when clicked, expand out
and become the 'content'. The 'content', which you are now staring at, can contain anything a div tag
can.
How do I use Jdemonstrate?
Just like most other jQuery plugins, Jdemonstrate is very simple to use. Jdemonstrate needs to be invoked
on a container which holds a list of div elements. You simply add this script to the head section of your
html document:
$(document).ready(function(){
$("#sandbox").jdemonstrate({
//Optional Parameters
item :'.item',
previewImg :'.preview_img',
expandSpeed :300,
collapseSpeed :150
});
});
HTML and CSS Requirements?
The HTML should look something like this:
<div class="item">
<img class="preview_img" src="image.jpg"/>
<div class="item_Content">
<img class="closebtn" src="closebtn.png"/>
//The content goes here...
</div>
</div>
The class 'item' in this example is assigned to the grid item. Next we have the 'preview_img' which is
the picture to be displayed on the grid. The 'item_Content' div contains everything in the content area
which is revealed when the grid item is expanded. The CSS styling is up to you but it is neccessary to
include a div with the class 'closebtn' in side the content each grid item. The class names of the grid
item and the preview image can either be set as in the example above or passed as options.
Notes:
Requirements:
jQuery (tested on 1.7)
JavaScript Enabled Browser
Tested on Firefox 8, IE 9, Chrome
Plugin Options:
item = Grid item class name.
previewImg = Preview image class name.
expandSpeed = Expand animation speed.
collapseSpeed = Collapse animation speed.
I'll add more, I swear.
Licence:
Licensed under the MIT license
http://www.opensource.org/licenses/mit-license.php
