Cube Portfolio

# About

Cube Portfolio is a powerful jQuery plugin that provides beautiful animated filtering, custom captions and it's perfect for portfolios, galleries, team members, blog posts or any other ordered content.

It plays nice with your existing HTML and CSS, making it a great choice for dynamic and responsive layouts.

# How to install

#### 1. Upload cubeportfolio folder to your server. This folder contains all of the asssets of the plugin.

- js
- css
- images

#### 2. Include the following files in your <head> section of the page. Please ensure that all of them have the correct path:

    <!-- load cubeportfolio css file -->
    <link rel="stylesheet" href="cubeportfolio/css/cubeportfolio.min.css">

    <!-- load latest jquery from google resources-->
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

    <!-- load cubeportfolio jQuery plugin -->
    <script type="text/javascript" src="cubeportfolio/js/jquery.cubeportfolio.min.js"></script>

Be aware that Cube Portfolio plugin requires jQuery 1.7+. If you already have jQuery on your page, don’t include it second time.

#### 3. Insert the HTML structure below to the <body> section to build the markup (don't forget to update images path!).

For more complex structures please check the templates folder.

    <div id="grid-container">
        <div class="cbp-item">
            <a href="#" title="custom title 1">
                <img src="path/to/img1" alt="custom alt 1" width="100%"/>
            </a>
        </div>
        <div class="cbp-item">
            <a href="#" title="custom title 2">
                <img src="path/to/img2" alt="custom alt 2" width="100%"/>
            </a>
        </div>
        <div class="cbp-item">
            <a href="#" title="custom title 3">
                <img src="path/to/img3" alt="custom alt 3" width="100%"/>
            </a>
        </div>
    </div>

#### 4. Initialize the Cube Portfolio plugin. Usually just before the closing body tag: For options go to Options section.

    <script type="text/javascript">
    jQuery(document).ready( function() {
         jQuery('#grid-container').cubeportfolio({
            // options
         });
    });
    </script>

# Options

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.

    <script type="text/javascript">
    jQuery('#grid-container').cubeportfolio({
        // place here the options. Don't forget to separate them by comma
    });
    </script>

## Full list of options

