Cubeportfolio
Showcase your latest works with a jQuery grid plugin that provides powerful portfolio system, beautiful animated filtering or any other ordered grid content.
Official documentation
For more detailed information and examples, see the official documentation: Cubeportfolio documentation .
How to use?
Copy-paste the stylesheet <link> into your <head> to load the CSS.
<link rel="stylesheet" href="../../assets/vendor/cubeportfolio/css/cubeportfolio.min.css">
Copy-paste the following <script> near the end of your pages under JS Implementing Plugins to enable it.
<script src="../../assets/vendor/cubeportfolio/js/jquery.cubeportfolio.min.js"></script>
Copy-paste the following <script> near the end of your pages under JS Front to enable it.
<script src="../../assets/js/hs.cubeportfolio.js"></script>
Copy-paste the init function under JS Plugins Init., before the closing </body> tag, to enable it.
<script>
$(document).on('ready', function () {
// initialization of cubeportfolio
$('.cbp').each(function () {
var cbp = $.HSCore.components.HSCubeportfolio.init($(this), {
layoutMode: 'grid'
});
});
});
</script>
Basic example
- All
- Branding
- Abstract
- Graphic
- Illustration
<div class="cubeportfolio">
<!-- Filter -->
<ul id="filterControls" class="list-inline cbp-l-filters-alignRight text-center">
<li class="list-inline-item cbp-filter-item cbp-filter-item-active cubeportfolio-item" data-filter="*">All</li>
<li class="list-inline-item cbp-filter-item cubeportfolio-item" data-filter=".branding">Branding</li>
<li class="list-inline-item cbp-filter-item cubeportfolio-item" data-filter=".abstract">Abstract</li>
<li class="list-inline-item cbp-filter-item cubeportfolio-item" data-filter=".graphic">Graphic</li>
<li class="list-inline-item cbp-filter-item cubeportfolio-item" data-filter=".illustration">Illustration</li>
</ul>
<!-- End Filter -->
<!-- Content -->
<div class="cbp"
data-hs-cbp-options='{
"animationType": "quicksand",
"gapHorizontal": 32,
"gapVertical": 32,
"mediaQueries": [
{"width": 1500, "cols": 4},
{"width": 1100, "cols": 4},
{"width": 800, "cols": 3},
{"width": 480, "cols": 2},
{"width": 380, "cols": 1}
]
}'>
<!-- Item -->
<div class="cbp-item rounded graphic">
<a class="cbp-caption" href="#">
<div class="cbp-caption-defaultWrap">
<img src="../../assets/img/380x360/img1.jpg" alt="Image Description">
</div>
<div class="cbp-caption-activeWrap bg-primary">
<div class="cbp-l-caption-alignCenter">
<div class="cbp-l-caption-body">
<h4 class="text-white mb-0">Remind Me More</h4>
<p class="small text-white-70 mb-0">
by Tiberiu Neamu
</p>
</div>
</div>
</div>
</a>
</div>
<!-- End Item -->
<!-- Item -->
<div class="cbp-item rounded branding">
<a class="cbp-caption" href="#">
<div class="cbp-caption-defaultWrap">
<img src="../../assets/img/380x360/img1.jpg" alt="Image Description">
</div>
<div class="cbp-caption-activeWrap bg-primary">
<div class="cbp-l-caption-alignCenter">
<div class="cbp-l-caption-body">
<h4 class="text-white mb-0">Workout Buddy</h4>
<p class="small text-white-70 mb-0">
by Tiberiu Neamu
</p>
</div>
</div>
</div>
</a>
</div>
<!-- End Item -->
<!-- Item -->
<div class="cbp-item rounded abstract illustration">
<a class="cbp-caption" href="#">
<div class="cbp-caption-defaultWrap">
<img src="../../assets/img/380x360/img1.jpg" alt="Image Description">
</div>
<div class="cbp-caption-activeWrap bg-primary">
<div class="cbp-l-caption-alignCenter">
<div class="cbp-l-caption-body">
<h4 class="text-white mb-0">Tiger</h4>
<p class="small text-white-70 mb-0">
by Cosmin Capitanu
</p>
</div>
</div>
</div>
</a>
</div>
<!-- End Item -->
<!-- Item -->
<div class="cbp-item rounded abstract illustration">
<a class="cbp-caption" href="#">
<div class="cbp-caption-defaultWrap">
<img src="../../assets/img/380x360/img1.jpg" alt="Image Description">
</div>
<div class="cbp-caption-activeWrap bg-primary">
<div class="cbp-l-caption-alignCenter">
<div class="cbp-l-caption-body">
<h4 class="text-white mb-0">Tiger</h4>
<p class="small text-white-70 mb-0">
by Cosmin Capitanu
</p>
</div>
</div>
</div>
</a>
</div>
<!-- End Item -->
<!-- Item -->
<div class="cbp-item rounded graphic illustration">
<a class="cbp-caption" href="#">
<div class="cbp-caption-defaultWrap">
<img src="../../assets/img/380x360/img1.jpg" alt="Image Description">
</div>
<div class="cbp-caption-activeWrap bg-primary">
<div class="cbp-l-caption-alignCenter">
<div class="cbp-l-caption-body">
<h4 class="text-white mb-0">Tiger</h4>
<p class="small text-white-70 mb-0">
by Cosmin Capitanu
</p>
</div>
</div>
</div>
</a>
</div>
<!-- End Item -->
<!-- Item -->
<div class="cbp-item rounded graphic illustration">
<a class="cbp-caption" href="#">
<div class="cbp-caption-defaultWrap">
<img src="../../assets/img/380x360/img1.jpg" alt="Image Description">
</div>
<div class="cbp-caption-activeWrap bg-primary">
<div class="cbp-l-caption-alignCenter">
<div class="cbp-l-caption-body">
<h4 class="text-white mb-0">Tiger</h4>
<p class="small text-white-70 mb-0">
by Cosmin Capitanu
</p>
</div>
</div>
</div>
</a>
</div>
<!-- End Item -->
</div>
<!-- End Content -->
</div>
Extend
By assigning a variable, you can call the standard methods of the plugin:
<script>
$(document).on('ready', function () {
// initialization of cubeportfolio
$('.cbp').each(function () {
var cbp = $.HSCore.components.HSCubeportfolio.init($(this));
cbp.cubeportfolio('layout', function() {
console.log('Layout!!!');
});
});
});
</script>
Attributes
By assigning a variable, you can call the standard methods of the plugin:
data-hs-cbp-options='{
...
}' - array
Methods
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-hs-cbp-options='{}'. For more detailed or missing attributes/functions, see the official Cubeportfolio documentation documentation page.
| Parameters | Description | Default value |
|---|---|---|
|
|
Default filter for plugin. Option available only for `layoutMode: 'grid' | '*' |
|
|
Defines the speed of displaying the items (when displayType: 'default' this option will have no effect) | 100 |
|
|
Filter the items by dimension (bigger to smallest) if there are gaps in grid. Option available only for `layoutMode: 'mosaic' | true |
|
|
Enable / disable gallery mode for lightbox popup | true |
|
|
Push the open panel in focus and at close go back to the former stage | true |
|
|
Enable / disable the deeplinking feature for singlePage popup | true |
|
|
Enable / disable the sticky navigation for singlePage popup | true |
|
|
Adjust the layout grid. For more information, see Cubeportfolio documentation | 'responsive' |
|
|
The plugin will display his content based on the following value. For more information, see Cubeportfolio documentation | 'sequentially' |
|
|
Define the position of singlePage Inline block | 'below' |
|
|
Attribute of the delegate item that contains caption for lightbox | 'data-title' |
|
|
Define any clickable elements you wish to use to trigger lightbox popup on click | '.cbp-lightbox' |
|
|
Define any clickable elements you wish to use to trigger singlePageInline popup on click | '.cbp-singlePageInline' |
|
|
Define any clickable elements you wish to use to trigger singlePage popup on click | '.cbp-singlePage' |
|
|
Markup of the lightbox counter. To hide the counter for lightbox put this option to an empty string (e.g. '') | '<div class="cbp-popup-lightbox-counter">{{current}} of {{total}}</div>' |
|
|
Public API | |
|
|
Markup of the singlePage counter. To hide the counter for singlePage put this option to an empty string (e.g. '') | '<div class="cbp-popup-singlePage-counter">{{current}} of {{total}}</div>' |
|
|
Define `media queries` for columns layout. For more information, see Cubeportfolio documentation | |
|
|
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: '') | 'overlayBottomAlong' |