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 Space 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
- All
- Branding
- Abstract
- Graphic
- Illustration
Remind me more
by Tiberiu Neamu
Workout buddy
by Tiberiu Neamu
Easy note
by Cosmin Capitanu
<!-- Cubeportfolio -->
<div class="u-cubeportfolio">
<!-- Filter -->
<ul id="filterControls" class="list-inline cbp-l-filters-alignCenter mb-5">
<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-controls="#filterControls"
data-animation="quicksand"
data-caption-animation="zoom"
data-x-gap="30"
data-y-gap="30"
data-media-queries='[
{"width": 1500, "cols": 3},
{"width": 1100, "cols": 3},
{"width": 800, "cols": 3},
{"width": 580, "cols": 2},
{"width": 300, "cols": 1}
]'>
<!-- Item -->
<div class="cbp-item graphic">
<div class="cbp-caption">
<div class="cbp-caption-defaultWrap">
<img src="../assets/img/img41.jpg" alt="Image Description">
</div>
<div class="cbp-caption-activeWrap">
<div class="cbp-l-caption-alignCenter d-flex align-items-end">
<ul class="list-inline ml-auto p-3 mb-0">
<li class="list-inline-item">
<a class="u-icon u-icon--primary rounded-circle" href="../../html/portfolio/single-page-simple.html">
<span class="fa fa-link u-icon__inner"></span>
</a>
</li>
<li class="list-inline-item">
<a class="cbp-lightbox u-icon u-icon--primary rounded-circle" href="../assets/img/img41-lg.jpg">
<span class="fa fa-images u-icon__inner"></span>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="p-4">
<h2 class="h5 mb-0">Remind me more</h2>
<p class="small mb-0">by Tiberiu Neamu</p>
</div>
</div>
<!-- End Item -->
<!-- Item -->
<div class="cbp-item branding">
<div class="cbp-caption">
<div class="cbp-caption-defaultWrap">
<img src="../assets/img/img41.jpg" alt="Image Description">
</div>
<div class="cbp-caption-activeWrap">
<div class="cbp-l-caption-alignCenter d-flex align-items-end">
<ul class="list-inline ml-auto p-3 mb-0">
<li class="list-inline-item">
<a class="u-icon u-icon--primary rounded-circle" href="../../html/portfolio/single-page-simple.html">
<span class="fa fa-link u-icon__inner"></span>
</a>
</li>
<li class="list-inline-item">
<a class="cbp-lightbox u-icon u-icon--primary rounded-circle" href="../assets/img/img42-lg.jpg">
<span class="fa fa-images u-icon__inner"></span>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="p-4">
<h3 class="h5 mb-0">Workout buddy</h3>
<p class="small mb-0">by Tiberiu Neamu</p>
</div>
</div>
<!-- End Item -->
<!-- Item -->
<div class="cbp-item abstract">
<div class="cbp-caption">
<div class="cbp-caption-defaultWrap">
<img src="../assets/img/img41.jpg" alt="Image Description">
</div>
<div class="cbp-caption-activeWrap">
<div class="cbp-l-caption-alignCenter d-flex align-items-end">
<ul class="list-inline ml-auto p-3 mb-0">
<li class="list-inline-item">
<a class="u-icon u-icon--primary rounded-circle" href="../../html/portfolio/single-page-simple.html">
<span class="fa fa-link u-icon__inner"></span>
</a>
</li>
<li class="list-inline-item">
<a class="cbp-lightbox u-icon u-icon--primary rounded-circle" href="../assets/img/img43-lg.jpg">
<span class="fa fa-images u-icon__inner"></span>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="p-4">
<h4 class="h5 mb-0">Easy note</h4>
<p class="small mb-0">by Cosmin Capitanu</p>
</div>
</div>
<!-- End Item -->
</div>
<!-- End Content -->
</div>
<!-- End Cubeportfolio -->
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 |
|
true or false | Autoplay the slider. Option available only for data-layout="slider" |
|
only integers (ex: 1000, 2000, 5000) | Autoplay interval timeout. Time is set in milliseconds. 1000 milliseconds equals 1 second. Option available only for data-layout="slider" |
|
true or false | Stops autoplay when user hover the slider. Option available only for data-layout="slider" |
|
true or false | Show 'next' and 'prev' buttons for slider. Option available only for data-layout="slider" |
|
true or false | Show pagination for slider. Option available only for data-layout="slider" |
|
true or false | Enable slide to first item (last item). Option available only for data-layout="slider" |
|
true or false | Scroll by page and not by item. This option affect next/prev buttons and drag support. Option available only for data-layout="slider" |
Official Documentation
For more detailed information, see the official documentation: Cubeportfolio documentation.