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

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

JavaScript behavior

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

data-controls

string that represent the elements in the document (DOM selector) Defines the container for the filter. The value is the item ID.

data-layout

  • grid
  • slider
  • masonry
  • mosaic
Defines the layout mode. The following values are available:

data-x-gap

only integers (e.g. 1, 5, 10) Defines the spacing between the elements on the left and right.

data-y-gap

only integers (e.g. 1, 5, 10) Defines the spacing between the elements on the top and bottom.

data-animation

  • fadeOut
  • quicksand
  • bounceLeft
  • bounceTop
  • bounceBottom
  • moveLeft
  • slideLeft
  • fadeOutTop
  • sequentially
  • skew
  • slideDelay
  • rotateSides
  • flipOutDelay
  • flipOut
  • unfold
  • foldLeft
  • scaleDown
  • scaleSides
  • frontRow
  • flipBottom
  • rotateRoom
Defines the effects of appearance, as well as the sorting of elements. The following values are available:

data-caption-animation

  • pushTop
  • pushDown
  • revealBottom
  • revealTop
  • revealLeft
  • moveRight
  • overlayBottom
  • overlayBottomPush
  • overlayBottomReveal
  • overlayBottomAlong
  • overlayRightAlong
  • minimal
  • fadeIn
  • zoom
  • opacity
The appearance effect for the description. The following values are available:

data-media-queries

  • {"width": 1500, "cols": 4},
  • {"width": 1100, "cols": 4},
  • {"width": 800, "cols": 3},
  • {"width": 480, "cols": 2},
  • {"width": 300, "cols": 1}
Responsive breakpoint values. Allows you to change some rules on the resolution specified in the first item of the object.

data-load-more-selector

string that represent the elements in the document (DOM selector) Define the wrapper for loadMore

data-load-more-action

'click' or 'auto' How the loadMore functionality should behave. Load on click on the button or automatically when you scroll the page

data-load-more-amount

only integers (e.g. 2, 3, 10) How many items to load when a loadMore action is triggered
Contact Us