Name | Values | Default | Description
--- | --- | --- | ---
filters | strings that represent the elements in the document (DOM selector) | '' | strings that represent the elements in the document (DOM selector).
loadMore | strings that represent the elements in the document (DOM selector) | '' | strings that represent the elements in the document (DOM selector).
loadMoreAction | 'click' or 'auto' | 'click' | How the loadMore functionality should behave. Load on click on the button or automatically when you scroll the pag
layoutMode | 'grid' or 'slider' | 'grid' | Layout Mode for this plugin
drag | true or false | true | Mouse and touch drag support. Option available only for `layoutMode: 'slider'`
auto | true or false | false | Autoplay the slider. Option available only for `layoutMode: 'slider'`
autoTimeout | only integers (ex: 1000, 2000, 5000) | 5000 | Autoplay interval timeout. Time is set in milisecconds. 1000 milliseconds equals 1 second. Option available only for `layoutMode: 'slider'`
autoPauseOnHover | true or false | true | Stops autoplay when user hover the slider. Option available only for `layoutMode: 'slider'`
showNavigation | true or false | true | Show `next` and `prev` buttons for slider. Option available only for `layoutMode: 'slider'`
showPagination | true or false | true | Show pagination for slider. Option available only for `layoutMode: 'slider'`
rewindNav | true or false | true | Enable slide to first item (last item). Option available only for `layoutMode: 'slider'`
scrollByPage | true or false | true | Scroll by page and not by item. This option affect next/prev buttons and drag support. Option available only for `layoutMode: 'slider'`
defaultFilter | strings that represent the filter name(e.g. '*', '.logo', '.web-design', '.design') | '*' | Default filter for plugin. Option available only for `layoutMode: 'grid'`
filterDeeplinking | true or false | false | Enable / disable the deeplinking feature when you click on filters. Option available only for `layoutMode: 'grid'`
animationType | 'fadeOut' 'quicksand' 'bounceLeft' 'bounceTop' 'bounceBottom'
'moveLeft'
'slideLeft'
'fadeOutTop'
'sequentially'
'skew'
'slideDelay'
'3d' Flip
'rotateSides'
'flipOutDelay'
'flipOut'
'unfold'
'foldLeft'
'scaleDown'
'scaleSides'
'frontRow'
'flipBottom'
'rotateRoom'
'fadeOut'
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 available (CSS3 transitions and transform, GPU acceleration) Option available only for `layoutMode: 'grid'`
gridAdjustment | 'default' 'alignCenter' 'responsive' | 'responsive' | Adjust the layout grid. - default (no adjustment applied) - alignCenter (align the grid on center of the page) - responsive (use a fluid grid to resize the grid)
mediaQueries | - array of objects of format: [{width: a, cols: d}, {width: b, cols: e}] - you can define as many objects as you want - if this option is `false` Cube Portfolio will adjust the items width automatically (default option for backward compatibility) | false | Define `media queries` for columns layout. Format: [{width: a, cols: d}, {width: b, cols: e}, {width: c, cols: f}], where a, b, c are the grid width and d, e, f are the columns displayed. e.g. [{width: 1100, cols: 4}, {width: 800, cols: 3}, {width: 480, cols: 2}] means
if (gridWidth >= 1100) => show 4 columns,
if (gridWidth >= 800 && gridWidth < 1100) => show 3 columns,
if (gridWidth >= 480 && gridWidth < 800) => show 2 columns,
if (gridWidth < 480) => show 2 columns
Keep in mind that a > b > c
This option is available only when `gridAdjustment: 'responsive'`
gapHorizontal | only integers (e.g. 1, 5, 10) | 10 | Horizontal gap between items
gapVertical | only integers (e.g. 1, 5, 10) | 10 | Vertical gap between items
caption | 'pushTop' 'pushDown' 'revealBottom' 'revealTop' 'moveRight'
'moveLeft'
'overlayBottomPush'
'overlayBottom'
'overlayBottomReveal'
'overlayBottomAlong'
'overlayRightAlong'
'minimal'
'fadeIn'
'zoom'
'opacity'
'pushTop'
Caption - the overlay that is shown when you put the mouse over an item.
NOTE: If you don't want to have captions set this option to an empty string (e.g. caption: '')
displayType | 'default' 'lazyLoading' 'fadeInToTop' 'sequentially' 'bottomToTop' | 'lazyLoading' | The plugin will display his content based on the following values. - default (the content will be displayed as soon as possible) - lazyLoading (e.g. fadeIn) (the plugin will fully preload the images before displaying the items with a fadeIn effect)
- fadeInToTop - fadeInToTop (the plugin will fully preload the images before displaying the items with a fadeIn effect from bottom to top)
- sequentially (the plugin will fully preload the images before displaying the items with a sequentially effect)
- bottomToTop (the plugin will fully preload the images before displaying the items with an animation from bottom to top)
displayTypeSpeed | only integers, values in ms (e.g. 200, 300, 500) | 400 | Defines the speed of displaying the items (when displayType == default this option will have no effect)
lightboxDelegate | strings that represent the elements in the document (DOM selector) | '.cbp-lightbox' | Define any clickable elements you wish to use to trigger lightbox popup on click.
lightboxGallery | true or false | true | Enable / disable gallery mode for lightbox popup
lightboxTitleSrc | html atributte | 'data-title' | Attribute of the delegate item that contains caption for lightbox
lightboxShowCounter | - | - | This options is deprecated. Please use lightboxCounter option instead.
lightboxCounter | html markup code | '<div class="cbp-popup-lightbox-counter">{{current}} of {{total}}</div>' | Markup of the lightbox counter. To hide the counter for lightbox put this option to an empty string (e.g. '')
singlePageDelegate | strings that represent the elements in the document (DOM selector) | '.cbp-singlePage' | Define any clickable elements you wish to use to trigger singlePage popup on click.
singlePageDeeplinking | true or false | true | Enable / disable the deeplinking feature for singlePage popup
singlePageStickyNavigation | true or false | true | Enable / disable the sticky navigation for singlePage popup
singlePageShowCounter | - | - | This options is deprecated. Please use singlePageCounter option instead.
singlePageCounter | html markup code | '<div class="cbp-popup-singlePage-counter">{{current}} of {{total}}</div>' | Markup of the singlePage counter. To hide the counter for singlePage put this option to an empty string (e.g. '')
singlePageAnimation | 'left' 'fade' 'right' | 'left' | Defines which animation to use when singlePage appear
singlePageCallback | function | empty function | 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)
singlePageInlineDelegate | strings that represent the elements in the document (DOM selector) | '.cbp-singlePageInline' | Define any clickable elements you wish to use to trigger singlePageInline popup on click.
singlePageInlinePosition | 'above' 'below' 'top' 'bottom' | 'top' | Define the position of singlePage Inline block
singlePageInlineInFocus | true or false | true | Push the open panel in focus and at close go back to the former stage
singlePageInlineCallback | function | empty function | 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)

