Cubeportfolio

Showcase your latest works with 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 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