Options & settings

Foliodot options and settings presented as full javascript configuration file or configuration object

Displayed settings below are default values along with custom examples for particular option.

Hint:
- Click on code line to expand more details.
- Refresh page to reload default values for all settings. 
;(function( FOLIO, undefined ) {
    'use strict';

    FOLIO.config = {

FOLIO.init({

Description

Foliodot configuration object definition.

Examples

Usage

Learn more configuration file and configuration object

project : {

Description

Configuration object for project section.

transition : 'left',

Syntax

transition : 'name'

Description

Default project page transition type. Reefers to name of transition defined in transitions object.

Values

right, left, up, down, fade, scale, none

If transition name passed as string is incorrect or such transition is not defined, default transition apply.

views : 'normal contain cover', 
views : 'cover normal contain', 
views : 'cover normal', 
views : 'normal',

Examples

Syntax

views : 'normal || contain || cover'

Description

List of available views/sizes for single photo page visitor is able to cycle through by views button.

Values

  • normal - default photo size.
  • contain - photo fits to page container.
  • cover - photo covers whole page container.

Usage

  • Set values as space separated string
  • At least one value must be present
  • Order of appearance dictate priority
buttonSection  : 'thumbnails',

buttonSection  : 'icon',

buttonSection  : '<div class="ui button button-section"><span>{{label}}</span></div>',

buttonSection  : false,

Examples

Syntax

buttonSection : 'label' | 'icon' | '<html>' | true | false

Description

Switch to thumbnails section.

Values

  • 'label' — define button's label (default value is 'thumbnails')
  • 'icon' — set SVG icon as button
  • '<html>' — pass html string to define new button html template
  • true — include previously removed button
  • false — remove button

Usage

  • Button is included in project section by default
  • Button is not included if thumbnails section is disabled
buttonPrevious : 'prev', 
buttonPrevious : 'icon', 
buttonPrevious : '<div class="ui ui-button ui-button-prev" title="Previous page (&leftarrow;)"><span>{{label}}</span></div>', 
buttonPrevious : false,

Examples

Syntax

buttonPrevious : 'label' | 'icon' | '<html>' | true | false

Description

Navigate to previous project page

Values

  • 'label' — define button's label
  • 'icon' — set SVG icon for button
  • 'html string' — define button html template
  • true — include previously removed button
  • false — remove button

Usage

  • Button is included in project section by default.
  • pass false to remove button from project section
buttonNext     : 'next', 
buttonNext     : 'icon', 
buttonNext     : '<div class="ui ui-button ui-button-next" title="Next page (&rightarrow;)"><span>{{label}}</span></div>', 
buttonNext     : false,

Examples

Syntax

buttonNext : 'label' | 'icon' | 'html-string' | true | false

Description

Navigate to the next project page.

Values

  • 'label' — define button's label
  • 'icon' — set SVG icon for button
  • 'html string' — define button's html template
  • true — include previously removed button
  • false — remove button

Usage

  • Button is included in project section by default.
  • pass false to remove button from project section
buttonViews    : '<div class="ui ui-button ui-button-views" title="Toggle photo view (v)"><span>{{label}}</span></div>',

buttonViews    : false,

Examples

Syntax

buttonViews : 'html-string' | true | false

Description

Cycle through photo views defined in views setting

Values

  • html string to define button html template where {{label}} variable is next view, or
  • true — include previously removed button
  • false — remove button

Usage

  • Button is included in project section by default if more then one view is defined in views setting
  • Button is available on screen only for single photo project pages
buttonClose    : 'close'

buttonClose    : 'icon'

buttonClose    : '<div class="ui-button ui-button-close" title="Close page (Esc)">{{label}}</div>'
buttonClose    : false

Examples

Syntax

buttonClose : 'label' | 'icon' | '<html>' | true | false

Description

Closes hidden project page.

Values

  • 'label' — define button's label (default value is '×')
  • 'icon' — set SVG icon for button
  • '<html>' — pass html string to define new button html template
  • true — include previously removed button
  • false — remove button

Usage

  • Available only for hidden pages
  • Button is inserted within hidden page
  • If project doesn't contain hidden pages, button will not be generated
pagination     : '<ul class="ui pagination horizontal">@@<li><a><span class="dot"></span></a></li>@@</ul>',

pagination     : false,

pagination     : 'vertical',

Examples

Syntax

pagination : '<html>' | 'vertical' | 'horizontal' | true | false

Description

Navigate to the particular project page.

Values

Pagination accept one of the following values:

  • '<html>' string to define pagination html template
    • html string within @@ will be looped
  • 'horizontal' — horizontal pagination orientation (default)
  • 'vertical' — vertical pagination orientation
  • true — include previously removed pagination
  • false — remove pagination

Usage

  • Pagination is included in project section by default
  • Pagination is hidden on smaller screens via default CSS
  • pass false to remove pagination from project section
enumeration    : '<div class="enumeration">{{current}} / {{total}}</div>'
enumeration    : false

Examples

Syntax

enumeration : 'html-string' | true | false

Description

Current page indicator in project section

Values

  • Pass custom html code to define enumeration
    • use variable {{current}} for current page index
    • use variable {{total}} for number of total page
  • true — include previously removed enumeration
  • false — remove enumeration

Usage

  • Enumeration is hidden in project section by default
  • Enumeration is visible on smaller screens via default CSS
  • pass false to enumeration from project section
hiddenPages    : true
hiddenPages    : false

Examples

Syntax

hiddenPages : true | false

Description

Hide inner pages from the main project flow.

Values

  • true
  • false

Usage

  • Use hidden pages for content not directly related to your portfolio project — navigation menu, newsletter/contact form, social share widgets etc.
  • Pass false to disable hidden pages
    },
    
thumbnails : {

Description

Configuration object for thumbnails section.

grid : '4x2', 
grid : '3x3', 
grid : '5xall',

Examples

Syntax

grid : 'rows x columns'

Description

Grid (rows x columns) distribution of thumbnails per page.

Values

  • rows x columns
  • Set columns to 'all' to include all thumbnails on single page

Usage

  • Grid setting determines the total number of pages in thumbnails section. 
size : '240x180', 
size : '200x200',

Examples

Syntax

size : '<width> x <height>'

Description

Defines the maximum size (in pixels) of the thumb image content box.

Values

  • <width> — width of thumb image content box in pixels
  • <height> — height of thumb image content box in pixels

Usage

  • By defining the size you are also defining the format of content box
  • This option along with fit enables versatile thumbnail presentation.
  • This is the maximum allowed size. Actual size values can be smaller but aspect ratio (format) will be preserved.
  • Size is affected by width of browser window, grid settings etc...
fit : 'cover', 
fit : 'contain',

Examples

Syntax

fit : 'cover' | 'contain'

Description

Defines how thumb image responds to the width and height of its content box.

Values

  • cover — thumb image is scaled to cover (fill) all available space preserving aspect ratio.
  • contain — thumb image is scaled to fit within content box preserving it's aspect ratio.

Usage

  • Thumb image content box size is determined by size option.
transition : 'left',

Syntax

transition : (string)

Default thumbnails page transition type. Reefers to name of transition defined in transitions object.

If transition name passed as string is incorrect or such transition is not defined, default transition apply.

buttonSection  : 'project',

buttonSection  : 'icon',

buttonSection  : '<div class="ui button button-grid"><span>{{label}}</span></div>',

buttonSection  : false,

Examples

Syntax

buttonSection : 'label' | 'icon' | '<html>' | true | false

Description

Switch to project section.

Values

  • 'label' — define button's label (default value is 'project')
  • 'icon' — set SVG icon for button
  • '<html>' — pass html string to define new button html template
  • true — include previously removed button
  • false — remove button

Usage

  • Button is included in thumbnails section by default
  • Button is not included if thumbnails section is disabled
buttonPrevious : 'prev', 
buttonPrevious : 'icon', 
buttonPrevious : '<div class="ui ui-button ui-button-prev" title="Previous page (&leftarrow;)"><span>{{label}}</span></div>', 
buttonPrevious : false,

Examples

Syntax

buttonNext : 'label' | 'icon' | 'html-string' | true | false

Description

Navigate to previous thumbnails page.

Values

  • 'label' — define button label
  • 'icon' — set SVG icon for button
  • 'html string' — define button html template
  • true — include previously removed button
  • false — remove button

Usage

  • Button is included in thumbnails section by default.
  • pass false to remove button from thumbnails section
buttonNext     : 'next', 
buttonNext     : 'icon', 
buttonNext     : '<div class="ui ui-button ui-button-next" title="Next page (&rightarrow;)"><span>{{label}}</span></div>', 
buttonNext     : false,

Examples

Syntax

buttonNext : 'label' | 'icon' | 'html-string' | true | false

Description

Navigate to the next thumbnails page.

Values

  • 'label' — to define button label
  • 'icon' — set SVG icon for button
  • 'html string' — define button html template
  • true — include previously removed button
  • false — remove button

Usage

  • Button is included in thumbnails section by default.
  • pass false to remove button from thumbnails section
pagination     : '<ul class="ui pagination horizontal">@@<li><a><span class="dot"></span></a></li>@@</ul>',

pagination     : false,

pagination     : 'vertical,

Examples

Syntax

pagination : '<html>' | 'vertical' | 'horizontal' | true | false

Description

Navigate to the particular thumbnails page.

Values

Pagination accept one of the following values:

  • '<html>' string to define pagination html template
    • html string within @@ will be looped
  • 'horizontal' — horizontal pagination orientation (default)
  • 'vertical' — vertical pagination orientation
  • true — include previously removed pagination
  • false — remove pagination

Usage

  • Pagination is included in thumbnails section by default
  • Pagination is hidden on smaller screens via default CSS
  • pass false to remove pagination from thumbnails section
enumeration    : '<div class="enumeration">{{current}} / {{total}}</div>'
enumeration    : false

Examples

Syntax

enumeration : 'html-string' | true | false

Description

Current page indicator in thumbnails section

Values

  • Pass custom html code to define enumeration.
    • use variable {{current}} for current page index
    • use variable {{total}} for number of total page
  • true — include previously removed enumeration
  • false — remove enumeration

Usage

  • Enumeration is hidden in thumbnails section by default
  • Enumeration is visible on smaller screens via default CSS
  • pass false to enumeration from thumbnails section
    },
    
align : 'left',
align : 'top',

Examples

Syntax

align : 'position'

Description

Set sidebar align within web page

Values

  • left
  • right
  • top
  • bottom

Usage

  • If your sidebar has lot of content, consider using left or right sidebar position.
hidden : true
hidden : false

Examples

Syntax

hidden : true | false

Description

Set initial sidebar visibility upon web page load

Values

  • false — sidebar is visible (opened)
  • true — sidebar is hidden (closed)

Usage

  • Sidebar is hidden (closed) by default
  • If hidden is set to true initial visibility apply only is screen device width is 800+ pixels
buttonToggle : 'menu',

buttonToggle : 'icon',

buttonToggle : '<div class="ui ui-button ui-button-toggle" title="Toggle menu (m)"><span>{{label}}</span></div>', 
buttonToggle : false,

Examples

Syntax

buttonToggle : 'label' | 'icon' | '<html>' | true | false

Description

Toggle sidebar section of the web page.

Values

  • 'label' — define button's label (default value is 'menu')
  • 'icon' — set SVG icon for button
  • '<html>' — pass html string to define new button html template
  • true — include previously removed button
  • false — remove button

Usage

  • Button is inserted to web page only if sidebar section is present (defined with aside element)
buttonClose : '×'

buttonClose : 'icon'

buttonClose : '<div class="ui-button ui-button-close" title="Close menu (m)">{{label}}</div>'
buttonClose : false

Examples

Syntax

buttonClose : 'label' | 'icon' | '<html>' | true | false

Description

Closes sidebar section of the web page.

Values

  • 'label' — define button's label (default value is '×')
  • 'icon' — set SVG icon for button
  • '<html>' — pass html string to define new button html template
  • true — include previously removed button
  • false — remove button

Usage

  • Button is inserted in sidebar section
  • Sidebar can be closed with buttonToggle also.
},
                
content : {

Description

General foliodot content configuration object

transition : 'up',

Syntax

transition : 'name'

Description

Type of transition between project and thumbnails section. Reefers to name of transition defined in transitions object.

Values

'right', 'left', 'up' (default), 'down', 'fold-down', 'fold-right', 'fold-left', 'fold-up', 'fold-down', 'fade', 'scale', 'none'

If transition name passed as string is incorrect or such transition is not defined, default transition apply.

inactivity : false,

Syntax

inactivity : integer | true | false

Description

Detect mouse/touch inactivity after defined period of time. If inactivity is detected 'on-inactive' class is added to body element and user interface is hidden.

Values

  • false — inactivity disabled (default value)
  • true — enable inactivity
  • 3 — enable inactivity and pass duration value (default value is 3 seconds)
error404 : '404.html'
error404 : 'page-not-found.html'
error404 : 'http://website.com/upss.html'

Examples

Syntax

error404 : 'url string'

Description

Default error page used by foliodot router in case requested web page or inner page don't exist.

Values

  • 'url string' — absolute or relative url to error page
gestures : true
gestures : false

Examples

Syntax

gestures : true | false

Description

Enable swipe gesture navigation through project and thumbnails inner pages. Only horizontal swipe (left/right) gesture is supported.

Values

  • true — force swipe navigation for all devices
  • false — disable swipe navigation
mouseWheel : true
mouseWheel : false

Examples

Syntax

mouseWheel : true | false

Description

Enable mouse wheel (or trackpad) navigation through project and thumbnails inner pages.

Values

  • true — use mouse wheel navigation
  • false — disable mouse wheel navigation
ui : 'text'
ui : 'icon'

Examples

Syntax

ui : 'string'

Description

Define global type of UI buttons.

Values

  • 'icon' — UI buttons with SVG icons
  • 'text' — UI buttons as text

Usage

  • Applies to all buttons in project, thumbnails and sidebar section
  • You can override this global setting with particular button settings 
},
            
transitions : {

Description

Configuration object to define new page/section transitions.

List of available transitions

'right', 'left', 'up', 'down', 'fold-down', 'fold-right', 'fold-left', 'fold-up', 'fold-down', 'fade', 'scale', 'left-scale', 'right-scale', up-scale', 'down-scale', 'scale-left', 'scale-right', scale-up', 'scale-down', ,'none' 

fade : {
    from : { autoAlpha : 0 },
    to   : { autoAlpha : 1 },
    out  : { autoAlpha : 0 }
}

scale : {
    from: { scale: 1.25,  transformOrigin:"center",  autoAlpha : 0},
    to  : { scale: 1,     transformOrigin:"center",  autoAlpha : 1},
    out : { scale: 0.65,  transformOrigin:"center",  autoAlpha : 0}
}

left : {
    from: { xPercent:100 },
    to  : { xPercent:0  },
    out : { xPercent:-100 }
}

myTransition : {
    from : { ... },
    to   : { ... },
    out  : { ... }
},
anotherTransition : {
    from : { ... },
    to   : { ... },
    out  : { ... }
}

Examples:

Syntax

transitionName : object

},
    
email : {

Description

Anti spam email object

text    : 'email me' ,
address : 'name@somedomain.com'
text    : 'Email Us' ,
address : 'name@somedomain.com',
subject : 'Hey...',
body    : 'What you have to say'

Examples

Description

  • text — email label string
  • address — email address string
  • subject — subject line once (optional)
  • body — email body text once (optional)

Usage

Set custom html attribute email to any element. Foliodot template engine will convert it to standard email link (mailto).

},
    
key : {

Description

Configuration object for keyboard shortcuts.

close   : 'esc',
next    : 'right',
prev    : 'left',
first   : 'home',
last    : 'end',
sidebar : 'm',
views   : 'v' 
next  : 'j',
prev  : 'k'

Examples

Syntax

KEY : 'key'

Description

Set custom keyboard shortcuts:

  • close — toggle between project/thumbnail section
  • next — go to next page (project or thumbnails)
  • prev — go to previous page (project or thumbnails)
  • first — go to first page (project or thumbnails)
  • last — go to last page (project or thumbnails)
  • sidebar — toggle sidebar (open/close)
  • views — cycle through image views (normal, fit or cover)

Values

  • Special keys: backspace, tab, enter, return, capslock, esc, escape, space, pageup, pagedown, end, home, left, up, right, down, ins, del, and plus.
  • or reference the key by name

Usage

  • Keyboard shortcuts are enabled by default
    },
    
    }; // End of FOLIO.config object
}( window.FOLIO = window.FOLIO || {} ));

    }); // End of FOLIO.init();

× × ×

Learn next: Introduction