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.
Copy-paste the following <script>
near the end of your pages under JS Implementing Plugins to enable it.
Copy-paste the following <script>
near the end of your pages under JS MyTravel to enable it.
Copy-paste the init function under JS Plugins Init., before the closing </body>
tag, to enable it.
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 |
---|---|---|
|
string that represent the elements in the document (DOM selector) | Defines the container for the filter. The value is the item ID. |
|
|
Defines the layout mode. The following values are available: |
|
only integers (e.g. 1, 5, 10) | Defines the spacing between the elements on the left and right. |
|
only integers (e.g. 1, 5, 10) | Defines the spacing between the elements on the top and bottom. |
|
|
Defines the effects of appearance, as well as the sorting of elements. The following values are available: |
|
|
The appearance effect for the description. The following values are available: |
|
|
Responsive breakpoint values. Allows you to change some rules on the resolution specified in the first item of the object. |
|
string that represent the elements in the document (DOM selector) | Define the wrapper for loadMore |
|
'click' or 'auto' | How the loadMore functionality should behave. Load on click on the button or automatically when you scroll the page |
|
only integers (e.g. 2, 3, 10) | How many items to load when a loadMore action is triggered |