# Filters

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 available (CSS3 transition and transform, GPU acceleration).

Filtering happens when public API method filter is triggered. This method (filter) can be trigger from anywhere, so you can use any kind of HTML structure for filters: buttons, links, dropdowns, etc.

The following example use some simple buttons to filter the plugin. For drowdown structure plese check exemples/lightbox-gallery/ folder.

#### 1. Create the HTML markup:

    <div id="filters-container">
    <!-- '*' means shows all item elements -->
    <div data-filter="*" class="cbp-filter-item cbp-filter-item-active">All</div>
    <div data-filter=".animation" class="cbp-filter-item">Animation</div>
    <div data-filter=".artwork" class="cbp-filter-item">Artwork</div>
    <div data-filter=".illustration" class="cbp-filter-item">Illustration</div>
    <div data-filter=".photography" class="cbp-filter-item">Photography</div>
    </div>

Every filter categories should be entered as the "data-filter" attribute.

#### 2. Add filter categories to desired target item into its class attribute:

    <div id="grid-container">
        <div class="cbp-item animation illustration">
            <a title="custom title 1" href="#"><img src="path/to/img1" alt="custom alt 1" width="100%"/></a>
        </div>
        <div class="cbp-item artwork">
            <a title="custom title 2" href="#"><img src="path/to/img2" alt="custom alt 2" width="100%"/></a>
        </div>
        <div class="cbp-item animation artwork photography">
            <a title="custom title 3" href="#"><img src="path/to/img3" alt="custom alt 3" width="100%"/></a>
        </div>
    </div>

#### 3. Initialize the javascript. Here is the part for initialising the plugin and then call the filter method.

    <script type="text/javascript">
    jQuery(document).ready(function() {
        var gridContainer = jQuery('#grid-container'),
            filtersContainer = $('#filters-container');

        // init cubeportfolio
        gridContainer.cubeportfolio({
            // cubeportfolio options
        });

        /*********************************
            add listener for filters
         *********************************/
        if (filtersContainer.hasClass('cbp-l-filters-dropdown')) {
            wrap = filtersContainer.find('.cbp-l-filters-dropdownWrap');

            wrap.on({
                'mouseover.cbp': function() {
                    wrap.addClass('cbp-l-filters-dropdownWrap-open');
                },
                'mouseleave.cbp': function() {
                    wrap.removeClass('cbp-l-filters-dropdownWrap-open');
                }
            });

            filtersCallback = function(me) {
                wrap.find('.cbp-filter-item').removeClass('cbp-filter-item-active');
                wrap.find('.cbp-l-filters-dropdownHeader').text(me.text());
                me.addClass('cbp-filter-item-active');
                wrap.trigger('mouseleave.cbp');
            };
        } else {
            filtersCallback = function(me) {
                me.addClass('cbp-filter-item-active').siblings().removeClass('cbp-filter-item-active');
            };
        }

        filtersContainer.on('click.cbp', '.cbp-filter-item', function() {
            var me = $(this);

            if (me.hasClass('cbp-filter-item-active')) {
                return;
            }

            // get cubeportfolio data and check if is still animating (reposition) the items.
            if (!$.data(gridContainer[0], 'cubeportfolio').isAnimating) {
                filtersCallback.call(null, me);
            }

            // filter the items
            gridContainer.cubeportfolio('filter', me.data('filter'), function() {});
        });
    });
    </script>

#### 4. Next steps are optional. Follow them only if you want to show counter for filters.

#### 4.1 Update the above HTML markup with this one:

    <div id="filters-container">
        <div data-filter="*" class="cbp-filter-item cbp-filter-item-active">
            All <div class="cbp-filter-counter"></div>
        </div>
        <div data-filter=".animation" class="cbp-filter-item">
            Animation <div class="cbp-filter-counter"></div>
        </div>
        <div data-filter=".artwork" class="cbp-filter-item">
            Artwork <div class="cbp-filter-counter"></div>
        </div>
        <div data-filter=".illustration" class="cbp-filter-item">
            Illustration <div class="cbp-filter-counter"></div>
        </div>
        <div data-filter=".photography" class="cbp-filter-item">
            Photography <div class="cbp-filter-counter"></div>
        </div>
    </div>

