Spade
Mini Shell
| Directory:~$ /home/lmsyaran/public_html/j3/templates/g5_hydrogen/custom/particles/ |
| [Home] [System Details] [Kill Me] |
name: Slideshow Joomla
description: Display an image slideshow for Joomla Articles.
type: particle
icon: fa-joomla
form:
overrideable: false
fields:
enabled:
type: input.checkbox
label: Enabled
description: Globally enable to the particles.
default: true
_tabs:
type: container.tabs
fields:
_tab_articles:
label: Articles
overridable: false
fields:
article.filter.categories:
type: joomla.categories
label: Categories
description: Select the categories the articles should be
taken from.
overridable: false
article.filter.articles:
type: input.text
label: Articles
description: Enter the Joomla articles that should be shown.
It should be a list of article IDs separated with a comma (i.e.
1,2,3,4,5).
overridable: false
article.filter.featured:
type: select.select
label: Featured Articles
description: Select how Featured articles should be
filtered.
default: ''
options:
include: Include Featured
exclude: Exclude Featured
only: Only Featured
overridable: false
article.limit.total:
type: input.text
label: Number of Articles
description: Enter the maximum number of articles to
display.
default: 3
pattern: '\d{1,2}'
overridable: false
article.limit.start:
type: input.text
label: Start From
description: Enter offset specifying the first article to
return. The default is '0' (the first article).
default: 0
pattern: '\d{1,2}'
overridable: false
article.sort.orderby:
type: select.select
label: Order By
description: Select how the articles should be ordered by.
default: publish_up
options:
publish_up: Published Date
created: Created Date
modified: Last Modified Date
title: Title
ordering: Ordering
hits: Hits
id: ID
alias: Alias
overridable: false
article.sort.ordering:
type: select.select
label: Ordering Direction
description: Select the direction the articles should be
ordered by.
default: ASC
options:
ASC: Ascending
DESC: Descending
overridable: false
article_settings:
type: separator.note
class: alert alert-info
content: 'Display'
article.display.image.enabled:
type: select.select
label: Image
description: Select if and what image of the article should
be shown.
default: intro
options:
intro: Intro
full: Full
'': None
article.display.text.prepare:
type: input.checkbox
label: Prepare Content
description: Use Joomla Content Plugins
default: false
article.display.edit:
type: input.checkbox
label: Show Edit Link
description: Display a link to the article edit form
default: false
article.display.title.enabled:
type: select.select
label: Title
description: Select if the article title should be shown.
default: show
options:
show: Show
'': Hide
article.display.title.limit:
type: input.text
label: Title Limit
description: Enter the maximum number of characters the
article title should be limited to.
pattern: '\d+(\.\d+){0,1}'
article.display.text.type:
type: select.select
label: Article Text
description: Select if and how the article text should be
shown.
default: intro
options:
intro: Introduction
full: Full Article
'': Hide
article.display.text.limit:
type: input.text
label: Text Limit
description: Type in the number of characters the article
text should be limited to.
default: '200'
pattern: '\d+'
article.display.text.formatting:
type: select.select
label: Text Formatting
description: Select the formatting you want to use to display
the article text.
default: text
options:
text: Plain Text
html: HTML
note_slideshow:
type: separator.note
class: alert alert-info
content: 'Slideshow'
slideshow_height:
type: select.select
label: Height
description: The slideshow always takes up fullwidth and the
height will adapt automatically based on the defined ratio. Alternatively,
the height can adapt to the height or the viewport. Make sure, no height is
set in the section settings when using on of the viewport options.
default: auto
options:
auto: Auto
full: Viewport
percent: Viewport (Minus 20%)
section: Viewport (Minus the following section)
slideshow_ratio:
type: input.text
label: Ratio
description: Set a ratio. It's recommended to use the
same ratio of the background image. Just use its width and height, like
1600:900.
placeholder: '16:9'
slideshow_min_height:
type: input.number
label: Min Height
description: Use an optional minimum height to prevent the
slideshow from becoming smaller than its content on small devices. Min 200
Max 800
min: 200
max: 800
default: 300
slideshow_max_height:
type: input.number
label: Max Height
description: Set the maximum height. Min 500 Max 1600. This
option won't have any effect unless Height(Viewport modes) are
enabled.
min: 500
max: 1600
slideshow_text_color:
type: select.select
label: Text Color
description: Set light or dark color mode for text, buttons
and controls.
default: default
options:
default: None
light: Light
dark: Dark
box_shadow:
type: select.select
label: Box Shadow
description: Select the image's box shadow size.
default: none
options:
none: None
small: Small
medium: Medium
large: Large
xlarge: X-Large
extra_shadow:
type: input.checkbox
label: Extra Bottom Shadow
default: false
class:
type: input.selectize
label: CSS Classes
description: CSS class name for the particle.
extra:
type: collection.keyvalue
label: Tag Attributes
description: Extra Tag attributes.
key_placeholder: Key (data-*, style, ...)
value_placeholder: Value
exclude: ['id', 'class']
_tab_slideshow:
label: Control
overridable: false
fields:
slideshow_info:
type: separator.note
class: alert alert-info
content: 'Animation'
image_transition:
type: select.select
label: Transition
description: Select the transition between slideshow items.
default: default
options:
default: Slide
pull: Pull
push: Push
fade: Fade
scale: Scale
velocity:
type: input.number
label: Velocity
description: Set the velocity in pixels per milisecond. Min
20 Max 300
min: 20
max: 300
placeholder: 100
slideshow_autoplay:
type: input.checkbox
label: Autoplay
description: Enable autoplay for slideshow items.
default: false
slideshow_interval:
type: input.number
label: Interval
description: Set the autoplay interval in seconds. Min 5 Max
15.
min: 5
max: 15
placeholder: 7
slideshow_pause_onhover:
type: select.select
label: Pause On Hover
description: Pause autoplay on hover.
default: enabled
options:
enabled: Enable
disabled: Disable
image_kenburns:
type: select.select
label: Ken Burns Effect
description: Select the transformation origin for the Ken
Burns animation.
default: none
options:
none: None
top-left: Top Left
top-center: Top Center
top-right: Top Right
center-left: Center Left
center-center: Center Center
center-right: Center Right
bottom-left: Bottom Left
bottom-center: Bottom Center
bottom-right: Bottom Right
image_kenburns_duration:
type: input.number
label: Duration
description: Set the duration for the Ken Burns effect in
seconds.
min: 10
max: 30
placeholder: 15
navigation_info:
type: separator.note
class: alert alert-info
content: 'Navigation'
navigation:
type: select.select
label: Navigation
description: Select the navigation type.
default: dotnav
options:
none: None
dotnav: Dotnav
thumbnav: Thumbnav
navigation_below:
type: input.checkbox
label: Show Below Slideshow
description: Display the navigation below slideshow
default: false
vertical_navigation:
type: input.checkbox
label: Vertical Navigation
default: false
navigation_position:
type: select.select
label: Position
description: Select the position of the navigation (if
'Show below slideshow' is not selected.)
default: bottom-center
options:
top-left: Top Left
top-right: Top Right
center-left: Center Left
center-right: Center Right
bottom-left: Bottom Left
bottom-center: Bottom Center
bottom-right: Bottom Right
navigation_margin:
type: select.select
label: Margin
description: Apply a margin between the navigation and the
slideshow container.
default: medium
options:
none: None
small: Small
medium: Medium
large: Large
navigation_position_below:
type: select.select
label: Position Below
description: Align the navigation's items if the
navigation is below the slideshow.
default: center
options:
left: Left
center: Center
right: Right
navigation_margin_below:
type: select.select
label: Margin Below
description: Apply a margin between the navigation and the
slideshow container if the navigation is below the slideshow.
default: default
options:
small: Small
default: Default
medium: Medium
navigation_breakpoint:
type: select.select
label: Breakpoint
description: Display the navigation only on this device width
and larger.
default: s
options:
always: Always
s: Small (Phone Landscape)
m: Medium (Tablet Landscape)
l: Large (Desktop)
xl: X-Large (Large Screens)
navigation_color:
type: select.select
label: Color
description: Set light or dark color if the navigation is
below the slideshow.
default: default
options:
default: None
light: Light
dark: Dark
thumbnail_width:
type: input.number
label: Thumbnail Width
description: Set the width of the thumbnail image.
default: 100
min: 0
placeholder: 100
thumbnail_height:
type: input.number
label: Thumbnail Height
description: Set the height of the thumbnail image.
default: 75
min: 0
placeholder: 75
slidenav_info:
type: separator.note
class: alert alert-info
content: 'Slidenav'
slidenav_position:
type: select.select
label: Position
description: Select the position of the slidenav.
default: default
options:
none: None
default: Default
outside: Outside
top-left: Top Left
top-right: Top Right
center-left: Center Left
center-right: Center Right
bottom-left: Bottom Left
bottom-center: Bottom Center
bottom-right: Bottom Right
slidenav_hover:
type: input.checkbox
label: Show On Hover
description: Show the slide nav on hover only.
default: false
slidenav_large_style:
type: input.checkbox
label: Larger Style
description: To increase the size of the slidenav icons.
default: false
slidenav_margin:
type: select.select
label: Margin
description: Apply a margin between the slidenav and the
slideshow container.
default: medium
options:
none: None
small: Small
medium: Medium
large: Large
slidenav_breakpoint:
type: select.select
label: Breakpoint
description: Display the slidenav only on this device width
and larger.
default: s
options:
always: Always
s: Small (Phone Landscape)
m: Medium (Tablet Landscape)
l: Large (Desktop)
xl: X-Large (Large Screens)
slidenav_outside_breakpoint:
type: select.select
label: Outside Breakpoint
description: Display the slidenav only outside on this device
width and larger. Otherwise it will be displayed inside.
default: xl
options:
s: Small (Phone Landscape)
m: Medium (Tablet Landscape)
l: Large (Desktop)
xl: X-Large (Large Screens)
slidenav_outside_color:
type: select.select
label: Outside Color
description: Set light or dark color if the slidenav is
outside of the slideshow.
default: default
options:
default: Default
light: Light
dark: Dark
slidenav_icon_info:
type: separator.note
content: 'Custom previous/next icons (replace default
Slidenav navigation)'
slidenav_icon_left:
type: input.icon
label: Previous Icon
slidenav_icon_right:
type: input.icon
label: Next Icon
_tab_style:
label: Style
overridable: false
fields:
title_info:
type: separator.note
class: alert alert-info
content: 'Title Style'
title_style:
type: select.select
label: Style
description: Title styles differ in font-size but may also
come with a predefined color, size and font.
default: default
options:
default: None
heading-2xlarge: 2XLarge
heading-xlarge: XLarge
heading-large: Large
heading-medium: Medium
heading-small: Small
h1: H1
h2: H2
h3: H3
h4: H4
h5: H5
h6: H6
link_title:
type: input.checkbox
label: Link title
description: Link the title if a link exists.
default: true
title_hover:
type: select.selectize
label: Hover Style
description: Set the hover style for a linked title. Enable
link title to use this option.
default: reset
selectize:
allowEmptyOption: true
options:
reset: None
heading: Heading
'': Default Link
title_decoration:
type: select.select
label: Decoration
description: Decorate the headline with a divider, bullet or
a line that is vertically centered to the heading.
default: none
options:
none: None
divider: Divider
bullet: Bullet
line: Line
pre_title_color:
type: select.select
label: Predefined Color
description: Select the text color.
default: default
options:
default: None
muted: Muted
emphasis: Emphasis
primary: Primary
secondary: Secondary
success: Success
warning: Warning
danger: Danger
background: Background
title_color:
type: input.colorpicker
label: Custom Color
description: Customize the title color instead using
predefined title color mode. You need to set the Predefined color to None
before using the color customization.
title_fontsize:
type: input.number
label: Font Size
min: 0
description: Customize the title text font size
title_text_transform:
type: select.select
label: Transform
description: The following options will transform text into
uppercased, capitalized or lowercased characters.
default: ''
options:
'': Inherit
uppercase: Uppercase
capitalize: Capitalize
lowercase: Lowercase
title_element:
type: select.select
label: HTML Element
description: Choose one of the elements to fit your semantic
structure.
default: h3
options:
h1: H1
h2: H2
h3: H3
h4: H4
h5: H5
h6: H6
div: div
title_margin_top:
type: select.select
label: Margin Top
description: Set the top margin. Note that the margin will
only apply if the content field immediately follows another content field.
default: default
options:
small: Small
default: Default
medium: Medium
large: Large
xlarge: X-Large
remove: None
title_parallax:
type: input.checkbox
label: Title Parallax
description: Add a parallax effect for Title. This option
won't have any effect unless the Parallax animation for Overlay is
selected.
default: false
meta_info:
type: separator.note
class: alert alert-info
content: 'Meta Style'
meta_styles:
type: select.select
label: Style
description: Display the meta text in a sentence or a
horizontal list.
default: sentence
options:
sentence: Sentence
list: List
meta_subnav_style:
type: select.select
label: Subnav Style
description: Select the subnav style for List meta style.
default: default
options:
default: Default
divider: Divider
article.display.author.enabled:
type: select.select
label: Author
description: Select if the article author should be shown.
default: show
options:
show: Show
'': Hide
author_meta:
type: input.text
label: Author Meta
placeholder: Written by
article.display.date.enabled:
type: select.select
label: Date
description: Select if the article date should be shown.
default: published
options:
created: Show Created Date
published: Show Published Date
modified: Show Modified Date
'': Hide
article.display.date.format:
type: select.date
label: Date Format
description: Select preferred date format. Leave empty not to
display a date.
default: F d, Y
selectize:
allowEmptyOption: true
options:
'l, F d, Y': Date1
'l, d F': Date2
'D, d F': Date3
'F d': Date4
'd F': Date5
'd M': Date6
'D, M d, Y': Date7
'D, M d, y': Date8
'l': Date9
'l j F Y': Date10
'j F Y': Date11
'F d, Y': Date12
date_meta:
type: input.text
label: Date Meta
placeholder: 'on'
article.display.category.enabled:
type: select.select
label: Category
description: Select if and how the article category should be
shown.
default: link
options:
show: Show
link: Show with Link
'': Hide
category_meta:
type: input.text
label: Category Meta
placeholder: Posted in
article.display.hits.enabled:
type: select.select
label: Hits
description: Select if the article hits should be shown.
default: ''
options:
show: Show
'': Hide
pre_meta_color:
type: select.select
label: Predefined Color
description: Select the text color.
default: default
options:
default: None
muted: Muted
emphasis: Emphasis
primary: Primary
secondary: Secondary
success: Success
warning: Warning
danger: Danger
meta_color:
type: input.colorpicker
label: Custom Color
description: Customize the Meta color instead using
predefined Meta color mode. You need to set the Predefined color to None
before using the color customization.
meta_fontsize:
type: input.number
label: Font Size
min: 0
description: Customize the meta text font size
meta_text_transform:
type: select.select
label: Transform
description: The following options will transform text into
uppercased, capitalized or lowercased characters.
default: ''
options:
'': Inherit
uppercase: Uppercase
capitalize: Capitalize
lowercase: Lowercase
meta_alignment:
type: select.select
label: Alignment
description: Align the meta text.
default: bottom
options:
top: Above Title
bottom: Below Title
content: Below Content
meta_margin_top:
type: select.select
label: Margin Top
description: Set the top margin. Note that the margin will
only apply if the content field immediately follows another content field.
default: default
options:
small: Small
default: Default
medium: Medium
large: Large
xlarge: X-Large
remove: None
meta_parallax:
type: input.checkbox
label: Meta Parallax
description: Add a parallax effect for Meta. This option
won't have any effect unless the Parallax animation for Overlay is
selected.
default: false
content_info:
type: separator.note
class: alert alert-info
content: 'Content Style'
content_style:
type: select.select
label: Style
description: Select a predefined text style, including color,
size and font-family.
default: default
options:
default: None
lead: Lead
content_text_color:
type: select.select
label: Predefined Color
description: Select the text color.
default: default
options:
default: None
muted: Muted
emphasis: Emphasis
primary: Primary
secondary: Secondary
success: Success
warning: Warning
danger: Danger
background: Background
customize_content_color:
type: input.colorpicker
label: Customize Color
description: Customize the content color instead using
predefined text color. You need to set the Predefined color to None before
using the color customization.
customize_content_fontsize:
type: input.number
label: Font Size
min: 0
description: Customize the content text font size
content_text_transform:
type: select.select
label: Transform
description: The following options will transform text into
uppercased, capitalized or lowercased characters.
default: ''
options:
'': Inherit
uppercase: Uppercase
capitalize: Capitalize
lowercase: Lowercase
content_margin_top:
type: select.select
label: Margin Top
description: Set the top margin. Note that the margin will
only apply if the content field immediately follows another content field.
default: default
options:
small: Small
default: Default
medium: Medium
large: Large
xlarge: X-Large
remove: None
content_parallax:
type: input.checkbox
label: Content Parallax
description: Add a parallax effect for Content. Enable this
option first then you can custom the settings via parallax tab.
default: false
link_info:
type: separator.note
class: alert alert-info
content: 'Link'
article.display.read_more.label:
type: input.text
label: Link Text
description: Type in the label for the 'Read More'
button.
placeholder: 'Read More'
default: Read More
buttontarget:
type: select.selectize
label: Target
description: Open the link in a same or new window.
placeholder: 'Select...'
default: _self
options:
_self: Self
_blank: New Window
link_style:
type: select.select
label: Style
description: Set the link style
default: default
options:
default: Button Default
primary: Button Primary
secondary: Button Secondary
danger: Button Danger
text: Button Text
link: Link
link-muted: Link Muted
link-text: Link Text
link_button_size:
type: select.select
label: Button Size
description: Set the button size.
default: default
options:
small: Small
default: Default
large: Large
link_margin_top:
type: select.select
label: Margin Top
description: Set the top margin. Note that the margin will
only apply if the content field immediately follows another content field.
default: default
options:
small: Small
default: Default
medium: Medium
large: Large
xlarge: X-Large
remove: None
button_visibility:
type: select.select
label: Button Visibility
description: Display the button only on this device width and
larger.
default: inherit
options:
inherit: Always
s: Small (Phone Landscape)
m: Medium (Tablet Landscape)
l: Large (Desktop)
xl: X-Large (Large Screens)
link_parallax:
type: input.checkbox
label: Button Parallax
description: Add a parallax effect for Link. This option
won't have any effect unless the Parallax animation for Overlay is
selected.
default: false
thumbnav_color_info:
type: separator.note
class: alert alert-info
content: 'Thumbnav Style'
thumbnav_border_width:
type: input.number
label: Border Width
placeholder: '5'
thumbnav_border_color:
type: input.colorpicker
label: Border Color
thumbnav_border_color_hover:
type: input.colorpicker
label: Border Hover Color
slidenav_color_info:
type: separator.note
class: alert alert-info
content: 'Slidenav Style'
slide_background:
type: input.colorpicker
label: Background
slide_color:
type: input.colorpicker
label: Color
padding_horizontal:
type: input.number
label: Padding Horizontal
placeholder: '17'
padding_vertical:
type: input.number
label: Padding Vertical
placeholder: '14'
slide_hover_background:
type: input.colorpicker
label: Hover Background
slide_hover_color:
type: input.colorpicker
label: Hover Color
_tab_overlay:
label: Overlay
overridable: false
fields:
overlay_container_width:
type: select.select
label: Container Width
description: Set the maximum content width. Note:The section
may already have a maximum width, which you cannot exceed.
default: none
options:
none: None
default: Default
small: Small
large: Large
xlarge: XLarge
expand: Expand
overlay_container_padding:
type: select.select
label: Container Padding
description: Set the vertical container padding to position
the overlay.
default: default
options:
default: Default
xsmall: X-Small
small: Small
large: Large
xlarge: X-Large
overlay_margin:
type: select.select
label: Margin
description: Apply a margin between the overlay and the
slideshow container. This option won't have any effect if Container
Width is enabled.
default: default
options:
default: Default
small: Small
large: Large
none: None
overlay_position:
type: select.select
label: Position
description: Set the content position.
default: center-left
options:
top: Top
bottom: Bottom
left: Left
right: Right
top-left: Top Left
top-center: Top Center
top-right: Top Right
center: Center Center
center-left: Center Left
center-right: Center Right
bottom-left: Bottom Left
bottom-center: Bottom Center
bottom-right: Bottom Right
overlay_style:
type: select.select
label: Style
description: Select the style for the overlay.
default: jl-overlay-default
options:
none: None
jl-overlay-default: Overlay Default
jl-overlay-primary: Overlay Primary
jl-tile-default: Tile Default
jl-tile-muted: Tile Muted
jl-tile-primary: Tile Primary
jl-tile-secondary: Tile Secondary
overlay_padding:
type: select.select
label: Padding
description: Set the padding between the overlay and its
content. This option won't have any effect unless Overlay Style is
enabled.
default: default
options:
default: Default
small: Small
large: Large
overlay_width:
type: select.select
label: Width
description: Set a fixed width.
default: none
options:
none: None
small: Small
medium: Medium
large: Large
xlarge: X-Large
xxlarge: XX-Large
overlay_transition:
type: select.select
label: Animation
description: Choose between a parallax depending on the
scroll position or an animation, which is applied once the slide is
active.
default: parallax
options:
parallax: Parallax
fade: Fade
scale-up: Scale Up
scale-down: Scale Down
slide-top-small: Slide Top Small
slide-bottom-small: Slide Bottom Small
slide-left-small: Slide Left Small
slide-right-small: Slide Right Small
slide-top-medium: Slide Top Medium
slide-bottom-medium: Slide Bottom Medium
slide-left-medium: Slide Left Medium
slide-right-medium: Slide Right Medium
slide-top: Slide Top 100%
slide-bottom: Slide Bottom 100%
slide-left: Slide Left 100%
slide-right: Slide Right 100%
_tab_general:
label: General
overridable: false
fields:
particle_title_info:
type: separator.note
class: alert alert-info
content: 'Particle Title Style'
particle_title:
type: input.text
label: Title
description: Add an optional particle title.
placeholder: Enter particle title
particle_title_style:
type: select.select
label: Style
description: Title styles differ in font-size but may also
come with a predefined color, size and font.
default: h3
options:
default: None
heading-2xlarge: 2XLarge
heading-xlarge: XLarge
heading-large: Large
heading-medium: Medium
heading-small: Small
h1: H1
h2: H2
h3: H3
h4: H4
h5: H5
h6: H6
particle_title_decoration:
type: select.select
label: Decoration
description: Decorate the headline with a divider, bullet or
a line that is vertically centered to the heading.
default: none
options:
none: None
divider: Divider
bullet: Bullet
line: Line
particle_title_align:
type: select.select
label: Alignment
description: Center, left and right alignment for Particle
title.
default: inherit
options:
inherit: Inherit
left: Left
center: Center
right: Right
justify: Justify
particle_predefined_color:
type: select.select
label: Predefined Color
description: Select the text color. If the Background option
is selected, styles that don't apply a background image use the
primary color instead.
default: default
options:
default: None
muted: Muted
emphasis: Emphasis
primary: Primary
secondary: Secondary
success: Success
warning: Warning
danger: Danger
particle_title_color:
type: input.colorpicker
label: Custom Color
description: Customize the title color instead using
predefined color mode. Note:Set the Predefined color to None before using
this color customization mode.
particle_title_fontsize:
type: input.number
label: Font Size
description: Customize the particle title font size.
min: 0
particle_title_element:
type: select.select
label: HTML Element
description: Choose one of the elements to fit your semantic
structure.
default: h3
options:
h1: H1
h2: H2
h3: H3
h4: H4
h5: H5
h6: H6
div: div
general_content_info:
type: separator.note
class: alert alert-info
content: 'General Settings'
align:
type: select.select
label: Text Alignment
description: Center, left and right alignment may depend on a
breakpoint and require a fallback.
default: inherit
options:
inherit: None
left: Left
center: Center
right: Right
justify: Justify
breakpoint:
type: select.select
label: Alignment Breakpoint
description: Define the device width from which the alignment
will apply.
default: always
options:
always: Always
s: Small (Phone Landscape)
m: Medium (Tablet Landscape)
l: Large (Desktop)
xl: X-Large (Large Screens)
fallback:
type: select.select
label: Alignment Fallback
description: Define an alignment fallback for device widths
below the breakpoint.
default: inherit
options:
inherit: None
left: Left
center: Center
right: Right
justify: Justify
g_maxwidth:
type: select.select
label: Max Width
description: Set the maximum content width.
default: inherit
options:
inherit: None
small: Small
medium: Medium
large: Large
xlarge: X-Large
xxlarge: XX-Large
g_maxwidth_alignment:
type: select.select
label: Max Width Alignment
description: Define the alignment in case the container
exceeds the element's max-width.
default: left
options:
left: Left
center: Center
right: Right
g_maxwidth_breakpoint:
type: select.select
label: Max Width Breakpoint
description: Define the device width from which the
element's max-width will apply.
default: always
options:
always: Always
s: Small (Phone Landscape)
m: Medium (Tablet Landscape)
l: Large (Desktop)
xl: X-Large (Large Screens)
margin:
type: select.select
label: Margin
description: Set the vertical margin.
default: inherit
options:
inherit: Keep existing
small: Small
default: Default
medium: Medium
large: Large
xlarge: X-Large
remove-vertical: None
visibility:
type: select.select
label: Visibility
description: Display the element only on this device width
and larger.
default: inherit
options:
inherit: Always
s: Small (Phone Landscape)
m: Medium (Tablet Landscape)
l: Large (Desktop)
xl: X-Large (Large Screens)
general_animation_info:
type: separator.note
class: alert alert-info
content: 'Animation Settings'
animation:
type: select.select
label: Animation
description: Apply an animation to particles once they enter
the viewport. This will animate all particles inside the section.
default: inherit
options:
inherit: None
fade: Fade
scale-up: Scale Up
scale-down: Scale Down
slide-top-small: Slide Top Small
slide-bottom-small: Slide Bottom Small
slide-left-small: Slide Left Small
slide-right-small: Slide Right Small
slide-top-medium: Slide Top Medium
slide-bottom-medium: Slide Bottom Medium
slide-left-medium: Slide Left Medium
slide-right-medium: Slide Right Medium
slide-top: Slide Top 100%
slide-bottom: Slide Bottom 100%
slide-left: Slide Left 100%
slide-right: Slide Right 100%
parallax: Parallax
animation_delay:
type: input.number
label: Animation Delay
description: Set the delay animations for particle. Delay
time in ms.
min: 0
placeholder: 200
animation_repeat:
type: select.select
label: Animation Repeat
description: Repeat an animation to particle once it enter
the viewport.
default: disabled
options:
enabled: Enable
disabled: Disable
_tab_parallax_animation:
label: Parallax
overridable: false
fields:
pa_overlay_info:
type: separator.note
class: alert alert-info
content: 'Overlay Parallax Settings'
pa_overlay_horizontal_start:
type: input.number
label: Horizontal Start
description: Animate the horizontal position (translateX) in
pixels. Min:-600 and Max:600.
min: -600
max: 600
placeholder: 0
pa_overlay_horizontal_end:
type: input.number
label: Horizontal End
description: Animate the horizontal position (translateX) in
pixels. Min:-600 and Max:600.
min: -600
max: 600
placeholder: 0
pa_overlay_vertical_start:
type: input.number
label: Vertical Start
description: Animate the vertical position (translateY) in
pixels. Min:-600 and Max:600.
min: -600
max: 600
placeholder: 0
pa_overlay_vertical_end:
type: input.number
label: Vertical End
description: Animate the vertical position (translateY) in
pixels. Min:-600 and Max:600.
min: -600
max: 600
placeholder: 0
pa_overlay_scale_start:
type: input.number
label: Scale Start
description: Animate the scaling. 100 means 100% scale, 200
means 200% scale, and 50 means 50% scale. Note:Min 30 and Max 400
min: 30
max: 400
placeholder: 100
pa_overlay_scale_end:
type: input.number
label: Scale End
description: Animate the scaling. 100 means 100% scale, 200
means 200% scale, and 50 means 50% scale. Note:Min 30 and Max 400
min: 30
max: 400
placeholder: 100
pa_overlay_rotate_start:
type: input.number
label: Rotate Start
description: Animate the rotation clockwise in degrees.
Note:Min 0 and Max 360
min: 0
max: 360
placeholder: 0
pa_overlay_rotate_end:
type: input.number
label: Rotate End
description: Animate the rotation clockwise in degrees.
Note:Min 0 and Max 360
min: 0
max: 360
placeholder: 0
pa_overlay_opacity_start:
type: input.number
label: Opacity Start
description: Animate the opacity. 100 means 100% opacity, 0
means 0% opacity and 50 means 50%. Note:Min 0 and Max 100
min: 0
max: 100
placeholder: 100
pa_overlay_opacity_end:
type: input.number
label: Opacity End
description: Animate the opacity. 100 means 100% opacity, 0
means 0% opacity and 50 means 50%. Note:Min 0 and Max 100
min: 0
max: 100
placeholder: 100
pa_title_info:
type: separator.note
class: alert alert-info
content: 'Title Parallax Settings'
pa_title_horizontal_start:
type: input.number
label: Horizontal Start
description: Animate the horizontal position (translateX) in
pixels. Min:-600 and Max:600.
min: -600
max: 600
placeholder: 0
pa_title_horizontal_end:
type: input.number
label: Horizontal End
description: Animate the horizontal position (translateX) in
pixels. Min:-600 and Max:600.
min: -600
max: 600
placeholder: 0
pa_title_vertical_start:
type: input.number
label: Vertical Start
description: Animate the vertical position (translateY) in
pixels. Min:-600 and Max:600.
min: -600
max: 600
placeholder: 0
pa_title_vertical_end:
type: input.number
label: Vertical End
description: Animate the vertical position (translateY) in
pixels. Min:-600 and Max:600.
min: -600
max: 600
placeholder: 0
pa_title_scale_start:
type: input.number
label: Scale Start
description: Animate the scaling. 100 means 100% scale, 200
means 200% scale, and 50 means 50% scale. Note:Min 30 and Max 400
min: 30
max: 400
placeholder: 100
pa_title_scale_end:
type: input.number
label: Scale End
description: Animate the scaling. 100 means 100% scale, 200
means 200% scale, and 50 means 50% scale. Note:Min 30 and Max 400
min: 30
max: 400
placeholder: 100
pa_title_rotate_start:
type: input.number
label: Rotate Start
description: Animate the rotation clockwise in degrees.
Note:Min 0 and Max 360
min: 0
max: 360
placeholder: 0
pa_title_rotate_end:
type: input.number
label: Rotate End
description: Animate the rotation clockwise in degrees.
Note:Min 0 and Max 360
min: 0
max: 360
placeholder: 0
pa_title_opacity_start:
type: input.number
label: Opacity Start
description: Animate the opacity. 100 means 100% opacity, 0
means 0% opacity and 50 means 50%. Note:Min 0 and Max 100
min: 0
max: 100
placeholder: 100
pa_title_opacity_end:
type: input.number
label: Opacity End
description: Animate the opacity. 100 means 100% opacity, 0
means 0% opacity and 50 means 50%. Note:Min 0 and Max 100
min: 0
max: 100
pa_meta_info:
type: separator.note
class: alert alert-info
content: 'Meta Parallax Settings'
pa_meta_horizontal_start:
type: input.number
label: Horizontal Start
description: Animate the horizontal position (translateX) in
pixels. Min:-600 and Max:600.
min: -600
max: 600
placeholder: 0
pa_meta_horizontal_end:
type: input.number
label: Horizontal End
description: Animate the horizontal position (translateX) in
pixels. Min:-600 and Max:600.
min: -600
max: 600
placeholder: 0
pa_meta_vertical_start:
type: input.number
label: Vertical Start
description: Animate the vertical position (translateY) in
pixels. Min:-600 and Max:600.
min: -600
max: 600
placeholder: 0
pa_meta_vertical_end:
type: input.number
label: Vertical End
description: Animate the vertical position (translateY) in
pixels. Min:-600 and Max:600.
min: -600
max: 600
placeholder: 0
pa_meta_scale_start:
type: input.number
label: Scale Start
description: Animate the scaling. 100 means 100% scale, 200
means 200% scale, and 50 means 50% scale. Note:Min 30 and Max 400
min: 30
max: 400
placeholder: 100
pa_meta_scale_end:
type: input.number
label: Scale End
description: Animate the scaling. 100 means 100% scale, 200
means 200% scale, and 50 means 50% scale. Note:Min 30 and Max 400
min: 30
max: 400
placeholder: 100
pa_meta_rotate_start:
type: input.number
label: Rotate Start
description: Animate the rotation clockwise in degrees.
Note:Min 0 and Max 360
min: 0
max: 360
placeholder: 0
pa_meta_rotate_end:
type: input.number
label: Rotate End
description: Animate the rotation clockwise in degrees.
Note:Min 0 and Max 360
min: 0
max: 360
placeholder: 0
pa_meta_opacity_start:
type: input.number
label: Opacity Start
description: Animate the opacity. 100 means 100% opacity, 0
means 0% opacity and 50 means 50%. Note:Min 0 and Max 100
min: 0
max: 100
placeholder: 100
pa_meta_opacity_end:
type: input.number
label: Opacity End
description: Animate the opacity. 100 means 100% opacity, 0
means 0% opacity and 50 means 50%. Note:Min 0 and Max 100
min: 0
max: 100
placeholder: 100
pa_content_info:
type: separator.note
class: alert alert-info
content: 'Content Parallax Settings'
pa_content_horizontal_start:
type: input.number
label: Horizontal Start
description: Animate the horizontal position (translateX) in
pixels. Min:-600 and Max:600.
min: -600
max: 600
placeholder: 0
pa_content_horizontal_end:
type: input.number
label: Horizontal End
description: Animate the horizontal position (translateX) in
pixels. Min:-600 and Max:600.
min: -600
max: 600
placeholder: 0
pa_content_vertical_start:
type: input.number
label: Vertical Start
description: Animate the vertical position (translateY) in
pixels. Min:-600 and Max:600.
min: -600
max: 600
placeholder: 0
pa_content_vertical_end:
type: input.number
label: Vertical End
description: Animate the vertical position (translateY) in
pixels. Min:-600 and Max:600.
min: -600
max: 600
placeholder: 0
pa_content_scale_start:
type: input.number
label: Scale Start
description: Animate the scaling. 100 means 100% scale, 200
means 200% scale, and 50 means 50% scale. Note:Min 30 and Max 400
min: 30
max: 400
placeholder: 100
pa_content_scale_end:
type: input.number
label: Scale End
description: Animate the scaling. 100 means 100% scale, 200
means 200% scale, and 50 means 50% scale. Note:Min 30 and Max 400
min: 30
max: 400
placeholder: 100
pa_content_rotate_start:
type: input.number
label: Rotate Start
description: Animate the rotation clockwise in degrees.
Note:Min 0 and Max 360
min: 0
max: 360
placeholder: 0
pa_content_rotate_end:
type: input.number
label: Rotate End
description: Animate the rotation clockwise in degrees.
Note:Min 0 and Max 360
min: 0
max: 360
placeholder: 0
pa_content_opacity_start:
type: input.number
label: Opacity Start
description: Animate the opacity. 100 means 100% opacity, 0
means 0% opacity and 50 means 50%. Note:Min 0 and Max 100
min: 0
max: 100
placeholder: 100
pa_content_opacity_end:
type: input.number
label: Opacity End
description: Animate the opacity. 100 means 100% opacity, 0
means 0% opacity and 50 means 50%. Note:Min 0 and Max 100
min: 0
max: 100
placeholder: 100
pa_link_info:
type: separator.note
class: alert alert-info
content: 'Button Parallax Settings'
pa_link_horizontal_start:
type: input.number
label: Horizontal Start
description: Animate the horizontal position (translateX) in
pixels. Min:-600 and Max:600.
min: -600
max: 600
placeholder: 0
pa_link_horizontal_end:
type: input.number
label: Horizontal End
description: Animate the horizontal position (translateX) in
pixels. Min:-600 and Max:600.
min: -600
max: 600
placeholder: 0
pa_link_vertical_start:
type: input.number
label: Vertical Start
description: Animate the vertical position (translateY) in
pixels. Min:-600 and Max:600.
min: -600
max: 600
placeholder: 0
pa_link_vertical_end:
type: input.number
label: Vertical End
description: Animate the vertical position (translateY) in
pixels. Min:-600 and Max:600.
min: -600
max: 600
placeholder: 0
pa_link_scale_start:
type: input.number
label: Scale Start
description: Animate the scaling. 100 means 100% scale, 200
means 200% scale, and 50 means 50% scale. Note:Min 30 and Max 400
min: 30
max: 400
placeholder: 100
pa_link_scale_end:
type: input.number
label: Scale End
description: Animate the scaling. 100 means 100% scale, 200
means 200% scale, and 50 means 50% scale. Note:Min 30 and Max 400
min: 30
max: 400
placeholder: 100
pa_link_rotate_start:
type: input.number
label: Rotate Start
description: Animate the rotation clockwise in degrees.
Note:Min 0 and Max 360
min: 0
max: 360
placeholder: 0
pa_link_rotate_end:
type: input.number
label: Rotate End
description: Animate the rotation clockwise in degrees.
Note:Min 0 and Max 360
min: 0
max: 360
placeholder: 0
pa_link_opacity_start:
type: input.number
label: Opacity Start
description: Animate the opacity. 100 means 100% opacity, 0
means 0% opacity and 50 means 50%. Note:Min 0 and Max 100
min: 0
max: 100
placeholder: 100
pa_link_opacity_end:
type: input.number
label: Opacity End
description: Animate the opacity. 100 means 100% opacity, 0
means 0% opacity and 50 means 50%. Note:Min 0 and Max 100
min: 0
max: 100
placeholder: 100
general_parallax_info:
type: separator.note
class: alert alert-info
content: 'Global Parallax Settings'
pa_horizontal_start:
type: input.number
label: Horizontal Start
description: Animate the horizontal position (translateX) in
pixels. Min:-600 and Max:600.
min: -600
max: 600
placeholder: 0
pa_horizontal_end:
type: input.number
label: Horizontal End
description: Animate the horizontal position (translateX) in
pixels. Min:-600 and Max:600.
min: -600
max: 600
placeholder: 0
pa_vertical_start:
type: input.number
label: Vertical Start
description: Animate the vertical position (translateY) in
pixels. Min:-600 and Max:600.
min: -600
max: 600
placeholder: 0
pa_vertical_end:
type: input.number
label: Vertical End
description: Animate the vertical position (translateY) in
pixels. Min:-600 and Max:600.
min: -600
max: 600
placeholder: 0
scale_start:
type: input.number
label: Scale Start
description: Animate the scaling. 100 means 100% scale, 200
means 200% scale, and 50 means 50% scale. Note:Min 30 and Max 400
min: 30
max: 400
placeholder: 100
scale_end:
type: input.number
label: Scale End
description: Animate the scaling. 100 means 100% scale, 200
means 200% scale, and 50 means 50% scale. Note:Min 30 and Max 400
min: 30
max: 400
placeholder: 100
rotate_start:
type: input.number
label: Rotate Start
description: Animate the rotation clockwise in degrees.
Note:Min 0 and Max 360
min: 0
max: 360
placeholder: 0
rotate_end:
type: input.number
label: Rotate End
description: Animate the rotation clockwise in degrees.
Note:Min 0 and Max 360
min: 0
max: 360
placeholder: 0
opacity_start:
type: input.number
label: Opacity Start
description: Animate the opacity. 100 means 100% opacity, 0
means 0% opacity and 50 means 50%. Note:Min 0 and Max 100
min: 0
max: 100
placeholder: 100
opacity_end:
type: input.number
label: Opacity End
description: Animate the opacity. 100 means 100% opacity, 0
means 0% opacity and 50 means 50%. Note:Min 0 and Max 100
min: 0
max: 100
placeholder: 100
easing:
type: input.number
label: Easing
description: Determine how the speed of the animation behaves
over time. A value below 100 is faster in the beginning and slower towards
the end while a value above 100 behaves inversely. Min 10 and Max 200
min: 10
max: 200
placeholder: 10
pa_viewport:
type: input.number
label: Viewport
description: Set the animation end point relative to viewport
height, e.g. 50 for 50% of the viewport. Min 10 and Max 100
min: 10
max: 100
placeholder: 50
pa_breakpoint:
type: select.select
label: Breakpoint
description: Display the parallax effect only on this device
width and larger.
default: always
options:
always: Always
s: Small (Phone Landscape)
m: Medium (Tablet Landscape)
l: Large (Desktop)
xl: X-Large (Large Screens)
copyright:
type: separator.note
class: alert alert-success
content: 'Slideshow Joomla <strong>Version:
2.1.3</strong> Copyright (C) <a
href="https://joomlead.com/"
target="_blank">https://joomlead.com</a> | <a
href="https://joomlead.com/g5/docs/slideshow-joomla-wordpress-particle/"
target="_blank">Documentation</a>'