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/components/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
$.HSCore.components.HSCubeportfolio.init('.cbp');
});
</script>
Basic example
- All
- Branding
- Abstract
- Graphic
- Illustration
<div class="u-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 u-cubeportfolio__item" data-filter="*">All</li>
<li class="list-inline-item cbp-filter-item u-cubeportfolio__item" data-filter=".branding">Branding</li>
<li class="list-inline-item cbp-filter-item u-cubeportfolio__item" data-filter=".abstract">Abstract</li>
<li class="list-inline-item cbp-filter-item u-cubeportfolio__item" data-filter=".graphic">Graphic</li>
<li class="list-inline-item cbp-filter-item u-cubeportfolio__item" data-filter=".illustration">Illustration</li>
</ul>
<!-- End Filter -->
<!-- Content -->
<div class="cbp"
data-layout="grid"
data-controls="#filterControls"
data-animation="quicksand"
data-x-gap="32"
data-y-gap="32"
data-media-queries='[
{"width": 1500, "cols": 4},
{"width": 1100, "cols": 4},
{"width": 800, "cols": 3},
{"width": 480, "cols": 2},
{"width": 300, "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="h6 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="h6 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="h6 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="h6 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="h6 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="h6 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>
Methods
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-controls="".
| Attribute | Value | Description |
|---|---|---|
|
|
string that represent the elements in the document (DOM selector) | Defines the container for the filter. The value is the item ID. |
|
|
|
Defines the layout mode. The following values are available: |
|
|
only integers (e.g. 1, 5, 10) | Defines the spacing between the elements on the left and right. |
|
|
only integers (e.g. 1, 5, 10) | Defines the spacing between the elements on the top and bottom. |
|
|
|
Defines the effects of appearance, as well as the sorting of elements. The following values are available: |
|
|
|
The appearance effect for the description. The following values are available: |
|
|
|
Responsive breakpoint values. Allows you to change some rules on the resolution specified in the first item of the object. |
|
|
string that represent the elements in the document (DOM selector) | Define the wrapper for loadMore |
|
|
'click' or 'auto' | How the loadMore functionality should behave. Load on click on the button or automatically when you scroll the page |
|
|
only integers (e.g. 2, 3, 10) | How many items to load when a loadMore action is triggered |