Portfolio

AppStrap comes with a tonne of portfolio options including inline ajax, ajax modals, dynamic filtering of projects, standalone project pages and more.

Setup

Start with the following HTML markup and simply update the data-settings='{}' JSON from the "Configuration options" block below. Full live preview is coming soon.

Further documentation can be found in the theme/assets/plugins/cubeportfolio-jquery-plugin/documentation/index.html file.

Caption that is active on hover

Caption that is active on hover

Caption that is active on hover

<div class="fade" data-bs-toggle="cbp" data-settings='{}'>
  <!-- Item 1 -->
  <div class="cbp-item">
    <div class="cbp-caption">
      <div class="cbp-caption-defaultWrap">
        <img src="path/to/img" alt="" width="100%">
      </div>
      <div class="cbp-caption-activeWrap">
        <h1>
          Caption that is active on hover
        </h1>
      </div>
    </div>
  </div>
  <!-- Item 2 -->
  <div class="cbp-item">
    <div class="cbp-caption">
      <div class="cbp-caption-defaultWrap">
        <img src="path/to/img" alt="" width="100%">
      </div>
      <div class="cbp-caption-activeWrap">
        <h1>
          Caption that is active on hover
        </h1>
      </div>
    </div>
  </div>
  <!-- Item 3 -->
  <div class="cbp-item">
    <div class="cbp-caption">
      <div class="cbp-caption-defaultWrap">
        <img src="path/to/img" alt="" width="100%">
      </div>
      <div class="cbp-caption-activeWrap">
        <h1>
          Caption that is active on hover
        </h1>
      </div>
    </div>
  </div>
</div>

Configuration options

