Cubeportfolio

Showcase your latest works with a jQuery grid plugin that provides powerful portfolio system, beautiful animated filtering or any other ordered grid content.

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

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

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

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',
        filters: '#filterControls'
      });
    });
  });
</script>
Copy

Basic example 

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

SCSS

SCSS-files of the component can be found here assets/scss/front/vendor/cubeportfolio/

JavaScript behavior

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

Attributes

By assigning a variable, you can call the standard methods of the plugin:

data-hs-cbp-options='{
   ...
}' - array
Copy

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

defaultFilter

 Default filter for plugin. Option available only for `layoutMode: 'grid' '*'

displayTypeSpeed

 Defines the speed of displaying the items (when displayType: 'default' this option will have no effect) 100

sortByDimension

 Filter the items by dimension (bigger to smallest) if there are gaps in grid. Option available only for `layoutMode: 'mosaic' true

lightboxGallery

 Enable / disable gallery mode for lightbox popup true

singlePageInlineInFocus

 Push the open panel in focus and at close go back to the former stage true

singlePageDeeplinking

 Enable / disable the deeplinking feature for singlePage popup true

singlePageStickyNavigation

 Enable / disable the sticky navigation for singlePage popup true

gridAdjustment

 Adjust the layout grid. For more information, see Cubeportfolio documentation 'responsive'

displayType

 The plugin will display his content based on the following value. For more information, see Cubeportfolio documentation 'sequentially'

singlePageInlinePosition

 Define the position of singlePage Inline block 'below'

lightboxTitleSrc

 Attribute of the delegate item that contains caption for lightbox 'data-title'

lightboxDelegate

 Define any clickable elements you wish to use to trigger lightbox popup on click '.cbp-lightbox'

singlePageInlineDelegate

 Define any clickable elements you wish to use to trigger singlePageInline popup on click '.cbp-singlePageInline'

singlePageDelegate

 Define any clickable elements you wish to use to trigger singlePage popup on click '.cbp-singlePage'

lightboxCounter

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

appendItems

 Public API 
'<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>'
Copy

singlePageCounter

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

mediaQueries

 Define `media queries` for columns layout. For more information, see Cubeportfolio documentation 
mediaQueries: [{
  width: 1500,
  cols: 3
}, {
  width: 1100,
  cols: 3
}, {
  width: 800,
  cols: 3
}, {
  width: 480,
  cols: 2,
  options: {
    caption: '',
    gapHorizontal: 10,
    gapVertical: 10
  }
}]
Copy

caption

 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'