#### 4.2 Update the above js initialization with this one:

    <script type="text/javascript">
    jQuery(document).ready(function() {
        var gridContainer = jQuery('#grid-container'),
            filtersContainer = $('#filters-container');

        // init cubeportfolio
        gridContainer.cubeportfolio({
            // cubeportfolio options
        });

        /*********************************
            add listener for filters
         *********************************/
        if (filtersContainer.hasClass('cbp-l-filters-dropdown')) {
            wrap = filtersContainer.find('.cbp-l-filters-dropdownWrap');

            wrap.on({
                'mouseover.cbp': function() {
                    wrap.addClass('cbp-l-filters-dropdownWrap-open');
                },
                'mouseleave.cbp': function() {
                    wrap.removeClass('cbp-l-filters-dropdownWrap-open');
                }
            });

            filtersCallback = function(me) {
                wrap.find('.cbp-filter-item').removeClass('cbp-filter-item-active');
                wrap.find('.cbp-l-filters-dropdownHeader').text(me.text());
                me.addClass('cbp-filter-item-active');
                wrap.trigger('mouseleave.cbp');
            };
        } else {
            filtersCallback = function(me) {
                me.addClass('cbp-filter-item-active').siblings().removeClass('cbp-filter-item-active');
            };
        }

        filtersContainer.on('click.cbp', '.cbp-filter-item', function() {
            var me = $(this);

            if (me.hasClass('cbp-filter-item-active')) {
                return;
            }

            // get cubeportfolio data and check if is still animating (reposition) the items.
            if (!$.data(gridContainer[0], 'cubeportfolio').isAnimating) {
                filtersCallback.call(null, me);
            }

            // filter the items
            gridContainer.cubeportfolio('filter', me.data('filter'), function() {});
        });

        /*********************************
            activate counter for filters
         *********************************/
        gridContainer.cubeportfolio('showCounter', filtersContainer.find('.cbp-filter-item'), function() {
            // read from url and change filter active
            var match = /#cbpf=(.*?)([#|?&]|$)/gi.exec(location.href),
                item;
            if (match !== null) {
                item = filtersContainer.find('.cbp-filter-item').filter('[data-filter="' + match[1] + '"]');
                if (item.length) {
                    filtersCallback.call(null, item);
                }
            }
        });
    });
    </script>

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 Print you can append to url the string #cbpf=.print and the `Print` filter will be active.

# Lightbox

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).

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 options section)

To enable lightbox you must add cbp-lightbox class (or another class that you set in lightboxDelegate options) on the anchor elements that will open the lightbox on click.

Based on the href attribute of the anchor tag the lightbox will open an image or a video.

You can also add sounds from SoundCloud by going on there site, select the share option and click on Embed tab. In there you will find in the input an iframe element, copy the src of the iframe an include it in the .cbp-lightbox href (check the code below of a working example).

Also, Cubeportfolio has support for self hosted .mp3 audio files. You must add the path your .mp3 file to the href attribute of lightbox.

For youtube and vimeo videos you can also append custom params to the video link (e.g. &rel=0&autoplay=0&loop=1
Please check youtube and vimeo embedding pages for more info)

    <div id="grid-container">
        <div 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&rel=0&autoplay=0">
                <img src="path/to/img1" alt="custom alt 1" width="100%"/>
            </a>
        </div>
        <div class="cbp-item">
            <a class="cbp-lightbox" data-title="custom title 2" href="http://vimeo.com/74216460?autoplay=0&loop=1">
                <img src="path/to/img2" alt="custom alt 2" width="100%"/>
            </a>
        </div>
        <div 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>
        </div>
        <div class="cbp-item">
            <a class="cbp-lightbox" data-title="custom title 3" href="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/26519543&auto_play=true&hide_related=false&show_comments=true&show_user=true&show_reposts=false&visual=true">
                <img src="path/to/img2" alt="custom alt 3" width="100%"/>
            </a>
        </div>
        <div 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>
        </div>
        <div 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>
        </div>
    </div>

