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