Skip to main content

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

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

data-is-auto

true or false Autoplay the slider. Option available only for data-layout="slider"

data-auto-timeout

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"

data-is-auto-pause-on-hover

true or false Stops autoplay when user hover the slider. Option available only for data-layout="slider"

data-is-show-navigation

true or false Show 'next' and 'prev' buttons for slider. Option available only for data-layout="slider"

data-is-show-pagination

true or false Show pagination for slider. Option available only for data-layout="slider"

data-is-rewind-nav

true or false Enable slide to first item (last item). Option available only for data-layout="slider"

data-is-scroll-by-page

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.