### Use Cube Portfolio lightbox outside of the plugin

To use the lightbox feature add class cbp-lightbox on your link elements.

    <a class="cbp-lightbox" data-title="custom title 3" href="path/to/img3">
        external link
    </a>

To create a gallery add also the data-cbp-lightbox attribute on those links. The value for data-cbp-lightbox attribute can be whatever you want but must be the same for one gallery.

    <a class="cbp-lightbox" data-title="custom title 1" href="path/to/img1" data-cbp-lightbox="myCustomLightbox">
        external link 1
    </a>
    <a class="cbp-lightbox" data-title="custom title 2" href="path/to/img2" data-cbp-lightbox="myCustomLightbox">
        external link 2
    </a>
    <a class="cbp-lightbox" data-title="custom title 3" href="path/to/img3" data-cbp-lightbox="myCustomLightbox">
        external link 3
    </a>

# Single Page

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.

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 singlePageDeeplinking in options.

To enable singlePage you must add cbp-singlePage class (or another class that you set in singlePageDelegate options) on the anchor elements that will open the singlePage on click.

The content that will be add to singlePage with the callback: singlePageCallback

To update content you must use updateSinglePage method and pass your HTML content as a parameter.

    <div id="grid-container">
        <div class="cbp-item">
            <a href="myCustomLink1" class="cbp-singlePage">
                open singlePage 1
            </a>
        </div>
        <div class="cbp-item">
            <a href="myCustomLink2" class="cbp-singlePage">
                open singlePage 2
            </a>
        </div>
        <div class="cbp-item">
            <a href="myCustomLink3" class="cbp-singlePage">
                open singlePage 3
            </a>
        </div>
    </div>

    <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>

### Use Cube Portfolio singlePage outside of the plugin

To use singlePage feature add class cbp-singlePage on your link elements.

    <a class="cbp-singlePage" href="myCustomLink">
        external singlePage link
    </a>

To create a gallery add also the data-cbp-singlePage attribute on those links. The value for data-cbp-singlePage attribute can be whatever you want but must be the same for one gallery.

    <a class="cbp-singlePage" href="myCustomLink1" data-cbp-singlePage="myCustomSinglePage">
        external singlePage link 1
    </a>
    <a class="cbp-singlePage" href="myCustomLink2" data-cbp-singlePage="myCustomSinglePage">
        external singlePage link 2
    </a>
    <a class="cbp-singlePage" href="myCustomLink3" data-cbp-singlePage="myCustomSinglePage">
        external singlePage link 3
    </a>

NoteIf you run the plugin locally you must know that Chrome, Opera and Internet Explorer deny local AJAX (xmlhttprequest) requests locally . You must use a web server to test singlePage feature. If you are using a web server and still have this issues please send me a link to your live website.

# Single Page Inline

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.

To enable singlePageInline you must add cbp-singlePageInline class (or another class that you set in singlePageInlineDelegate options) on the anchor elements that will open the singlePageInline on click.

The content that will be add to singlePageInline with the callback: singlePageInlineCallback

To update content you must use updateSinglePageInline method and pass your HTML content as a parameter.

    <div id="grid-container">
        <div class="cbp-item">
            <a href="myCustomLink1" class="cbp-singlePageInline">
                open singlePageInline 1
            </a>
        </div>
        <div class="cbp-item">
            <a href="myCustomLink2" class="cbp-singlePageInline">
                open singlePageInline 2
            </a>
        </div>
        <div class="cbp-item">
            <a href="myCustomLink3" class="cbp-singlePageInline">
                open singlePageInline 3
            </a>
        </div>
    </div>

    <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>

NoteIf you run the plugin locally you must know that Chrome, Opera and Internet Explorer deny local AJAX (xmlhttprequest) requests locally . You must use a web server to test singlePageInline feature. If you are using a web server and still have this issues please send me a link to your live website.

# Captions

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.

There are 11 predefined examples for captions in Cube Portfolio:

- pushTop
- revealBottom
- moveRight
- overlayBottomPush
- overlayBottom
- overlayBottomReveal
- overlayBottomAlong
- overlayRightAlong
- minimal
- fadeIn
- zoom

To activate a particulary caption set that caption in caption options

    <script type="text/javascript">
    jQuery('#grid-container').cubeportfolio({
        caption: 'pushTop'
    });
    </script>

