Cubeportfolio
Showcase your latest works with a a jQuery grid plugin that provides powerful portfolio system, beautiful animated filtering or any other ordered grid content.
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/helpers/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
<div class="u-cubeportfolio">
<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>
<div class="cbp"
data-controls="#filterControls"
data-animation="quicksand"
data-x-gap="15"
data-y-gap="15"
data-media-queries='[
{"width": 1500, "cols": 4},
{"width": 1100, "cols": 4},
{"width": 800, "cols": 3},
{"width": 480, "cols": 2},
{"width": 300, "cols": 1}
]'>
<div class="cbp-item rounded graphic">
<a class="cbp-caption" href="#">
<div class="cbp-caption-defaultWrap">
<img src="../assets/img/img39.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 u-text-light mb-0">
by Tiberiu Neamu
</p>
</div>
</div>
</div>
</a>
</div>
<div class="cbp-item rounded branding">
<a class="cbp-caption" href="#">
<div class="cbp-caption-defaultWrap">
<img src="../assets/img/img39.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 u-text-light mb-0">
by Tiberiu Neamu
</p>
</div>
</div>
</div>
</a>
</div>
<div class="cbp-item rounded abstract">
<a class="cbp-caption" href="#">
<div class="cbp-caption-defaultWrap">
<img src="../assets/img/img39.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">Easy Note</h4>
<p class="small u-text-light mb-0">
by Cosmin Capitanu
</p>
</div>
</div>
</div>
</a>
</div>
<div class="cbp-item rounded graphic illustration">
<a class="cbp-caption" href="#">
<div class="cbp-caption-defaultWrap">
<img src="../assets/img/img39.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 u-text-light mb-0">
by Cosmin Capitanu
</p>
</div>
</div>
</div>
</a>
</div>
<div class="cbp-item rounded graphic illustration">
<a class="cbp-caption" href="#">
<div class="cbp-caption-defaultWrap">
<img src="../assets/img/img39.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 u-text-light mb-0">
by Cosmin Capitanu
</p>
</div>
</div>
</div>
</a>
</div>
<div class="cbp-item rounded branding">
<a class="cbp-caption" href="#">
<div class="cbp-caption-defaultWrap">
<img src="../assets/img/img39.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 u-text-light mb-0">
by Tiberiu Neamu
</p>
</div>
</div>
</div>
</a>
</div>
</div>
</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 | Description |
---|---|
|
Defines the container for the filter. The value is the item ID. |
|
Defines the layout mode. The following values are available:
|
|
Defines the spacing between the elements on the left and right. |
|
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.
Example:
|
Official Documentation
For more detailed information, see the official documentation: Cubeportfolio documentation.