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

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