In your HTML markup you must add cbp-caption class to container that wrap your caption. Also, the default state of caption must be wrap in a cbp-caption-defaultWrap container and the active state of caption must be wrap in another cbp-caption-activeWrap container.

    <div id="grid-container">
        <div 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>
        </div>
    </div>

# Templates

Cube Portfolio comes with 15 starter templates: Juicy Project, Lightbox Gallery, Meet the Team, Full Width, Masonry, Blog Posts, Masonry Projects, Slider Projects, Awesome Work, Clients, Tabs, Agency, Testimonials, Slider Testimonials and Slider Team. You will find them in templates folder.

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. To change the numbers of columns please refer to the Options area for mediaQueries feature.

If you want to control the height of you item you can define the height for every .cbp-item in your css:

    .cbp-item {
        height: 300px; /* your desire value */
    }

# API

Cube Portfolio has 5 methods to use for external control: init, destroy, filter, showCounter and appendItems For every callbackFunction this keyword refers to Cube Portfolio instance.

#### 1. Initialize the plugin

    // 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);

#### 2. Destroy the plugin (removes all events, data and markup from page)

    jQuery("#grid-container").cubeportfolio('destroy');

    // with callback function
    jQuery("#grid-container").cubeportfolio('destroy', callbackFunction);

#### 3. Filter the items

    // 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);

#### 4. Activate counter on filters

    // 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);

#### 5. Append new items to plugin

Append new items will append the content to the gird, filter the new content, then will rearange all item elements to a properly layout.

    // htmlContent - your HTML content
    jQuery("#grid-container").cubeportfolio('appendItems', htmlContent);

    // with callback function
    jQuery("#grid-container").cubeportfolio('appendItems', htmlContent, callbackFunction);

A typical htmlContent can look like this:

    var htmlContent = '<div class="logo cbp-item">my awesome content to append to plugin</div> <div class="logo cbp-item">my second awesome content to append to plugin</div>';

Note: Don't forget to add class .cbp-item to your div element

### Event Emmiter

Cube Portfolio emmit some events when certain events happens. You can subscribe to them by using jQuery event syntax:

    jQuery("#grid-container").on('updateSinglePageComplete.cbp', function() {
        // your functionality
    });

and unsubscrbe to them by ussing .off method

    jQuery("#grid-container").off('updateSinglePageComplete.cbp');

The events supported are:

- updateSinglePageStart.cbp (singlePage finished appending the content but singlePage is not visible yet)
- updateSinglePageComplete.cbp (singlePage finished appending the content and singlePage is now visible on the screen)
- updateSinglePageInlineStart.cbp (singlePageInline finished appending the content but the grid resize is not started yet)
- updateSinglePageInlineComplete.cbp (singlePageInline finished appending the content and the grid resize is done)
- initComplete.cbp (the plugin is initialized)
- pluginResize.cbp (the plugin height change)
- filterComplete.cbp (a filter trigger is finished)

# Load More Items

You can use load more feature using public API method appendItems.

    // ... after cubeportfolio initialization
    // basic load more items using public method `appendItems`
    jQuery("#grid-container").cubeportfolio('appendItems', '<div class="logo cbp-item">my awesome content to append to plugin</div> <div class="logo cbp-item">my second awesome content to append to plugin</div>');

For a more advanced examples please go to templates/juicy-projects/index.html path and check the HTML and js markup.

# Support

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 here.

# Change Log

#### v2.3.1 - 7 May, 2015

- [BUG FIXED] - deeplinking for loadMore
- [BUG FIXED] - caption css background color

#### v2.3.0 - 4 May, 2015

- [FEATURE] - added options to integrate filters & loadMore functionality into the plugin
- [FEATURE] - added multiple grids on the same page example
- [FEATURE] - code refractoring
- [BUG FIXED] - animationType don't behave correctly on some edge cases
- [BUG FIXED] - remove from dom unnecessary html nodes when animating
- [BUG FIXED] - loadMore issue for full-width template
- [BUG FIXED] - fixed some css

#### v2.2.0 - 19 April, 2015