Name Values Default Description
filters string that represent the elements in the document (DOM selector) '' Define the wrapper for filters
loadMore - - This options is deprecated. Please use plugins.loadMore.element option instead
loadMoreAction - - This options is deprecated. Please use plugins.loadMore.action option instead
search string that represent the elements in the document (DOM selector) '' Define the search input element
layoutMode 'grid', 'mosaic' or 'slider' 'grid' Layout Mode for this plugin
sortByDimension true or false false Filter the items by dimension (bigger to smallest) if there are gaps in grid. Option available only for `layoutMode: 'mosaic'`
drag true or false true Mouse and touch drag support. Option available only for `layoutMode: 'slider'`
auto true or false false Autoplay the slider. Option available only for `layoutMode: 'slider'`
autoTimeout only integers (ex: 1000, 2000, 5000) 5000 Autoplay interval timeout. Time is set in milliseconds. 1000 milliseconds equals 1 second. Option available only for `layoutMode: 'slider'`
autoPauseOnHover true or false true Stops autoplay when user hover the slider. Option available only for `layoutMode: 'slider'`
showNavigation true or false true Show `next` and `prev` buttons for slider. Option available only for `layoutMode: 'slider'`
showPagination true or false true Show pagination for slider. Option available only for `layoutMode: 'slider'`
rewindNav true or false true Enable slide to first item (last item). Option available only for `layoutMode: 'slider'`
scrollByPage true or false true Scroll by page and not by item. This option affect next/prev buttons and drag support. Option available only for `layoutMode: 'slider'`
defaultFilter strings that represent the filter name(e.g. '*', '.logo', '.web-design', '.design') '*' Default filter for plugin. Option available only for `layoutMode: 'grid'`
filterDeeplinking true or false false Enable / disable the deeplinking feature when you click on filters. Option available only for `layoutMode: 'grid'`
animationType 'fadeOut'
'quicksand'
'bounceLeft'
'bounceTop'
'bounceBottom'
'moveLeft'
'slideLeft'
'fadeOutTop'
'sequentially'
'skew'
'slideDelay'
'3d' Flip
'rotateSides'
'flipOutDelay'
'flipOut'
'unfold'
'foldLeft'
'scaleDown'
'scaleSides'
'frontRow'
'flipBottom'
'rotateRoom' 		'fadeOut' Defines which animation to use for items that will be shown or hidden after a filter has been activated. The plugin uses the best browser features available (CSS3 transitions and transform, GPU acceleration) Option available only for `layoutMode: 'grid'`
gridAdjustment 'default'
'alignCenter'
'responsive' 		'responsive' Adjust the layout grid.
- default (no adjustment applied)
- alignCenter (align the grid on center of the page)
- responsive (use a fluid grid to resize the grid)
mediaQueries - array of objects of format: [{width: a, cols: d}, {width: b, cols: e}]
- you can define as many objects as you want
- if this option is `false` Cube Portfolio will adjust the items width automatically (default option for backward compatibility) 		false Define `media queries` for columns layout.
Format: [{width: a, cols: d}, {width: b, cols: e}, {width: c, cols: f}], where a, b, c are the grid width and d, e, f are the columns displayed. e.g. [{width: 1440, cols: 5}, {width: 1024, cols: 4}, {width: 768, cols: 3}, {width: 480, cols: 2}, {width: 320, cols: 1}] means:
if (gridWidth >= 1440) => show 5 columns,
if (gridWidth >= 1024 && gridWidth < 1440) => show 4 columns,
if (gridWidth >= 768 && gridWidth < 1024) => show 3 columns,
if (gridWidth >= 480 && gridWidth < 768) => show 2 columns,
if (gridWidth >= 320 && gridWidth < 480) => show 1 columns,
if (gridWidth < 320) => show 1 columns
Keep in mind that a > b > c
This option is available only when `gridAdjustment: 'responsive'`
gapHorizontal only integers (e.g. 1, 5, 10) 10 Horizontal gap between items
gapVertical only integers (e.g. 1, 5, 10) 10 Vertical gap between items
caption 'pushTop'
'pushDown'
'revealBottom'
'revealTop'
'revealLeft'
'moveRight'
'overlayBottom'
'overlayBottomPush'
'overlayBottomReveal'
'overlayBottomAlong'
'overlayRightAlong'
'minimal'
'fadeIn'
'zoom'
'opacity' 		'pushTop' Caption - the overlay that is shown when you put the mouse over an item.
NOTE: If you don't want to have captions set this option to an empty string (e.g. caption: '')
displayType 'default'
'bottomToTop'
'fadeIn'
'fadeInToTop'
'sequentially' 		'fadeIn' The plugin will display his content based on the following values.
- default (the content will be displayed without any animation)
- fadeIn (e.g. lazyLoading) (the plugin will fully preload the images before displaying the items with a fadeIn effect)
- fadeInToTop - fadeInToTop (the plugin will fully preload the images before displaying the items with a fadeIn effect from bottom to top)
- sequentially (the plugin will fully preload the images before displaying the items with a sequentially effect)
- bottomToTop (the plugin will fully preload the images before displaying the items with an animation from bottom to top)
displayTypeSpeed only integers, values in ms (e.g. 200, 300, 500) 400 Defines the speed of displaying the items (when displayType: 'default' this option will have no effect)
lightboxDelegate strings that represent the elements in the document (DOM selector) '.cbp-lightbox' Define any clickable elements you wish to use to trigger lightbox popup on click.
lightboxGallery true or false true Enable / disable gallery mode for lightbox popup
lightboxTitleSrc HTML atributte 'data-title' Attribute of the delegate item that contains caption for lightbox
lightboxShowCounter - - This options is deprecated. Please use lightboxCounter option instead
lightboxCounter HTML markup code '<div class="cbp-popup-lightbox-counter"> of </div>' Markup of the lightbox counter. To hide the counter for lightbox put this option to an empty string (e.g. '')
singlePageDelegate strings that represent the elements in the document (DOM selector) '.cbp-singlePage' Define any clickable elements you wish to use to trigger singlePage popup on click.
singlePageDeeplinking true or false true Enable / disable the deeplinking feature for singlePage popup
singlePageStickyNavigation true or false true Enable / disable the sticky navigation for singlePage popup
singlePageShowCounter - - This options is deprecated. Please use singlePageCounter option instead
singlePageCounter HTML markup code '<div class="cbp-popup-singlePage-counter"> of </div>' Markup of the singlePage counter. To hide the counter for singlePage put this option to an empty string (e.g. '')
singlePageAnimation 'left'
'fade'
'right' 		'left' Defines which animation to use when singlePage appear
singlePageCallback function(url, element) {
// to update singlePage content use the following method: this.updateSinglePage(yourContent)
} 		null Use this callback to update singlePage content. The callback will trigger after the singlePage popup is open. (@param url = the href attribute of the item clicked, @param element = the item clicked)
singlePageInlineDeeplinking true or false false Enable / disable the deeplinking feature for singlePageInline
singlePageInlineDelegate strings that represent the elements in the document (DOM selector) '.cbp-singlePageInline' Define any clickable elements you wish to use to trigger singlePageInline popup on click.
singlePageInlinePosition 'above'
'below'
'top'
'bottom' 		'top' Define the position of singlePage Inline block
singlePageInlineInFocus true or false true Push the open panel in focus and at close go back to the former stage
singlePageInlineCallback function(url, element) {
// to update singlePage Inline content use the following method: this.updateSinglePageInline(yourContent)
} 		null Use this callback to update singlePage content. The callback will trigger after the singlePage popup is open. (@param url = the href attribute of the item clicked, @param element = the item clicked)
plugins.loadMore.element string that represent the elements in the document (DOM selector) '' Define the wrapper for loadMore
plugins.loadMore.action 'click' or 'auto' 'click' How the loadMore functionality should behave. Load on click on the button or automatically when you scroll the page
plugins.loadMore.loadItems only integers (e.g. 2, 3, 10) 3 How many items to load when you click on the loadMore button

Filter Options

Style 1: Simple links
All
X
/
web
X
/
identity
X
/
graphics
X
Style 3: Buttons
All
X
web
X
identity
X
graphics
X
Style 3: Buttons Flat
All
X
web
X
identity
X
graphics
X
Style 3: Dropdown
Filter items
All
X
web
X
identity
X
graphics
X

Awesome Features

Beginner + developer friendly
Free Lifetime Upgrades
Fully Responsive
Get AppStrap
About Us

Making the web a prettier place one template at a time! We make beautiful, quality, responsive Drupal & web templates!

Find out more
Contact Us

019223 8092344

info@themelize.me

Sunshine House, Sunville. SUN12 8LU.

Colour Options

AppStrap comes with 11 pre-defined colour options which are shown below.

You can easily switch colours doing one of the following:

  1. via the config colourScheme option
  2. or via ./src/scss/_variables.scss defining a preset colour or by defining your own.
Green Red Blue Purple Pink Orange Brown Slate Olive Teal Charcoal

Cookies are NOT enabled so colour selection is not persistent.

To main homepage

To admin homepage

To intro page