<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cube Portfolio Documentation v1.5.1 | 29 September, 2014</title>
<meta name="description" content="demo1">
<meta name="keywords" content="demo1">
<!-- load open sans font from google fonts -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400' rel='stylesheet' type='text/css'>
<!-- load reset -->
<link rel="stylesheet" href="css/reset.css">
<!-- load main.css -->
<link rel="stylesheet" href="css/main.css">
<!-- load prettify css -->
<link rel="stylesheet" href="css/prettify.css">
</head>
<body>
<div class="wrap">
<div class="left">
<a href="#">Cube Portfolio</a>
<nav>
<dl id="navigation">
<dt><a href="#about">About</a></dt>
<dt><a href="#how-to-install">How to install</a></dt>
<dt><a href="#options">Options</a></dt>
<dt><a href="#filters">Filters</a></dt>
<dt><a href="#lightbox">Lightbox</a></dt>
<dt><a href="#singlePage">Single Page</a></dt>
<dt><a href="#singlePageInline">Single Page Inline</a></dt>
<dt><a href="#captions">Captions</a></dt>
<dt><a href="#templates">Templates</a></dt>
<dt><a href="#api">API</a></dt>
<dt><a href="#loadMoreItems">Load More Items</a></dt>
<dt><a href="#support">Support</a></dt>
<dt><a href="#change-log">Change Log</a></dt>
</dl>
</nav>
</div>
<div class="right">
<h1><a name="about">About</a></h1>
<p>Cube Portfolio is a powerful jQuery plugin that provides beautiful animated filtering, custom captions and it's perfect for <strong>portfolios, galleries, team members, blog posts</strong> or any other ordered content.</p>
<p>It plays nice with your existing HTML and CSS, making it a great choice for dynamic and responsive layouts.</p>
<h1><a name="how-to-install">How to install</a></h1>
<h4>1. Upload <span class="tinycode">cubeportfolio</span> folder to your server. This folder contains all of the asssets of the plugin.</h4>
<ul class="lists">
<li>js</li>
<li>css</li>
<li>images</li>
</ul>
<h4>
2. Include the following files in your <span class="tinycode"><head></span> section of the page. Please ensure that all of them have the correct path:
</h4>
<pre class="prettyprint lang-html linenums">
<!-- load cubeportfolio css file -->
<link rel="stylesheet" href="cubeportfolio/css/cubeportfolio.min.css">
<!-- load latest jquery from google resources-->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/121022/jquery.min.js"></script>
<!-- load cubeportfolio jQuery plugin -->
<script type="text/javascript" src="cubeportfolio/js/jquery.cubeportfolio.min.js"></script>
</pre>
<p>
Be aware that Cube Portfolio plugin requires jQuery 1.7+.
If you already have jQuery on your page, please don’t include it second time.
</p>
<br>
<h4>
3. Insert the HTML structure below to the <span class="tinycode"><body></span> section to build the markup (please update images path!).<br>
</h4>
<p>For more complex structures please check the <span class="tinycode">templates</span> folder.</p>
<pre class="prettyprint lang-html linenums">
<div id="grid-container">
<ul>
<li class="cbp-item">
<a href="#" title="custom title 1">
<img src="path/to/img1" alt="custom alt 1" width="100%"/>
</a>
</li>
<li class="cbp-item">
<a href="#" title="custom title 2">
<img src="path/to/img2" alt="custom alt 2" width="100%"/>
</a>
</li>
<li class="cbp-item">
<a href="#" title="custom title 3">
<img src="path/to/img3" alt="custom alt 3" width="100%"/>
</a>
</li>
</ul>
</div>
</pre>
<h4>
4. Initialize the Cube Portfolio plugin. Usually just before the closing body tag: For options go to <a href="#options">Options</a> section.
</h4>
<pre class="prettyprint lang-js linenums">
<script type="text/javascript">
jQuery(document).ready( function() {
jQuery('#grid-container').cubeportfolio({
// options
});
});
</script>
</pre>
<h1><a name="options">Options</a></h1>
<p>
There are numerous options that can be added to configure Cube Portfolio behaviour.
To set an option you must add it to the initialisation block of code.
</p>
<pre class="prettyprint lang-js linenums">
<script type="text/javascript">
jQuery('#grid-container').cubeportfolio({
// place here the options. Don't forget to separate them by comma
});
</script>
</pre>
<h2>Full list of options</h2>
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<th width="15%">Name</th>
<th width="20%">Values</th>
<th width="15%">Default</th>
<th width="40%">Description</th>
</tr>
<tr>
<td>defaultFilter</td>
<td>strings that represent the filter name(e.g. *, .logo, .web-design, .design)</td>
<td>*</td>
<td>Default filter for plugin</td>
</tr>
<tr>
<td>filterDeeplinking</td>
<td>true or false</td>
<td>false</td>
<td>Enable / disable the deeplinking feature when you click on filters</td>
</tr>
<tr>
<td>animationType</td>
<td>
fadeOut<br>
quicksand<br>
boxShadow<br>
bounceLeft<br>
bounceTop<br>
bounceBottom<br>
moveLeft<br>
slideLeft<br>
fadeOutTop<br>
sequentially<br>
skew
slideDelay
3d Flip
rotateSides
flipOutDelay
flipOut
unfold
foldLeft
scaleDown
scaleSides
frontRow
flipBottom
rotateRoom
</td>
<td>fadeOut</td>
<td>
Defines which animation to use for items that will be shown or hidden after a filter has been activated.
The plugin use the best browser features when available (CSS3 transition and transform, GPU acceleration) and fallback to simple animations (javascript animations) for legacy browsers.
</td>
</tr>
<tr>
<td>gridAdjustment</td>
<td>
default<br>
alignCenter<br>
responsive
</td>
<td>default</td>
<td>
Adjust the layout grid.
<br>- default (no adjustment applied)
<br>- alignCenter (align the grid on center of the page)
<br>- responsive (use a fluid grid to resize the grid)
</td>
</tr>
<tr>
<td>gapHorizontal</td>
<td>only integers (e.g. 1, 5, 10)</td>
<td>10</td>
<td>Horizontal gap between items</td>
</tr>
<tr>
<td>gapVertical</td>
<td>only integers (e.g. 1, 5, 10)</td>
<td>10</td>
<td>Vertical gap between items</td>
</tr>
<tr>
<td>caption</td>
<td>
pushTop
<br>pushDown
<br>revealBottom
<br>revealTop
<br>moveRight
<br>moveLeft
<br>overlayBottomPush
<br>overlayBottom
<br>overlayBottomReveal
<br>overlayBottomAlong
<br>overlayRightAlong
<br>minimal
<br>fadeIn
<br>zoom
</td>
<td>pushTop</td>
<td>Caption - the overlay that is shown when you put the mouse over an item. <br>NOTE: If you don't want to have captions just leave this option to an empty string ( caption: '')</td>
</tr>
<tr>
<td>displayType</td>
<td>
default
<br>fadeIn
<br>lazyLoading
<br>fadeInToTop
<br>sequentially
<br>bottomToTop
</td>
<td>default</td>
<td>
The plugin will display his content based on the following values.
<br>- default (the content will be displayed as soon as possible)
<br>- fadeIn (the content will be displayed with a fadeIn effect)
<br>- lazyLoading (the plugin will fully preload the images before displaying the items with a fadeIn effect)
<br>- fadeInToTop - fadeInToTop (the plugin will fully preload the images before displaying the items with a fadeIn effect from bottom to top)
<br>- sequentially (the plugin will fully preload the images before displaying the items with a sequentially effect)
<br>- bottomToTop (the plugin will fully preload the images before displaying the items with an animation from bottom to top)
</td>
</tr>
<tr>
<td>displayTypeSpeed</td>
<td>only integers, values in ms (e.g. 200, 300, 500)</td>
<td>400</td>
<td>Defines the speed of displaying the items (when <i>displayType == default</i> this option will have no effect)</td>
</tr>
<tr>
<td>
lightboxDelegate
</td>
<td>strings that represent the elements in the document (DOM selector)</td>
<td>.cbp-lightbox</td>
<td>Define any clickable elements you wish to use to trigger lightbox popup on click. </td>
</tr>
<tr>
<td>
lightboxGallery
</td>
<td>true or false</td>
<td>true</td>
<td>Enable / disable gallery mode for lightbox popup</td>
</tr>
<tr>
<td>
lightboxTitleSrc
</td>
<td>html atributte</td>
<td>data-title</td>
<td>Attribute of the delegate item that contains caption for lightbox</td>
</tr>
<tr>
<td>
<span style="color: #D66767">lightboxShowCounter</span>
</td>
<td>-</td>
<td>-</td>
<td>This options is deprecated. Please use lightboxCounter option instead.</td>
</tr>
<tr>
<td>
lightboxCounter
</td>
<td>html markup code</td>
<td>
<div class="cbp-popup-lightbox-counter">{{current}} of {{total}}</div>
</td>
<td>
Markup of the lightbox counter. To hide the counter for lightbox put this option to an empty string (e.g. '')
</td>
</tr>
<tr>
<td>
singlePageDelegate
</td>
<td>strings that represent the elements in the document (DOM selector)</td>
<td>.cbp-singlePage</td>
<td>Define any clickable elements you wish to use to trigger singlePage popup on click. </td>
</tr>
<tr>
<td>
singlePageDeeplinking
</td>
<td>true or false</td>
<td>true</td>
<td>Enable / disable the deeplinking feature for singlePage popup</td>
</tr>
<tr>
<td>
singlePageStickyNavigation
</td>
<td>true or false</td>
<td>true</td>
<td>Enable / disable the sticky navigation for singlePage popup</td>
</tr>
<tr>
<td>
<span style="color: #D66767">singlePageShowCounter</span>
</td>
<td>-</td>
<td>-</td>
<td>This options is deprecated. Please use singlePageCounter option instead.</td>
</tr>
<tr>
<td>
singlePageCounter
</td>
<td>html markup code</td>
<td>
<div class="cbp-popup-singlePage-counter">{{current}} of {{total}}</div>
</td>
<td>
Markup of the singlePage counter. To hide the counter for singlePage put this option to an empty string (e.g. '')
</td>
</tr>
<tr>
<td>
singlePageCallback
</td>
<td>function</td>
<td>empty function</td>
<td>Use this callback to update singlePage content. The callback will trigger after the singlePage popup will open. (@param url = the href attribute of the item clicked, @param element = the item clicked)</td>
</tr>
<tr>
<td>
singlePageInlineDelegate
</td>
<td>strings that represent the elements in the document (DOM selector)</td>
<td>.cbp-singlePageInline</td>
<td>Define any clickable elements you wish to use to trigger singlePageInline popup on click. </td>
</tr>
<tr>
<td>
singlePageInlinePosition
</td>
<td>
above
<br>below
<br>top
<br>bottom
</td>
<td>top</td>
<td>Define the position of singlePage Inline block</td>
</tr>
<tr>
<td>
singlePageInlineInFocus
</td>
<td>true or false</td>
<td>true</td>
<td>Push the open panel in focus and at close go back to the former stage</td>
</tr>
<tr>
<td>
singlePageInlineCallback
</td>
<td>function</td>
<td>empty function</td>
<td> Use this callback to update singlePage content. The callback will trigger after the singlePage popup will open. (@param url = the href attribute of the item clicked, @param element = the item clicked)</td>
</tr>
</table>
<h1><a name="filters">Filters</a></h1>
<p>
Based on your filters Cube Portfolio use jQuery to decide witch items to hide, show or reposition. Then applies CSS3 transition and transform to smoothly animate these items to their new locations.
The plugin use the best browser features when available (CSS3 transition and transform, GPU acceleration) and fallback to simple animations (javascript animations) for legacy browsers.
</p>
<p>
Filtering happens when public API method <span class="tinycode">filter</span> is triggered.
This method (<span class="tinycode">filter</span>) can be trigger from anywhere, so you can use any kind of HTML structure for filters: buttons, links, dropdowns, etc.
</p>
<p>The following example use some simple buttons to filter the plugin. For drowdown structure plese check <span class="tinycode">exemples/lightbox-gallery/</span> folder.</p>
<h4>1. Create the HTML markup:</h4>
<pre class="prettyprint lang-html linenums">
<div id="filters-container">
<!-- '*' means shows all item elements -->
<button data-filter="*" class="cbp-filter-item cbp-filter-item-active">
All
</button>
<button data-filter=".animation" class="cbp-filter-item">
Animation
</button>
<button data-filter=".artwork" class="cbp-filter-item">
Artwork
</button>
<button data-filter=".illustration" class="cbp-filter-item">
Illustration
</button>
<button data-filter=".photography" class="cbp-filter-item">
Photography
</button>
</div>
</pre>
<p>Every filter categories should be entered as the "data-filter" attribute.</p>
<h4>2. Add filter categories to desired target item into its class attribute:</h4>
<pre class="prettyprint lang-html linenums">
<div id="grid-container">
<ul>
<li class="cbp-item animation illustration">
<a title="custom title 1" href="#"><img src="path/to/img1" alt="custom alt 1" width="100%"/></a>
</li>
<li class="cbp-item artwork">
<a title="custom title 2" href="#"><img src="path/to/img2" alt="custom alt 2" width="100%"/></a>
</li>
<li class="cbp-item animation artwork photography">
<a title="custom title 3" href="#"><img src="path/to/img3" alt="custom alt 3" width="100%"/></a>
</li>
</ul>
</div>
</pre>
<h4>3. Initialize the javascript. Here is the part for initialising the plugin and then call the filter method.</h4>
<pre class="prettyprint lang-js linenums">
<script type="text/javascript">
jQuery(document).ready(function() {
var gridContainer = jQuery('#grid-container'),
filtersContainer = $('#filters-container');
// init cubeportfolio
gridContainer.cubeportfolio({
// cubeportfolio options
});
//activate filters for cubeportfolio
filtersContainer.on('click', 'button', function (e) {
// cache current button clicked
var me = jQuery(this);
// add class cbp-filter-item-active on the current button clicked and remove from other buttons
me.addClass('cbp-filter-item-active').siblings().removeClass('cbp-filter-item-active');
// call cubeportfolio filter function
gridContainer.cubeportfolio('filter', me.data('filter'));
});
});
</script>
</pre>
<h4>4. Next steps are optional. Follow them only if you want to show counter for filters.</h4>
<h4>4.1 Update the above HTML markup with this one:</h4>
<pre class="prettyprint lang-html linenums">
<div id="filters-container">
<button data-filter="*" class="cbp-filter-item cbp-filter-item-active">
All
<div class="cbp-filter-counter"></div>
</button>
<button data-filter=".animation" class="cbp-filter-item">
Animation
<div class="cbp-filter-counter"></div>
</button>
<button data-filter=".artwork" class="cbp-filter-item">
Artwork
<div class="cbp-filter-counter"></div>
</button>
<button data-filter=".illustration" class="cbp-filter-item">
Illustration
<div class="cbp-filter-counter"></div>
</button>
<button data-filter=".photography" class="cbp-filter-item">
Photography
<div class="cbp-filter-counter"></div>
</button>
</div>
</pre>
<h4>4.2 Update the above js initialization with this one:</h4>
<pre class="prettyprint lang-js linenums">
<script type="text/javascript">
jQuery(document).ready(function() {
var gridContainer = jQuery('#grid-container'),
filtersContainer = $('#filters-container');
// init cubeportfolio
gridContainer.cubeportfolio({
// cubeportfolio options
});
//activate filters for cubeportfolio
filtersContainer.on('click', 'button', function (e) {
// cache current button clicked
var me = jQuery(this);
// add class cbp-filter-item-active on the current button clicked and remove from other buttons
me.addClass('cbp-filter-item-active').siblings().removeClass('cbp-filter-item-active');
// call cubeportfolio filter function
gridContainer.cubeportfolio('filter', me.data('filter'));
});
// activate counter on filters for cubeportfolio
gridContainer.cubeportfolio('showCounter', filtersContainer.find('button'));
});
</script>
</pre>
<p>You can enable a default filter right from the URL. When you visit the page that has Cube Portfolio implemented on it and want to enable the filter <span class="tinycode">Print</span> you can append to url the string <span class="tinycode">#cbpf=.print</span> and the `Print` filter will be active.</p>
<h1><a name="lightbox">Lightbox</a></h1>
<p>When an anchor tag (link) is pressed you can choose either to display a cubeportoflio lightbox, open a singlePage popup, or to open a new webpage based on the url of anchor tag. The lightbox can display images or videos loaded from YouTube, Vimeo, Ted.com or self hosted videos(use delimiter '|' in href attribute to add the path to other formats for self hosted videos).</p>
<p>Cube Portfolio use a custom lightbox system that is dependend to plugin. You can use another lightbox system but you will not have all of the features included in the Cube Portfolio lightbox. (Please see <a href="#options">options</a> section)</p>
<p>To enable lightbox you must add <span class="tinycode">cbp-lightbox</span> class (or another class that you set in <span class="tinycode">lightboxDelegate</span> <a href="#options">options</a>) on the anchor elements that will open the lightbox on click.</p>
<p>Based on the href attribute of the anchor tag the lightbox will open an image or a video.</p>
<pre class="prettyprint lang-html linenums">
<div id="grid-container">
<ul>
<li class="cbp-item">
<!-- data-title attribute will be use to populate lightbox caption -->
<a class="cbp-lightbox" data-title="custom title 1" href="http://www.youtube.com/watch?v=bpOSxM0rNPM">
<img src="path/to/img1" alt="custom alt 1" width="100%"/>
</a>
</li>
<li class="cbp-item">
<a class="cbp-lightbox" data-title="custom title 2" href="http://vimeo.com/74216460">
<img src="path/to/img2" alt="custom alt 2" width="100%"/>
</a>
</li>
</li>
<li class="cbp-item">
<a class="cbp-lightbox" data-title="custom title 3" href="http://www.ted.com/talks/david_epstein_are_athletes_really_getting_faster_better_stronger">
<img src="path/to/img2" alt="custom alt 3" width="100%"/>
</a>
</li>
</li>
</li>
<li class="cbp-item">
<a class="cbp-lightbox" data-title="custom title 4" href="path/to/videos/big_buck_bunny.mp4|path/to/videos/big_buck_bunny.ogg|path/to/videos/big_buck_bunny.webm">
<img src="path/to/img2" alt="custom alt 4" width="100%"/>
</a>
</li>
<li class="cbp-item">
<a class="cbp-lightbox" data-title="custom title 5" href="path/to/big/img">
<img src="path/to/img3" alt="custom alt 5" width="100%"/>
</a>
</li>
</ul>
</div>
</pre>
<h3>Use Cube Portfolio lightbox outside of the plugin</h3>
<p>To use the lightbox feature add class <span class="tinycode">cbp-lightbox</span> on your link elements.</p>
<pre class="prettyprint lang-html linenums">
<a class="cbp-lightbox" data-title="custom title 3" href="path/to/img3">
my outside link
</a>
</pre>
<p>To create a gallery add also the <span class="tinycode">data-cbp-lightbox</span> attribute on those links. The value for <span class="tinycode">data-cbp-lightbox</span> attribute can be whatever you want but must be the same for one gallery.</p>
<pre class="prettyprint lang-html linenums">
<a class="cbp-lightbox" data-title="custom title 1" href="path/to/img1" data-cbp-lightbox="myCustomLightbox" >
my outside link 1
</a>
<a class="cbp-lightbox" data-title="custom title 2" href="path/to/img2" data-cbp-lightbox="myCustomLightbox" >
my outside link 2
</a>
<a class="cbp-lightbox" data-title="custom title 3" href="path/to/img3" data-cbp-lightbox="myCustomLightbox" >
my outside link 3
</a>
</pre>
<h1><a name="singlePage">Single Page</a></h1>
<p>You can open a custom HTML content by using singlePage feature. Single Page use a similar approach to lightbox system and you can use any kind of HTML markup as a content.</p>
<p>
You have the option to deep link a singlePage based on the href attribute of anchor tag that opened the singlePage. This means that URL automatically change when you switch to another singlePage and you can easily link to the desired singlePage when Cube Portfolio start.
To do that, you have to enable <span class="tinycode">singlePageDeeplinking</span> in <a href="#options">options</a>.
</p>
<p>To enable singlePage you must add <span class="tinycode">cbp-singlePage</span> class (or another class that you set in <span class="tinycode">singlePageDelegate</span> <a href="#options">options</a>) on the anchor elements that will open the singlePage on click.</p>
<p>The content that will be add to singlePage with the callback: <span class="tinycode">singlePageCallback</span></p>
<p>To update content you must use <span class="tinycode">updateSinglePage</span> method and pass your HTML content as a parameter.</p>
<pre class="prettyprint lang-html linenums">
<div id="grid-container">
<ul>
<li class="cbp-item">
<a href="myCustomLink1" class="cbp-singlePage">
open singlePage 1
</a>
</li>
<li class="cbp-item">
<a href="myCustomLink2" class="cbp-singlePage">
open singlePage 2
</a>
</li>
<li class="cbp-item">
<a href="myCustomLink3" class="cbp-singlePage">
open singlePage 3
</a>
</li>
</ul>
</div>
</pre>
<pre class="prettyprint lang-js linenums">
<script type="text/javascript">
jQuery('#grid-container').cubeportfolio({
/**
* This callback function will be trigger after the singlePage popup will be opened. (@param item = the current item clicked)
*/
singlePageCallback: function (item) {
// add content to singlePage
this.updateSinglePage('<div>My content to append to singlePage container</div>');
}
});
</script>
</pre>
<h3>Use Cube Portfolio singlePage outside of the plugin</h3>
<p>To use singlePage feature add class <span class="tinycode">cbp-singlePage</span> on your link elements.</p>
<pre class="prettyprint lang-html linenums">
<a class="cbp-singlePage" href="myCustomLink">
my outside singlePage link
</a>
</pre>
<p>To create a gallery add also the <span class="tinycode">data-cbp-singlePage</span> attribute on those links. The value for <span class="tinycode">data-cbp-singlePage</span> attribute can be whatever you want but must be the same for one gallery.</p>
<pre class="prettyprint lang-html linenums">
<a class="cbp-singlePage" href="myCustomLink1" data-cbp-singlePage="myCustomSinglePage" >
my outside singlePage link 1
</a>
<a class="cbp-singlePage" href="myCustomLink2" data-cbp-singlePage="myCustomSinglePage" >
my outside singlePage link 2
</a>
<a class="cbp-singlePage" href="myCustomLink3" data-cbp-singlePage="myCustomSinglePage" >
my outside singlePage link 3
</a>
</pre>
<h1><a name="singlePageInline">Single Page Inline</a></h1>
<p>You can open a custom HTML content by using singlePageInline feature. Single Page Inline use a similar approach to singlePage but his content is added directly to content of the plugin.</p>
<p>To enable singlePageInline you must add <span class="tinycode">cbp-singlePageInline</span> class (or another class that you set in <span class="tinycode">singlePageInlineDelegate</span> <a href="#options">options</a>) on the anchor elements that will open the singlePageInline on click.</p>
<p>The content that will be add to singlePageInline with the callback: <span class="tinycode">singlePageInlineCallback</span></p>
<p>To update content you must use <span class="tinycode">updateSinglePageInline</span> method and pass your HTML content as a parameter.</p>
<pre class="prettyprint lang-html linenums">
<div id="grid-container">
<ul>
<li class="cbp-item">
<a href="myCustomLink1" class="cbp-singlePageInline">
open singlePageInline 1
</a>
</li>
<li class="cbp-item">
<a href="myCustomLink2" class="cbp-singlePageInline">
open singlePageInline 2
</a>
</li>
<li class="cbp-item">
<a href="myCustomLink3" class="cbp-singlePageInline">
open singlePageInline 3
</a>
</li>
</ul>
</div>
</pre>
<pre class="prettyprint lang-js linenums">
<script type="text/javascript">
jQuery('#grid-container').cubeportfolio({
/**
* This callback function will be trigger after the singlePageInline popup will be opened. (@param item = the current item clicked)
*/
singlePageInlineCallback: function (item) {
// add content to singlePageInline
this.updateSinglePageInline('<div>My content to append to singlePageInline container</div>');
}
});
</script>
</pre>
<h1><a name="captions">Captions</a></h1>
<p>
Cube Portfolio has predefined captions, but it is very simple to add your own HMTL formatted containers inside the entries with your own CSS.
You can create captions from almost any static HTML elements.
</p>
<p>There are 11 predefined examples for captions in Cube Portfolio:</p>
<ul class="lists">
<li>pushTop</li>
<li>revealBottom</li>
<li>moveRight</li>
<li>overlayBottomPush</li>
<li>overlayBottom</li>
<li>overlayBottomReveal</li>
<li>overlayBottomAlong</li>
<li>overlayRightAlong</li>
<li>minimal</li>
<li>fadeIn</li>
<li>zoom</li>
</ul>
<p>To activate a particulary caption set that caption in <span class="tinycode">caption</span> options</p>
<pre class="prettyprint lang-js linenums">
<script type="text/javascript">
jQuery('#grid-container').cubeportfolio({
caption: 'pushTop'
});
</script>
</pre>
<p>
In your HTML markup you must add <span class="tinycode">cbp-caption</span> class to container that wrap your caption.
Also, the default state of caption must be wrap in a <span class="tinycode">cbp-caption-defaultWrap</span> container and
the active state of caption must be wrap in another <span class="tinycode">cbp-caption-activeWrap</span> container.
</p>
<pre class="prettyprint lang-html linenums">
<div id="grid-container">
<ul>
<li class="cbp-item">
<div class="cbp-caption">
<div class="cbp-caption-defaultWrap">
<img src="path/to/img" alt="" width="100%">
</div>
<div class="cbp-caption-activeWrap">
<h1>Caption that is active on hover</h1>
</div>
</div>
</li>
</ul>
</div>
</pre>
<h1><a name="templates">Templates</a></h1>
<p>Cube Portfolio comes with 6 starter templates: Juicy Project, Lightbox Gallery, Meet the Team, Full Screen Layout, Masonry Layout and Blog Posts. You will find them in <span class="tinycode">templates</span> folder.</p>
<p>Every component (filters, grid container and load more) have different skins that are completelly independent from the others), so the skins can be combined. To enable a skin add the correspondent class to desire component container.</p>
<h3>#1. Juicy Projects:</h3>
<ul class="lists">
<li>Filters: <span class="tinycode">cbp-l-filters-button</span></li>
<li>Grid container: <span class="tinycode">cbp-l-grid-projects</span></li>
<li>Load More: <span class="tinycode">cbp-l-grid-loadMore-button</span> class for button and <span class="tinycode">cbp-l-loadMore-button-link</span> class to inner link</li>
</ul>
<p>If you want to change the number of columns or dimension of items just go to cubeportfolio/css/cubeportfolio.css file<br> at <span class="tinycode">.cbp-l-grid-projects .cbp-item</span> selector and change his width and height properties</p>
<pre class="prettyprint lang-css linenums">
/* set width and height for items */
.cbp-l-grid-projects .cbp-item {
/* @editable properties */
width: 270px;
height: 250px;
}
</pre>
<h3>#2. Lightbox Gallery:</h3>
<ul class="lists">
<li>Filters: <span class="tinycode">cbp-l-filters-dropdown</span>. <i>This exemple use filter by dropdown</i>.</li>
<li>Grid container: <span class="tinycode">cbp-l-grid-gallery</span></li>
<li>Load More: <span class="tinycode">cbp-l-grid-loadMore-button</span> class for button and <span class="tinycode">cbp-l-loadMore-button-link</span> class to inner link</li>
</ul>
<p>If you want to change the number of columns or dimension of items just go to cubeportfolio/css/cubeportfolio.css file<br> at <span class="tinycode">.cbp-l-grid-gallery .cbp-item</span> selector and change his width and height properties</p>
<pre class="prettyprint lang-css linenums">
/* set width and height for items */
.cbp-l-grid-gallery .cbp-item {
/* @editable properties */
width: 320px;
height: 236px;
}
</pre>
<h3>#3. Meet the Team:</h3>
<ul class="lists">
<li>Filters: <span class="tinycode">cbp-l-filters-alignLeft</span></li>
<li>Grid container: <span class="tinycode">cbp-l-grid-team</span></li>
</ul>
<p>If you want to change the number of columns or dimension of items just go to cubeportfolio/css/cubeportfolio.css file<br> at <span class="tinycode">.cbp-l-grid-team .cbp-item</span> selector and change his width and height properties</p>
<pre class="prettyprint lang-css linenums">
/* set width and height for items */
.cbp-l-grid-team .cbp-item {
/* @editable properties */
width: 380px;
height: 130px;
}
</pre>
<h3>#4. Full Screen Layout:</h3>
<ul class="lists">
<li>Filters: <span class="tinycode">cbp-l-filters-alignCenter</span>.</li>
<li>Grid container: <span class="tinycode">cbp-l-grid-fullScreen</span></li>
<li>Load More: <span class="tinycode">cbp-l-loadMore-text</span> class for button and <span class="tinycode">cbp-l-loadMore-text-link</span> class to inner link</li>
</ul>
<p>If you want to change the number of columns or dimension of items just go to cubeportfolio/css/cubeportfolio.css file<br> at <span class="tinycode">.cbp-l-grid-fullScreen .cbp-item</span> selector and change his width and height properties</p>
<pre class="prettyprint lang-css linenums">
/* set width and height for items */
.cbp-l-grid-fullScreen .cbp-item {
/* @editable properties */
width: 350px;
height: 263px;
}
</pre>
<h3>#5. Masonry Layout:</h3>
<ul class="lists">
<li>Filters: <span class="tinycode">cbp-l-filters-alignRight</span></li>
<li>Grid container: <span class="tinycode">cbp-l-grid-masonry</span></li>
</ul>
<p>If you want to change the number of columns or dimension of items just go to cubeportfolio/css/cubeportfolio.css file<br> at <span class="tinycode">.cbp-l-grid-masonry .cbp-item</span> selector and change his width and height properties</p>
<pre class="prettyprint lang-css linenums">
/* set width and height for items */
.cbp-l-grid-masonry .cbp-item {
/* @editable properties */
width: 277px;
}
.cbp-l-grid-masonry .cbp-l-grid-masonry-height1 {
/* @editable properties */
height: 267px;
}
.cbp-l-grid-masonry .cbp-l-grid-masonry-height2 {
/* @editable properties */
height: 415px;
}
</pre>
<h3>#6. Blog Posts:</h3>
<ul class="lists">
<li>Filters: <span class="tinycode">cbp-l-filters-list</span></li>
<li>Grid container: <span class="tinycode">cbp-l-grid-blog</span></li>
</ul>
<p>If you want to change the number of columns or dimension of items just go to cubeportfolio/css/cubeportfolio.css file<br> at <span class="tinycode">.cbp-l-grid-blog .cbp-item</span> selector and change his width and height properties</p>
<pre class="prettyprint lang-css linenums">
/* set width and height for items */
.cbp-l-grid-blog .cbp-item {
/* @editable properties */
width: 313px;
height: 330px;
}
</pre>
<h1><a name="api">API</a></h1>
<p>
FilterSlider has 5 methods to use for external control: <span class="tinycode">init</span>, <span class="tinycode">destroy</span>, <span class="tinycode">filter</span>, <span class="tinycode">showCounter</span> and <span class="tinycode">appendItems</span>
For every callbackFunction <span class="tinycode">this</span> keyword refers to Cube Portfolio instance.
</p>
<h4>1. Initialize the plugin</h4>
<pre class="prettyprint lang-js linenums">
// default init
jQuery("#grid-container").cubeportfolio(options);
// or
jQuery("#grid-container").cubeportfolio('init', options);
// with callback function
jQuery("#grid-container").cubeportfolio(options, callbackFunction);
// or
jQuery("#grid-container").cubeportfolio('init', options, callbackFunction);
</pre>
<br>
<h4>2. Destroy the plugin (removes all events, data and markup from page)</h4>
<pre class="prettyprint lang-js linenums">
jQuery("#grid-container").cubeportfolio('destroy');
// with callback function
jQuery("#grid-container").cubeportfolio('destroy', callbackFunction);
</pre>
<br>
<h4>3. Filter the items</h4>
<pre class="prettyprint lang-js linenums">
// filterDataSelector can be (only if you set .cbp-filter-item on filter selectors): jQuery('.cbp-filter-item').data('filter')
jQuery("#grid-container").cubeportfolio('filter', filterDataSelector);
// with callback function
jQuery("#grid-container").cubeportfolio('filter', filterDataSelector, callbackFunction);
</pre>
<br>
<h4>4. Activate counter on filters</h4>
<pre class="prettyprint lang-js linenums">
// filterSelector can be (only if you set .cbp-filter-item on filter selectors): jQuery('.cbp-filter-item')
jQuery("#grid-container").cubeportfolio('showCounter', filterSelector);
// with callback function
jQuery("#grid-container").cubeportfolio('showCounter', filterSelector, callbackFunction);
</pre>
<br>
<h4>5. Append new items to plugin</h4>
<p> Append new items will append the content to the gird, filter the new content, then will rearange all item elements to a properly layout.</p>
<pre class="prettyprint lang-js linenums">
// htmlContent - your HTML content
jQuery("#grid-container").cubeportfolio('appendItems', htmlContent);
// with callback function
jQuery("#grid-container").cubeportfolio('appendItems', htmlContent, callbackFunction);
</pre>
<p>A typical <span class="tinycode">htmlContent</span> can look like this:</p>
<pre class="prettyprint lang-js linenums">
var htmlContent = '<li class="logo cbp-item">my awesome content to append to plugin</li> <li class="logo cbp-item">my second awesome content to append to plugin</li>';
</pre>
<p><strong>Note:</strong> Don't forget to add class <span class="tinycode">.cbp-item</span> to <span class="tinycode">li</span> element</p>
<h1><a name="loadMoreItems">Load More Items</a></h1>
<p>
You can use load more feature using public API method <span class="tinycode">appendItems</span>.
</p>
<pre class="prettyprint lang-js linenums">
// ... after cubeportfolio initialization
// basic load more items using public method `appendItems`
jQuery("#grid-container").cubeportfolio('appendItems', '<li class="logo cbp-item">my awesome content to append to plugin</li> <li class="logo cbp-item">my second awesome content to append to plugin</li>');
</pre>
<p>For a more advanced examples please go to templates/juicy-projects/index.html path and check the HTML and js markup.</p>
<h1><a name="support">Support</a></h1>
<p>
If you have any questions that are beyond the scope of this documentation file, please feel free to email via my user page contact form <a href="http://codecanyon.net/user/bmihai">here</a>.</p>
</p>
<h1><a name="change-log">Change Log</a></h1>
<h4>v1.5.1 – 29 September, 2014</h4>
<ul class="lists">
<li>- [BUG FIXED] - multiple grids on the same page</li>
<li>- [BUG FIXED] - mark-up for singlePage counter</li>
</ul>
<h4>v1.5 – 8 September, 2014</h4>
<ul class="lists">
<li>- [FEATURE] - improved responsive layout on mobile, tablet and desktop</li>
<li>- [FEATURE] - added deeplinking for filters</li>
<li>- [FEATURE] - open singlePageInline at the bottom of the grid</li>
<li>- [FEATURE] - use lightbox and singlePage outside of the grid</li>
<li>- [FEATURE] - set the mark-up for ligthbox and siglePage counter</li>
<li>- [FEATURE] - improved the look and feel of templates</li>
<li>- [BUG FIXED] - singlePageInline overflow the items in some cases</li>
<li>- [BUG FIXED] - dropdown filters is now closing at click</li>
<li>- [BUG FIXED] - responsive bugs on some mobile devices</li>
<li>- [BREAKING CHANGE] - changed JS and HTML for dropdown filters</li>
</ul>
<h4>v1.4.1 – 23 June, 2014</h4>
<ul class="lists">
<li>- [BUG FIXED] - ios: double click to activate a filter</li>
<li>- [BUG FIXED] - page shift to the left by 15-20px</li>
</ul>
<h4>v1.4 – 10 May, 2014</h4>
<ul class="lists">
<li>- [FEATURE] - added ted.com videos support</li>
<li>- [FEATURE] - added support for self hosted videos</li>
<li>- [BUG FIXED] - corect dimensions for default filter</li>
<li>- [BUG FIXED] - page flickers during singlePage open transition</li>
</ul>
<h4>v1.3 – 24 March, 2014</h4>
<ul class="lists">
<li>- added default filter</li>
<li>- added related projects, basic slider and closing transition for singlePage feature</li>
<li>- focus the open panel for singlePageInline feature</li>
<li>- bugs fixed</li>
</ul>
<h4>v1.2 – 23 January, 2014</h4>
<ul class="lists">
<li>- added 12 new animations for filters: 'Slide Delay', '3d Flip', 'Rotate Sides', 'Flip Out Delay', 'Flip Out', 'Unfold', 'Fold Left', 'Scale Down', 'Scale Sides', 'Front Row', 'Flip Bottom', 'Rotate Room'</li>
<li>- added a new feature to open projects (singlePageInline). See exeample on 'Lightbox Gallery' template</li>
<li>- bugs fixed</li>
</ul>
<h4>v1.1 – 18 December, 2013</h4>
<ul class="lists">
<li>- added a new animation for filters: 'Skew'</li>
<li>- added 3 new caption effects: 'revealLeft', 'revealTop', 'pushDown'</li>
<li>- added 2 new display type: 'fadeInToTop' and 'bottomToTop'</li>
<li>- documentation updated</li>
</ul>
<h4>v1.0 – 10 December, 2013</h4>
<ul class="lists">
<li>initial release</li>
</ul>
<br>
<br>
<strong>Created by <a href="http://scriptpie.com" target="_blank">Mihai Buricea</a></strong>
</div>
</div>
<!-- load jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<!-- load prettify -->
<script src="js/prettify.js"></script>
<!-- load main.js -->
<script src="js/main.js"></script>
</body>
</html>