- [FEATURE] - added new template layout(e.g. faq template)
- [FEATURE] - added soundcloud.com support in ligthbox
- [FEATURE] - added self hosted .mp3 files support in ligthbox
- [FEATURE] - added default style caption (e.g. caption: '')
- [FEATURE] - added two new API events: updateSinglePageStart.cbp and updateSinglePageInlineStart.cbp
- [BUG FIXED] - singlePage hash issue for loadMore items
- [BUG FIXED] - fixed gridAdjustement for `default` and `alignCenter` options

#### v2.1.1 - 7 April, 2015

- [BUG FIXED] - `bottomToTop` Display Type option
- [BUG FIXED] - fixed infinite load more functionality

#### v2.1.0 – 27 March, 2015

- [FEATURE] - performance improvements
- [FEATURE] - code refractoring
- [FEATURE] - group images in `lightbox` or `singlePage` so that each project can have it's own gallery
- [BUG FIXED] - stop filters action when grid is loading
- [BUG FIXED] - open full screen videos for singlePageInline
- [BUG FIXED] - singlePage deeplinking can create duplicates in href
- [BREAKING CHANGE] - removed `fadeIn` (displayType) option
- [BREAKING CHANGE] - removed `boxShadow` (animationType) option

#### v2.0.1 – 21 January, 2015

- [BUG FIXED] - margin-top of singlePage content for small devices
- [BUG FIXED] - slider-project template performance improvements
- [BUG FIXED] - API destroy slider layout issue

#### v2.0.0 – 17 January, 2015

- [FEATURE] - slider layout option with drag support
- [FEATURE] - better responsive layout system. now you can set the columns number based on the browser resolution
- [FEATURE] - performance improvements
- [FEATURE] - code refractoring
- [FEATURE] - items auto height
- [FEATURE] - added 9 new templates
- [BUG FIXED] - mobile scroll for singlePage
- [BREAKING CHANGE] - new html structure (old syntax still works)
- [BREAKING CHANGE] - remove support for ie8 & ie9 animations

#### v1.6.0 – 7 November, 2014

- [FEATURE] - set the appear animation for singlePage popup (e.g. `left`, `right`, `fade`)
- [FEATURE] - youtube & video posibility to add params (e.g. &rel=0&autoplay=0 etc)
- [FEATURE] - code improvements
- [BUG FIXED] - minor css bugs

#### v1.5.1 – 29 September, 2014

- [BUG FIXED] - multiple grids on the same page
- [BUG FIXED] - mark-up for singlePage counter

#### v1.5.0 – 8 September, 2014

- [FEATURE] - improved responsive layout on mobile, tablet and desktop
- [FEATURE] - added deeplinking for filters
- [FEATURE] - open singlePageInline at the bottom of the grid
- [FEATURE] - use lightbox and singlePage outside of the grid
- [FEATURE] - set the mark-up for ligthbox and siglePage counter
- [FEATURE] - improved the look and feel of templates
- [BUG FIXED] - singlePageInline overflow the items in some cases
- [BUG FIXED] - dropdown filters is now closing at click
- [BUG FIXED] - responsive bugs on some mobile devices
- [BREAKING CHANGE] - changed JS and HTML for dropdown filters

#### v1.4.1 – 23 June, 2014

- [BUG FIXED] - ios: double click to activate a filter
- [BUG FIXED] - page shift to the left by 15-20px

#### v1.4.0 – 10 May, 2014

- [FEATURE] - added ted.com videos support
- [FEATURE] - added support for self hosted videos
- [BUG FIXED] - corect dimensions for default filter
- [BUG FIXED] - page flickers during singlePage open transition

#### v1.3.0 – 24 March, 2014

- [FEATURE] - added default filter
- [FEATURE] - added related projects, basic slider and closing transition for singlePage feature
- [FEATURE] - focus the open panel for singlePageInline feature
- [BUG FIXED] - css bugs fixed

#### v1.2.0 – 23 January, 2014

- [FEATURE] - 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'
- [FEATURE] - added a new feature to open projects (singlePageInline). See exeample on 'Lightbox Gallery' template
- [BUG FIXED] - css bugs fixed

#### v1.1.0 – 18 December, 2013

- [FEATURE] - added a new animation for filters: 'Skew'
- [FEATURE] - added 3 new caption effects: 'revealLeft', 'revealTop', 'pushDown'
- [FEATURE] - added 2 new display type: 'fadeInToTop' and 'bottomToTop'
- [FEATURE] - documentation updated

#### v1.0.0 – 10 December, 2013

- initial release

Created by Mihai Buricea