$w.Gallery

$w.Gallery

A gallery for displaying multiple items.

There are many different types and styles of galleries, some of which do not support all of the properties and functions described below. To determine what functionality a specific gallery supports, use its galleryCapabilities property to identify its capabilities. Then use the list below to determine what functionality is supported by the gallery.

Mixes In

$w.Element, $w.HiddenCollapsedMixin, $w.PlayableMixin, $w.ClickableMixin

Contents

clickAction Sets or gets the action that occurs when an item in the gallery is clicked.
collapsed Indicates if the element is collapsed or expanded.
currentIndex Gets the index of the gallery's current item.
currentItem Gets an object containing information about the current item.
galleryCapabilities Gets an object containing information about the gallery's capabilities.
global Indicates if an element appears on all pages or only on the current page.
hidden Indicates if the element is visible or hidden.
id Gets the elements's ID.
isPlaying Indicates if the element is currently playing.
isVisible Indicates if the element is actually visible.
items Sets or gets the items in a gallery.
parent Gets the element's parent element.
rendered Indicates if an element is currently displayed.
showNavigationButtons Determines if a gallery's navigation arrows are shown.
type Gets the element's type.
collapse( ) Collapses the element and sets its collapsed property to true.
expand( ) Expands the element and sets its collapsed property to false.
hide( ) Hides the element and sets its hidden property to true, using an effect if specified.
next( ) Moves to the next item.
onClick( ) Adds an event handler that runs when the element is clicked.
onCurrentItemChanged( ) Adds an event handler that runs when a gallery's current item changes.
onDblClick( ) Adds an event handler that runs when the element is double-clicked.
onItemClicked( ) Adds an event handler that runs when an item in a gallery is clicked.
onMouseIn( ) Adds an event handler that runs when the mouse pointer is moved onto the element.
onMouseOut( ) Adds an event handler that runs when the mouse pointer is moved off of the element.
onPause( ) Adds an event handler that runs when playback is paused.
onPlay( ) Adds an event handler that runs when playback is started or restarted.
onViewportEnter( ) Adds an event handler that runs when an element is displayed in the viewable part of the current window.
onViewportLeave( ) Adds an event handler that runs when an element is no longer displayed in the viewable part of the current window.
pause( ) Pauses playback.
play( ) Begins or resumes playback.
previous( ) Moves to the previous image or slide.
scrollTo( ) Scrolls the page to the element using an animation.
show( ) Shows the element and sets its hidden property to false, using an effect if specified.
GalleryCapabilities An object used by the galleryCapabilities property that contains the capabilities of a gallery.
GalleryItem An object used by the Gallery properties items and currentItem to represent a single item in a gallery.
clickAction

clickAction

Sets or gets the action that occurs when an item in the gallery is clicked.

Syntax

get clickAction(): string
set clickAction(value: String): void

Description

Setting the clickAction property sets what happens when an item in the gallery is clicked.

The value can be set to:

  • "none": Nothing happens.
  • "expand": The item opens in a pop-up.
  • "link": The item's link opens.

    Getting the clickAction property returns what happens when an item in the gallery is clicked.

Type

String

Examples

Get the action that occurs when an item in the gallery is clicked

bGV0IGFjdGlvbiA9ICR3KCIjbXlHYWxsZXJ5IikuY2xpY2tBY3Rpb247ICAvLyAiZXhwYW5kIgo=
let action = $w("#myGallery").clickAction;  // "expand"

Set the action that occurs when an item in the gallery is clicked

JHcoIiNteUdhbGxlcnkiKS5jbGlja0FjdGlvbiA9ICJleHBhbmQiOwo=
$w("#myGallery").clickAction = "expand";
collapsed

collapsed

Indicates if the element is collapsed or expanded.

Syntax

get collapsed(): boolean

Description

If collapsed is true, the element is not displayed on the page under any circumstances. A collapsed element, unlike a hidden element, does not take up any space on the page. When collapsed, elements positioned within 70 pixels below the collapsed element and each other will move up to take the collapsed element's place where possible. The elements that move up maintain their positions relative to one another.

If collapsed is false, the element may be displayed on the page. Elements that moved up to take the collapsed element's place on the page are moved back down.

However, an expanded element (an element whose collapsed property is false) will still not be displayed if:

Even if the element will not be displayed due to the conditions mentioned above, if its collapsed property is false, it will be displayed when the conditions no longer apply.

To set the collapsed property on an element, use the element's collapse() and expand() functions.

If you select Collapsed on load in the element's Properties panel in the Editor, the collapsed property is set to true when the page loads.

Type

Boolean

Examples

Get an element's collapsed status

bGV0IGlzQ29sbGFwc2VkID0gJHcoIiNteUVsZW1lbnQiKS5jb2xsYXBzZWQ7IC8vIGZhbHNlCg==
let isCollapsed = $w("#myElement").collapsed; // false

Toggle an element's collapsed state

aWYoICR3KCIjbXlFbGVtZW50IikuY29sbGFwc2VkICkgewogICR3KCIjbXlFbGVtZW50IikuZXhwYW5kKCk7Cn0KZWxzZSB7CiAgJHcoIiNteUVsZW1lbnQiKS5jb2xsYXBzZSgpOwp9Cg==
if( $w("#myElement").collapsed ) {
  $w("#myElement").expand();
}
else {
  $w("#myElement").collapse();
}

Default Value

false

Mixed In From

$w.HiddenCollapsedMixin

See Also

collapse( ), expand( ), hide( ), show( ), hidden

currentIndex

currentIndex

Gets the index of the gallery's current item.

Syntax

get currentIndex(): Number

Description

The indices of the items in a gallery are zero-based. For example, if the third item is currently being displayed, then currentIndex returns 2.

Type

Number

Examples

Get the index of the gallery's current item

bGV0IGN1cnJlbnRJbmRleCA9ICR3KCIjbXlHYWxsZXJ5IikuY3VycmVudEluZGV4OyAgLy8gMwo=
let currentIndex = $w("#myGallery").currentIndex;  // 3
currentItem

currentItem

Gets an object containing information about the current item.

Syntax

get currentItem(): GalleryItem

Type

GalleryItem

galleryCapabilities

galleryCapabilities

Gets an object containing information about the gallery's capabilities.

Syntax

get galleryCapabilities(): GalleryCapabilities

Type

GalleryCapabilities

Examples

Get the gallery's capabilities

bGV0IGNhcGFiaWxpdGllcyA9ICR3KCIjbXlHYWxsZXJ5IikuZ2FsbGVyeUNhcGFiaWxpdGllczsKCi8qCiAqIHsKICogICAiaXNQbGF5YWJsZSI6IGZhbHNlLAogKiAgICJoYXNDdXJyZW50SXRlbSI6IHRydWUsCiAqICAgImhhc05hdmlnYXRpb25CdXR0b25zIjogdHJ1ZQogKiB9CiAqLwoKbGV0IGlzUGxheWFibGUgPSBjYXBhYmlsaXRpZXMuaXNQbGF5YWJsZTsgICAgICAgICAgICAgICAgICAgICAgLy8gZmFsc2UKbGV0IGhhc0N1cnJlbnRJdGVtID0gY2FwYWJpbGl0aWVzLmhhc0N1cnJlbnRJdGVtOyAgICAgICAgICAgICAgLy8gdHJ1ZQpsZXQgaGFzTmF2aWdhdGlvbkJ1dHRvbnMgPSBjYXBhYmlsaXRpZXMuaGFzTmF2aWdhdGlvbkJ1dHRvbnM7ICAvLyB0cnVlCg==
let capabilities = $w("#myGallery").galleryCapabilities;

/*
 * {
 *   "isPlayable": false,
 *   "hasCurrentItem": true,
 *   "hasNavigationButtons": true
 * }
 */

let isPlayable = capabilities.isPlayable;                      // false
let hasCurrentItem = capabilities.hasCurrentItem;              // true
let hasNavigationButtons = capabilities.hasNavigationButtons;  // true
global

global

Indicates if an element appears on all pages or only on the current page.

Syntax

get global(): boolean

Description

If global is true, the element appears on all pages.

If global is false, the element only appears on the current page.

Type

Boolean

Examples

Get whether an element is displayed on all pages

bGV0IGlzR2xvYmFsID0gJHcoIiNteUVsZW1lbnQiKS5nbG9iYWw7IC8vIGZhbHNlCg==
let isGlobal = $w("#myElement").global; // false

Default Value

false

Mixed In From

$w.Element

hidden

hidden

Indicates if the element is visible or hidden.

Syntax

get hidden(): boolean

Description

If hidden is true, the element is not displayed on the page under any circumstances. A hidden element, unlike a collapsed element, continues to take up the same space on the page as it did when it was visible.

If hidden is false, the element may be displayed on the page.

However, an element whose hidden property is false will still not be displayed if:

Even if the element will not be displayed due to the conditions mentioned above, if its hidden property is set to false, it will be displayed when the conditions no longer apply.

To determine if the element is actually visible, use the isVisible property.

To set the hidden property on an element, use the element's hide() or show() functions.

If you select Hidden on load in the element's Properties panel in the Editor, the hidden property is set to true when the page loads.

Type

Boolean

Examples

Get an element's hidden status

bGV0IGlzSGlkZGVuID0gJHcoIiNteUVsZW1lbnQiKS5oaWRkZW47ICAvLyBmYWxzZQo=
let isHidden = $w("#myElement").hidden;  // false

Toggle an element's hidden state

aWYoICR3KCIjbXlFbGVtZW50IikuaGlkZGVuICkgewogICR3KCIjbXlFbGVtZW50Iikuc2hvdygpOwp9CmVsc2UgewogICR3KCIjbXlFbGVtZW50IikuaGlkZSgpOwp9Cg==
if( $w("#myElement").hidden ) {
  $w("#myElement").show();
}
else {
  $w("#myElement").hide();
}

Default Value

false

Mixed In From

$w.HiddenCollapsedMixin

See Also

hide( ), show( ), collapse( ), expand( ), collapsed, rendered

id

id

Gets the elements's ID.

Syntax

get id(): string

Description

The ID is the element's unique identifier. It is used when selecting elements using the $w() function.

An element's id is set in the Editor using the Properties panel.

Type

String

Examples

Get the ID

bGV0IG15SWQgPSAkdygiI215RWxlbWVudCIpLmlkOyAvLyAibXlFbGVtZW50Igo=
let myId = $w("#myElement").id; // "myElement"

Mixed In From

$w.Element

isPlaying

isPlaying

Indicates if the element is currently playing.

Syntax

get isPlaying(): boolean

Description

To set the isPlaying property on an element, use the element's play() and pause() functions.

If you select Autoplays on loading in the element's Settings panel in the Editor, the isPlaying property is set to true when the page loads.

Type

Boolean

Examples

Get an element's current playing status

bGV0IGlzUGxheWluZyA9ICR3KCIjbXlFbGVtZW50IikuaXNQbGF5aW5nOyAvLyBmYWxzZQo=
let isPlaying = $w("#myElement").isPlaying; // false

Toggle an element's current playing state

aWYoICR3KCIjbXlFbGVtZW50IikuaXNQbGF5aW5nICkgewogICR3KCIjbXlFbGVtZW50IikucGF1c2UoKTsKfQplbHNlIHsKICAkdygiI215RWxlbWVudCIpLnBsYXkoKTsKfQo=
if( $w("#myElement").isPlaying ) {
  $w("#myElement").pause();
}
else {
  $w("#myElement").play();
}

Mixed In From

$w.PlayableMixin

See Also

play( ), pause( )

isVisible

isVisible

Indicates if the element is actually visible.

Syntax

get isVisible(): boolean

Description

If isVisible is true, the element is displayed on the page.

If isVisible is false, the element is not displayed on the page.

The value of the isVisible property is calculated based on the hidden, collapsed, and rendered properties of the element and all of its ancestors. It will be true only if the conditions exist in the element's property values and the property values of its ancestors such that the element is actually displayed on the page.

Type

Boolean

Examples

Get whether an element is visible

bGV0IGlzVmlzaWJsZSA9ICR3KCIjbXlFbGVtZW50IikuaXNWaXNpYmxlOyAgLy8gdHJ1ZQo=
let isVisible = $w("#myElement").isVisible;  // true

Default Value

true

Mixed In From

$w.HiddenCollapsedMixin

See Also

hidden, collapsed, rendered

items

items

Sets or gets the items in a gallery.

Syntax

get items(): GalleryItem[]
set items(value: GalleryItem[]): void

Description

Setting the items property sets the gallery items that make up the gallery.

Set items to an empty array ([]) to remove the current gallery items.

Getting the items property returns the current list of gallery items that make up the gallery.

You cannot modify the gallery item array in-place. To add, change, or remove individual gallery items:

  1. Store the value of the items property in a variable.
  2. Make changes to the gallery items array.
  3. Reset the items property with the modified array.

Type

GalleryItem[ ]

Examples

Get the list of items and the first item's information

bGV0IGl0ZW1zID0gJHcoIiNteUdhbGxlcnkiKS5pdGVtczsKCmxldCBzcmMgPSBpdGVtc1swXS5zcmM7ICAgICAgICAgICAgICAgICAvLyAid2l4OmltYWdlOi8vdjEvNjhkM2E5XzFkZTc1MjljNDQ0YjRjOWViMzg0MDFmOGVmZTBjYWQyLmpwZy9mbG93ZXJzLmpwZy8jb3JpZ2luV2lkdGg9MTk3MCZvcmlnaW5IZWlnaHQ9MTEyMCIKbGV0IGRlc2NyaXB0aW9uID0gaXRlbXNbMF0uZGVzY3JpcHRpb247IC8vICJEZXNjcmlwdGlvbiIKbGV0IHRpdGxlID0gaXRlbXNbMF0udGl0bGU7ICAgICAgICAgICAgIC8vICJUaXRsZSIKbGV0IGxpbmsgPSBpdGVtc1swXS5saW5rOyAgICAgICAgICAgICAgIC8vICJodHRwIi8vd2l4LmNvbSIKbGV0IHRhcmdldCA9IGl0ZW1zWzBdLnRhcmdldDsgICAgICAgICAgIC8vICJfYmxhbmsiCg==
let items = $w("#myGallery").items;

let src = items[0].src;                 // "wix:image://v1/68d3a9_1de7529c444b4c9eb38401f8efe0cad2.jpg/flowers.jpg/#originWidth=1970&originHeight=1120"
let description = items[0].description; // "Description"
let title = items[0].title;             // "Title"
let link = items[0].link;               // "http"//wix.com"
let target = items[0].target;           // "_blank"

Set the list of items for a gallery

JHcoIiNteUdhbGxlcnkiKS5pdGVtcyA9IFsKICB7CiAgICAic3JjIjogIndpeDppbWFnZTovL3YxL2MzYWRiODIwMWFlNjRmYTFiZWY4MDM1M2Q0MTk4NDBhLmpwZy9CZWFjaCBIdXRzLyNvcmlnaW5XaWR0aD0xOTIwJm9yaWdpbkhlaWdodD0xOTIyIiwKICAgICJkZXNjcmlwdGlvbiI6ICJEZXNjcmlwdGlvbiAxIiwKICAgICJ0aXRsZSI6ICJUaXRsZSAxIgogIH0sCiAgewogICAgInNyYyI6ICJ3aXg6aW1hZ2U6Ly92MS9hOWZmM2JfNzEyNWNmODJiMTg4NDFjMjk2MWNlMGEyNDFiNzg4MjYuanBnL0ZlcnJpcyBXaGVlbC8jb3JpZ2luV2lkdGg9MTkyMCZvcmlnaW5IZWlnaHQ9MTI4MCIsCiAgICAiZGVzY3JpcHRpb24iOiAiRGVzY3JpcHRpb24gMiIsCiAgICAidGl0bGUiOiAiVGl0bGUgMiIKICB9LAogIHsKICAgICJzcmMiOiAid2l4OmltYWdlOi8vdjEvYTlmZjNiXzFkMGI4M2I4NzIzYzRkYzM5MTkyNDA1ZmQwODMxNDJhLmpwZy9QYWxtIFRyZWVzLyNvcmlnaW5XaWR0aD0xOTIwJm9yaWdpbkhlaWdodD0xMjgwIiwKICAgICJkZXNjcmlwdGlvbiI6ICJEZXNjcmlwdGlvbiAzIiwKICAgICJ0aXRsZSI6ICJUaXRsZSAzIgogIH0KXTsK
$w("#myGallery").items = [
  {
    "src": "wix:image://v1/c3adb8201ae64fa1bef80353d419840a.jpg/Beach Huts/#originWidth=1920&originHeight=1922",
    "description": "Description 1",
    "title": "Title 1"
  },
  {
    "src": "wix:image://v1/a9ff3b_7125cf82b18841c2961ce0a241b78826.jpg/Ferris Wheel/#originWidth=1920&originHeight=1280",
    "description": "Description 2",
    "title": "Title 2"
  },
  {
    "src": "wix:image://v1/a9ff3b_1d0b83b8723c4dc39192405fd083142a.jpg/Palm Trees/#originWidth=1920&originHeight=1280",
    "description": "Description 3",
    "title": "Title 3"
  }
];

Add an item to a gallery

This example retrieves the items of a gallery, adds a new item, and then overwrites the old items.

bGV0IGl0ZW1zID0gJHcoIiNteUdhbGxlcnkiKS5pdGVtczsKaXRlbXMucHVzaCggewogICJzcmMiOiAid2l4OmltYWdlOi8vdjEvNjhkM2E5XzFkZTc1MjljNDQ0YjRjOWViMzg0MDFmOGVmZTBjYWQyLmpwZy9mbG93ZXJzLmpwZy8jb3JpZ2luV2lkdGg9MTk3MCZvcmlnaW5IZWlnaHQ9MTEyMCIsCiAgImRlc2NyaXB0aW9uIjogIkRlc2NyaXB0aW9uIiwKICAidGl0bGUiOiAiVGl0bGUiCn0gKTsKJHcoIiNteUdhbGxlcnkiKS5pdGVtcyA9IGl0ZW1zOwo=
let items = $w("#myGallery").items;
items.push( {
  "src": "wix:image://v1/68d3a9_1de7529c444b4c9eb38401f8efe0cad2.jpg/flowers.jpg/#originWidth=1970&originHeight=1120",
  "description": "Description",
  "title": "Title"
} );
$w("#myGallery").items = items;
parent

parent

Gets the element's parent element.

Syntax

get parent(): Node

Description

Some elements can contain other elements. This occurs when you drag an element onto a container element. The container is the parent of all the elements it contains.

Page, Header, and Footer are top-level elements and have no parent.

Type

Node

Examples

Get the parent element and the parent's ID

bGV0IHBhcmVudEVsZW1lbnQgPSAkdygiI215RWxlbWVudCIpLnBhcmVudDsKCmxldCBwYXJlbnRJZCA9IHBhcmVudEVsZW1lbnQuaWQ7IC8vICJwYWdlMSIK
let parentElement = $w("#myElement").parent;

let parentId = parentElement.id; // "page1"

Default Value

null

Mixed In From

$w.Element

See Also

children

rendered

rendered

Indicates if an element is currently displayed.

Syntax

get rendered(): boolean

Description

If rendered is true, the element is in the current DOM structure and can be used.

If rendered is false the element is not in the current DOM structure.

Some reasons the element might not be in the DOM inclue:

  • It is in a slide which is not currently showing.
  • It is in a mode which is not currently active. For example, it is in the hover mode of a hover box.

Type

Boolean

Default Value

false

Mixed In From

$w.Element

See Also

collapsed, hidden, isVisible

showNavigationButtons

showNavigationButtons

Determines if a gallery's navigation arrows are shown.

Syntax

get showNavigationButtons(): boolean
set showNavigationButtons(value: boolean): void

Description

A gallery's navigation arrows allow a user to click through the items in the gallery.

Type

Boolean

type

type

Gets the element's type.

Syntax

get type(): string

Type

String

Examples

Get the element's type

bGV0IG15VHlwZSA9ICR3KCIjbXlFbGVtZW50IikudHlwZTsgLy8gIiR3LlR5cGUiCg==
let myType = $w("#myElement").type; // "$w.Type"

Mixed In From

$w.Element

collapse( )

collapse( )

Collapses the element and sets its collapsed property to true.

function collapse(): Promise<void>

Description

The collapse() function returns a Promise that is resolved when the element's collapsed property has been set to true.

To learn about the behavior of a collapsed element, see the collapsed property.

You can also collapse an element when the page loads by using the Properties panel in the Editor.

Return Value

Returns a Promise

On fulfillment void When the element's collapsed property has been set to true.

Examples

Collapse an element

JHcoIiNteUVsZW1lbnQiKS5jb2xsYXBzZSgpOwo=
$w("#myElement").collapse();

Collapse an element and log a message when done

JHcoIiNteUVsZW1lbnQiKS5jb2xsYXBzZSgpCiAgLnRoZW4oICgpID0+IHsKICAgIGNvbnNvbGUubG9nKCJEb25lIHdpdGggY29sbGFwc2UiKTsKICB9ICk7Cg==
$w("#myElement").collapse()
  .then( () => {
    console.log("Done with collapse");
  } );

Toggle an element's collapsed state

aWYoICR3KCIjbXlFbGVtZW50IikuY29sbGFwc2VkICkgewogICR3KCIjbXlFbGVtZW50IikuZXhwYW5kKCk7Cn0KZWxzZSB7CiAgJHcoIiNteUVsZW1lbnQiKS5jb2xsYXBzZSgpOwp9Cg==
if( $w("#myElement").collapsed ) {
  $w("#myElement").expand();
}
else {
  $w("#myElement").collapse();
}

Mixed In From

$w.HiddenCollapsedMixin

See Also

expand( ), collapsed, hide( )

expand( )

expand( )

Expands the element and sets its collapsed property to false.

function expand(): Promise<void>

Description

The expand() function returns a Promise that is resolved when the element's collapsed property has been set to false.

To learn about the behavior of an expanded element, see the collapsed property.

Return Value

Returns a Promise

On fulfillment void When the element's collapsed property has been set to false.

Examples

Expand an element

JHcoIiNteUVsZW1lbnQiKS5leHBhbmQoKTsK
$w("#myElement").expand();

Expand an element and log a message when done

JHcoIiNteUVsZW1lbnQiKS5leHBhbmQoKQogIC50aGVuKCAoKSA9PiB7CiAgICBjb25zb2xlLmxvZygiRG9uZSB3aXRoIGV4cGFuZCIpOwogIH0gKTsK
$w("#myElement").expand()
  .then( () => {
    console.log("Done with expand");
  } );

Toggle an element's collapsed state

aWYoICR3KCIjbXlFbGVtZW50IikuY29sbGFwc2VkICkgewogICR3KCIjbXlFbGVtZW50IikuZXhwYW5kKCk7Cn0KZWxzZSB7CiAgJHcoIiNteUVsZW1lbnQiKS5jb2xsYXBzZSgpOwp9Cg==
if( $w("#myElement").collapsed ) {
  $w("#myElement").expand();
}
else {
  $w("#myElement").collapse();
}

Mixed In From

$w.HiddenCollapsedMixin

See Also

expand( ), collapsed, show( )

hide( )

hide( )

Hides the element and sets its hidden property to true, using an effect if specified.

function hide([effectName: Effect], [effectOptions: EffectOptions]): Promise<void>
type Effect = "arc" | "bounce" | "fade" | "flip"
| "float" | "fly" | "fold" | "glide" | "puff"
| "roll" | "slide" | "spin" | "turn" | "zoom"
type EffectOptions = ArcEffectOptions | BounceEffectOptions
| FadeEffectOptions | FlipEffectOptions | FloatEffectOptions
| FlyEffectOptions | FoldEffectOptions | GlideEffectOptions
| PuffEffectOptions | RollEffectOptions | SlideEffectOptions
| SpinEffectOptions | TurnEffectOptions | ZoomEffectOptions

Description

The hide() function hides the element and returns a Promise that is resolved when the effect is complete and the element's hidden property has been set to true.

To learn about the behavior of a hidden element, see the hidden property.

You can optionally apply an effect when hiding the element by providing an effectName value. You can also customize the effect by providing the optional effectOptions object.

Effects:

You can also hide an element when the page loads by using the Properties panel in the Editor.

Parameters

effectName (optional) String The name of the effect to play when hiding the item.
effectOptions (optional) ArcEffectOptions |
BounceEffectOptions |
FadeEffectOptions |
FlipEffectOptions |
FloatEffectOptions |
FlyEffectOptions |
FoldEffectOptions |
GlideEffectOptions |
PuffEffectOptions |
RollEffectOptions |
SlideEffectOptions |
SpinEffectOptions |
TurnEffectOptions |
ZoomEffectOptions
The effect's options.

Return Value

Returns a Promise

On fulfillment void When the effect is complete and the element's hidden property has been set to true.

Examples

Hide an element with no effect

JHcoIiNteUVsZW1lbnQiKS5oaWRlKCk7Cg==
$w("#myElement").hide();

Hide an element with the "fade" effect

JHcoIiNteUVsZW1lbnQiKS5oaWRlKCJmYWRlIik7Cg==
$w("#myElement").hide("fade");

Hide an element with an effect and log message when the effect is done

bGV0IGZhZGVPcHRpb25zID0gewogICJkdXJhdGlvbiI6ICAgMjAwMCwKICAiZGVsYXkiOiAgICAgIDEwMDAKfTsKCiR3KCIjbXlFbGVtZW50IikuaGlkZSgiZmFkZSIsIGZhZGVPcHRpb25zKTsK
let fadeOptions = {
  "duration":   2000,
  "delay":      1000
};

$w("#myElement").hide("fade", fadeOptions);

Hide an element with an effect and log message when the effect is done

JHcoIiNteUVsZW1lbnQiKS5oaWRlKCJmYWRlIikKICAudGhlbiggKCApID0+IHsKICAgIGNvbnNvbGUubG9nKCJEb25lIHdpdGggZmFkZSIpOwp9ICk7Cg==
$w("#myElement").hide("fade")
  .then( ( ) => {
    console.log("Done with fade");
} );

Toggle an element's hidden state

aWYoICR3KCIjbXlFbGVtZW50IikuaGlkZGVuICkgewogICR3KCIjbXlFbGVtZW50Iikuc2hvdygpOwp9CmVsc2UgewogICR3KCIjbXlFbGVtZW50IikuaGlkZSgpOwp9Cg==
if( $w("#myElement").hidden ) {
  $w("#myElement").show();
}
else {
  $w("#myElement").hide();
}

Mixed In From

$w.HiddenCollapsedMixin

See Also

show( ), hidden, collapse( )

next( )

next( )

Moves to the next item.

function next(): Promise<Element>

Description

The next() function returns a Promise that is resolved when the next item is completely rendered. Calling next() when on the last item, moves to the first item.

Return Value

Returns a Promise

On fulfillment Element The newly displayed image or slide.

Examples

Move to the next item

JHcoIiNteUVsZW1lbnQiKS5uZXh0KCk7Cg==
$w("#myElement").next();

Move to the next item and log a message when done

JHcoIiNteUVsZW1lbnQiKS5uZXh0KCkKICAudGhlbiggKCkgPT4gewogICAgY29uc29sZS5sb2coIkZpbmlzaGVkIG1vdmluZyB0byB0aGUgbmV4dCBpdGVtIik7CiAgfSApOwo=
$w("#myElement").next()
  .then( () => {
    console.log("Finished moving to the next item");
  } );

Mixed In From

$w.PlayableMixin

See Also

previous( ), play( ), pause( )

onClick( )

onClick( )

Adds an event handler that runs when the element is clicked.

function onClick(handler: MouseEventHandler): Element
callback MouseEventHandler(event: MouseEvent, $w: Function): void

Description

An element receives a click event when a user clicks on the element and releases.

When a user double-clicks an element, two click events are fired before a doubleClick event is also fired.

Parameters

handler function(event, $w) The name of the function or the function expression to run when the element is clicked.
event MouseEvent The mouse event that occurred.
$w $w A selector function. The $w function enables event handlers to work with elements in repeaters and in the global scope.

Return Value

Element The element to which the event handler was added.

Examples

Get the ID of the element that was clicked

JHcoIiNteUVsZW1lbnQiKS5vbkNsaWNrKCAoZXZlbnQsICR3KSA9PiB7CiAgbGV0IHRhcmdldElkID0gZXZlbnQudGFyZ2V0LmlkOyAgLy8gIm15RWxlbWVudCIKfSApOwo=
$w("#myElement").onClick( (event, $w) => {
  let targetId = event.target.id;  // "myElement"
} );

Get a mouse click's coordinates

JHcoIiNteUVsZW1lbnQiKS5vbkNsaWNrKCAoZXZlbnQsICR3KSA9PiB7CiAgbGV0IGNsaWVudFggPSBldmVudC5jbGllbnRYOyAgLy8gMzYyCiAgbGV0IGNsaWVudFkgPSBldmVudC5jbGllbnRZOyAgLy8gMjQ0CiAgbGV0IG9mZnNldFggPSBldmVudC5vZmZzZXRYOyAgLy8gMTAKICBsZXQgb2Zmc2V0WSA9IGV2ZW50Lm9mZnNldFk7ICAvLyAxMgogIGxldCBwYWdlWCA9IGV2ZW50LnBhZ2VYOyAgICAgIC8vIDM2MgogIGxldCBwYWdlWSA9IGV2ZW50LnBhZ2VZOyAgICAgIC8vIDM3NgogIGxldCBzY3JlZW5YID0gZXZlbnQuc2NyZWVuWDsgIC8vIDM4OTcKICBsZXQgc2NyZWVuWSA9IGV2ZW50LnNjcmVlblk7ICAvLyAzNjIKfSApOwo=
$w("#myElement").onClick( (event, $w) => {
  let clientX = event.clientX;  // 362
  let clientY = event.clientY;  // 244
  let offsetX = event.offsetX;  // 10
  let offsetY = event.offsetY;  // 12
  let pageX = event.pageX;      // 362
  let pageY = event.pageY;      // 376
  let screenX = event.screenX;  // 3897
  let screenY = event.screenY;  // 362
} );

Mixed In From

$w.ClickableMixin

See Also

onDblClick( )

onCurrentItemChanged( )

onCurrentItemChanged( )

Adds an event handler that runs when a gallery's current item changes.

function onCurrentItemChanged(handler: GalleryChangeEventHandler): Gallery
callback GalleryChangeEventHandler(event: GalleryItemChangedEvent, $w: Function): void

Description

A gallery's current item changes through playing or certain user interactions.

Parameters

handler function(event, $w) The name of the function or the function expression to run when the gallery's current item changes.
event GalleryItemChangedEvent The event that occurred.
$w $w A selector function. The $w function enables event handlers to work with elements in repeaters and in the global scope.

Return Value

Gallery The gallery that triggered the event.

Examples

Get the information of the item that changed

JHcoIiNteUdhbGxlcnkiKS5vbkN1cnJlbnRJdGVtQ2hhbmdlZCggKGV2ZW50LCAkdykgPT4gewogIGxldCBpdGVtRGVzY3JpcHRpb24gPSBldmVudC5pdGVtLmRlc2NyaXB0aW9uOyAvLyAiRGVzY3JpcHRpb24iCiAgbGV0IGl0ZW1JbmRleCA9IGV2ZW50Lml0ZW1JbmRleDsgICAgICAgICAgICAgIC8vIDMKfSApOwo=
$w("#myGallery").onCurrentItemChanged( (event, $w) => {
  let itemDescription = event.item.description; // "Description"
  let itemIndex = event.itemIndex;              // 3
} );
onDblClick( )

onDblClick( )

Adds an event handler that runs when the element is double-clicked.

function onDblClick(handler: MouseEventHandler): Element
callback MouseEventHandler(event: MouseEvent, $w: Function): void

Description

An element receives a dblClick event when a user double-clicks on the element and releases.

When a user double-clicks an element, two click events are fired before a doubleClick event is also fired.

Parameters

handler function(event, $w) The name of the function or the function expression to run when the element is clicked.
event MouseEvent The mouse event that occurred.
$w $w A selector function. The $w function enables event handlers to work with elements in repeaters and in the global scope.

Return Value

Element The element to which the event handler was added.

Examples

Get the ID of the element that was double-clicked

JHcoIiNteUVsZW1lbnQiKS5vbkNsaWNrKCAoZXZlbnQsICR3KSA9PiB7CiAgbGV0IHRhcmdldElkID0gZXZlbnQudGFyZ2V0LmlkOyAgLy8gIm15RWxlbWVudCIKfSApOwo=
$w("#myElement").onClick( (event, $w) => {
  let targetId = event.target.id;  // "myElement"
} );

Mixed In From

$w.ClickableMixin

See Also

onClick( )

onItemClicked( )

onItemClicked( )

Adds an event handler that runs when an item in a gallery is clicked.

function onItemClicked(handler: GalleryItemClickedEventHandler): Gallery
callback GalleryItemClickedEventHandler(event: GalleryItemClickedEvent, $w: Function): void

Parameters

handler function(event, $w) The name of the function or the function expression to run when a gallery item is clicked.
event GalleryItemClickedEvent The event that has occurred.
$w $w A selector function. The $w function enables event handlers to work with elements in repeaters and in the global scope.

Return Value

Gallery The gallery that triggered the event.

Examples

Get the information of the item that was clicked

JHcoIiNteUdhbGxlcnkiKS5vbkl0ZW1DbGlja2VkKCAoZXZlbnQsICR3KSA9PiB7CiAgbGV0IGl0ZW1EZXNjcmlwdGlvbiA9IGV2ZW50Lml0ZW0uZGVzY3JpcHRpb247IC8vICJEZXNjcmlwdGlvbiIKICBsZXQgaXRlbUluZGV4ID0gZXZlbnQuaXRlbUluZGV4OyAgICAgICAgICAgICAgLy8gMwp9ICk7Cg==
$w("#myGallery").onItemClicked( (event, $w) => {
  let itemDescription = event.item.description; // "Description"
  let itemIndex = event.itemIndex;              // 3
} );

See Also

clickAction

onMouseIn( )

onMouseIn( )

Adds an event handler that runs when the mouse pointer is moved onto the element.

function onMouseIn(handler: MouseEventHandler): Element
callback MouseEventHandler(event: MouseEvent, $w: Function): void

Parameters

handler function(event, $w) The name of the function or the function expression to run when the mouse pointer is moved onto the element.
event MouseEvent The mouse event that occurred.
$w $w A selector function. The $w function enables event handlers to work with elements in repeaters and in the global scope.

Return Value

Element The element to which the event handler was added.

Examples

Get the mouse event info when the mouse enters an element

JHcoIiNteUVsZW1lbnQiKS5vbk1vdXNlSW4oIChldmVudCwgJHcpID0+IHsKICBsZXQgY2xpZW50WCA9IGV2ZW50LmNsaWVudFg7ICAvLyAzNjIKICBsZXQgY2xpZW50WSA9IGV2ZW50LmNsaWVudFk7ICAvLyAyNDQKICBsZXQgb2Zmc2V0WCA9IGV2ZW50Lm9mZnNldFg7ICAvLyAxMAogIGxldCBvZmZzZXRZID0gZXZlbnQub2Zmc2V0WTsgIC8vIDEyCiAgbGV0IHBhZ2VYID0gZXZlbnQucGFnZVg7ICAgICAgLy8gMzYyCiAgbGV0IHBhZ2VZID0gZXZlbnQucGFnZVk7ICAgICAgLy8gMzc2CiAgbGV0IHNjcmVlblggPSBldmVudC5zY3JlZW5YOyAgLy8gMzg5NwogIGxldCBzY3JlZW5ZID0gZXZlbnQuc2NyZWVuWTsgIC8vIDM2Mgp9ICk7Cg==
$w("#myElement").onMouseIn( (event, $w) => {
  let clientX = event.clientX;  // 362
  let clientY = event.clientY;  // 244
  let offsetX = event.offsetX;  // 10
  let offsetY = event.offsetY;  // 12
  let pageX = event.pageX;      // 362
  let pageY = event.pageY;      // 376
  let screenX = event.screenX;  // 3897
  let screenY = event.screenY;  // 362
} );

Mixed In From

$w.Element

onMouseOut( )

onMouseOut( )

Adds an event handler that runs when the mouse pointer is moved off of the element.

function onMouseOut(handler: MouseEventHandler): Element
callback MouseEventHandler(event: MouseEvent, $w: Function): void

Parameters

handler function(event, $w) The name of the function or the function expression to run when the mouse pointer is moved off of the element.
event MouseEvent The mouse event that occurred.
$w $w A selector function. The $w function enables event handlers to work with elements in repeaters and in the global scope.

Return Value

Element The element to which the event handler was added.

Examples

Get the mouse event info when the mouse exits an element

JHcoIiNteUVsZW1lbnQiKS5vbk1vdXNlT3V0KCAoZXZlbnQsICR3KSA9PiB7CiAgbGV0IGNsaWVudFggPSBldmVudC5jbGllbnRYOyAgLy8gMzYyCiAgbGV0IGNsaWVudFkgPSBldmVudC5jbGllbnRZOyAgLy8gMjQ0CiAgbGV0IG9mZnNldFggPSBldmVudC5vZmZzZXRYOyAgLy8gMTAKICBsZXQgb2Zmc2V0WSA9IGV2ZW50Lm9mZnNldFk7ICAvLyAxMgogIGxldCBwYWdlWCA9IGV2ZW50LnBhZ2VYOyAgICAgIC8vIDM2MgogIGxldCBwYWdlWSA9IGV2ZW50LnBhZ2VZOyAgICAgIC8vIDM3NgogIGxldCBzY3JlZW5YID0gZXZlbnQuc2NyZWVuWDsgIC8vIDM4OTcKICBsZXQgc2NyZWVuWSA9IGV2ZW50LnNjcmVlblk7ICAvLyAzNjIKfSApOwo=
$w("#myElement").onMouseOut( (event, $w) => {
  let clientX = event.clientX;  // 362
  let clientY = event.clientY;  // 244
  let offsetX = event.offsetX;  // 10
  let offsetY = event.offsetY;  // 12
  let pageX = event.pageX;      // 362
  let pageY = event.pageY;      // 376
  let screenX = event.screenX;  // 3897
  let screenY = event.screenY;  // 362
} );

Mixed In From

$w.Element

onPause( )

onPause( )

Adds an event handler that runs when playback is paused.

function onPause(handler: EventHandler): Gallery | Slideshow
callback EventHandler(event: Event, $w: Function): void

Description

An element can be paused by a user clicking the gallery or slideshow's pause button or by calling its pause() function

Parameters

handler function(event, $w) The name of the function or the function expression to run when the element is paused.
event Event The event that occurred.
$w $w A selector function. The $w function enables event handlers to work with elements in repeaters and in the global scope.

Return Value

Gallery Slideshow The gallery or slideshow that triggered the event.

Examples

Get the ID of the element that has been paused

JHcoIiNteUVsZW1lbnQiKS5vblBhdXNlKCAoZXZlbnQsICR3KSA9PiB7CiAgbGV0IHRhcmdldElkID0gZXZlbnQudGFyZ2V0LmlkOyAvLyAibXlFbGVtZW50Igp9KTsK
$w("#myElement").onPause( (event, $w) => {
  let targetId = event.target.id; // "myElement"
});

Mixed In From

$w.PlayableMixin

See Also

pause( )

onPlay( )

onPlay( )

Adds an event handler that runs when playback is started or restarted.

function onPlay(handler: EventHandler): Gallery | Slideshow
callback EventHandler(event: Event, $w: Function): void

Description

An element can be played by a user clicking the gallery or slideshow's play button, by calling its play() function.

Parameters

handler function(event, $w) The name of the function or the function expression to run when the element is played.
event Event The event that occurred.
$w $w A selector function. The $w function enables event handlers to work with elements in repeaters and in the global scope.

Return Value

Gallery Slideshow The gallery or slideshow that triggered the event.

Examples

Get the ID of the element that has is playing

JHcoIiNteUVsZW1lbnQiKS5vblBsYXkoIChldmVudCwgJHcpID0+IHsKICBsZXQgdGFyZ2V0SWQgPSBldmVudC50YXJnZXQuaWQ7IC8vICJteUVsZW1lbnQiCn0pOwo=
$w("#myElement").onPlay( (event, $w) => {
  let targetId = event.target.id; // "myElement"
});

Mixed In From

$w.PlayableMixin

See Also

play( )

onViewportEnter( )

onViewportEnter( )

Adds an event handler that runs when an element is displayed in the viewable part of the current window.

function onViewportEnter(handler: EventHandler): Element
callback EventHandler(event: Event, $w: Function): void

Description

An element enters the viewport when the page is scrolled to show any part of the element. An element also enters the viewport if it was hidden or collapsed and is then shown or expanded in the viewable part of the current window.

Parameters

handler function(event, $w) The name of the function or the function expression to run when the element enters the viewport.
event Event The event that occurred.
$w $w A selector function. The $w function enables event handlers to work with elements in repeaters and in the global scope.

Return Value

Element The element on which the event is now registered.

Examples

Get the ID of the element that has entered the viewport

JHcoIiNteUVsZW1lbnQiKS5vblZpZXdwb3J0RW50ZXIoIChldmVudCwgJHcpID0+IHsKICBsZXQgdGFyZ2V0SWQgPSBldmVudC50YXJnZXQuaWQ7IC8vICJteUVsZW1lbnQiCn0pOwo=
$w("#myElement").onViewportEnter( (event, $w) => {
  let targetId = event.target.id; // "myElement"
});

Mixed In From

$w.Element

See Also

onViewportLeave( )

onViewportLeave( )

onViewportLeave( )

Adds an event handler that runs when an element is no longer displayed in the viewable part of the current window.

function onViewportLeave(handler: EventHandler): Element
callback EventHandler(event: Event, $w: Function): void

Description

An element leaves the viewport when the page is scrolled so that the elements is completely out of view. An element also leaves the viewport if it was shown or expanded and is then hidden or collapsed from the viewable part of the current window.

Parameters

handler function(event, $w) The name of the function or the function expression to run when the element leaves the viewport.
event Event The event that occurred.
$w $w A selector function. The $w function enables event handlers to work with elements in repeaters and in the global scope.

Return Value

Element The element on which the event is now registered.

Examples

Get the ID of the element that has entered the viewport

JHcoIiNteUVsZW1lbnQiKS5vblZpZXdwb3J0TGVhdmUoIChldmVudCwgJHcpID0+IHsKICBsZXQgdGFyZ2V0SWQgPSBldmVudC50YXJnZXQuaWQ7IC8vICJteUVsZW1lbnQiCn0pOwo=
$w("#myElement").onViewportLeave( (event, $w) => {
  let targetId = event.target.id; // "myElement"
});

Mixed In From

$w.Element

See Also

ViewportMixin-onViewportEnter( )

pause( )

pause( )

Pauses playback.

function pause(): void;

Description

The pause() function pauses a slideshow or playable gallery and fires a pause event.

The pause event handlers set on this element by the onPause( ) function or in the Editor will called.

Examples

Pauses playback

JHcoIiNteUVsZW1lbnQiKS5wYXVzZSgpOwo=
$w("#myElement").pause();

Toggle an element's current playing state

aWYoICR3KCIjbXlFbGVtZW50IikuaXNQbGF5aW5nICkgewogICR3KCIjbXlFbGVtZW50IikucGF1c2UoKTsKfQplbHNlIHsKICAkdygiI215RWxlbWVudCIpLnBsYXkoKTsKfQo=
if( $w("#myElement").isPlaying ) {
  $w("#myElement").pause();
}
else {
  $w("#myElement").play();
}

Mixed In From

$w.PlayableMixin

See Also

play( ), onPause( )

play( )

play( )

Begins or resumes playback.

function play(): void;

Description

The play() function plays a slideshow or playable gallery and fires a play event.

The play event handlers set on this element by the onPlay( ) function or in the Editor will called.

Examples

Begins or resumes playback

JHcoIiNteUVsZW1lbnQiKS5wbGF5KCk7Cg==
$w("#myElement").play();

Toggle an element's current playing state

aWYoICR3KCIjbXlFbGVtZW50IikuaXNQbGF5aW5nICkgewogICR3KCIjbXlFbGVtZW50IikucGF1c2UoKTsKfQplbHNlIHsKICAkdygiI215RWxlbWVudCIpLnBsYXkoKTsKfQo=
if( $w("#myElement").isPlaying ) {
  $w("#myElement").pause();
}
else {
  $w("#myElement").play();
}

Mixed In From

$w.PlayableMixin

See Also

pause( ), onPlay( )

previous( )

previous( )

Moves to the previous image or slide.

function previous(): Promise<Element>

Description

The previous() function returns a Promise that is resolved when the previous image or slide is completely rendered. Calling previous() when on the first item, moves to the last item.

Return Value

Returns a Promise

On fulfillment Element The newly displayed image or slide.

Examples

Move to the previous item

JHcoIiNteUVsZW1lbnQiKS5wcmV2aW91cygpOwo=
$w("#myElement").previous();

Move to the previous item and log a message when done

JHcoIiNteUVsZW1lbnQiKS5wcmV2aW91cygpCiAgLnRoZW4oICgpID0+IHsKICAgIGNvbnNvbGUubG9nKCJGaW5pc2hlZCBtb3ZpbmcgdG8gdGhlIHByZXZpb3VzIGl0ZW0iKTsKICB9ICk7Cg==
$w("#myElement").previous()
  .then( () => {
    console.log("Finished moving to the previous item");
  } );

Mixed In From

$w.PlayableMixin

See Also

next( )

scrollTo( )

scrollTo( )

Scrolls the page to the element using an animation.

function scrollTo(): Promise<void>

Description

The scrollTo() function returns a Promise that is resolved when the animated scroll is complete and the element is now in view.

To scroll to a specific location on the page, see the wix-window scrollTo() function.

Calling the scrollTo() function on an element in a repeated item that is selected from the global scope causes an error.

Return Value

Returns a Promise

On fulfillment void When the scroll is complete.

Examples

Scroll the page to an element

JHcoIiNteUVsZW1lbnQiKS5zY3JvbGxUbygpOwo=
$w("#myElement").scrollTo();

Scroll the page to an element and log message when done

JHcoIiNteUVsZW1lbnQiKS5zY3JvbGxUbygpCiAgLnRoZW4oICggKSA9PiB7CiAgICBjb25zb2xlLmxvZygiRG9uZSB3aXRoIHNjcm9sbCIpOwp9ICk7Cg==
$w("#myElement").scrollTo()
  .then( ( ) => {
    console.log("Done with scroll");
} );

Mixed In From

$w.Element

show( )

show( )

Shows the element and sets its hidden property to false, using an effect if specified.

function show([effectName: Effect], [effectOptions: EffectOptions]): Promise<void>
type Effect = "arc" | "bounce" | "fade" | "flip"
| "float" | "fly" | "fold" | "glide" | "puff"
| "roll" | "slide" | "spin" | "turn" | "zoom"
type EffectOptions = ArcEffectOptions | BounceEffectOptions
| FadeEffectOptions | FlipEffectOptions | FloatEffectOptions
| FlyEffectOptions | FoldEffectOptions | GlideEffectOptions
| PuffEffectOptions | RollEffectOptions | SlideEffectOptions
| SpinEffectOptions | TurnEffectOptions | ZoomEffectOptions

Description

The show() function shows the element and returns a Promise that is resolved when the effect is complete and the element's hidden property has been set to false.

You can optionally apply an effect when showing the element by providing an effectName value. You can also customize the effect by providing the optional effectOptions object.

Effects:

Parameters

effectName (optional) String The name of the effect to play when showing the item.
effectOptions (optional) ArcEffectOptions |
BounceEffectOptions |
FadeEffectOptions |
FlipEffectOptions |
FloatEffectOptions |
FlyEffectOptions |
FoldEffectOptions |
GlideEffectOptions |
PuffEffectOptions |
RollEffectOptions |
SlideEffectOptions |
SpinEffectOptions |
TurnEffectOptions |
ZoomEffectOptions
The effect's options.

Return Value

Returns a Promise

On fulfillment void When the effect is complete and the element's hidden property has been set to false.

Examples

Show an element with no effect

JHcoIiNteUVsZW1lbnQiKS5zaG93KCk7Cg==
$w("#myElement").show();

Show an element with the "fade" effect

JHcoIiNteUVsZW1lbnQiKS5zaG93KCJGYWRlSW4iKTsK
$w("#myElement").show("FadeIn");

Show an element with the "fade" effect and custom options

JHcoIiNteUVsZW1lbnQiKS5zaG93KCJGYWRlSW4iKTsK
$w("#myElement").show("FadeIn");

Show an element with an effect and log message when the effect is done

bGV0IGZhZGVPcHRpb25zID0gewogICJkdXJhdGlvbiI6ICAgMjAwMCwKICAiZGVsYXkiOiAgICAgIDEwMDAKfTsKCiR3KCIjbXlFbGVtZW50Iikuc2hvdygiZmFkZSIsIGZhZGVPcHRpb25zKTsK
let fadeOptions = {
  "duration":   2000,
  "delay":      1000
};

$w("#myElement").show("fade", fadeOptions);

Toggle an element's hidden state

aWYoICR3KCIjbXlFbGVtZW50IikuaGlkZGVuICkgewogICR3KCIjbXlFbGVtZW50Iikuc2hvdygpOwp9CmVsc2UgewogICR3KCIjbXlFbGVtZW50IikuaGlkZSgpOwp9Cg==
if( $w("#myElement").hidden ) {
  $w("#myElement").show();
}
else {
  $w("#myElement").hide();
}

Mixed In From

$w.HiddenCollapsedMixin

See Also

hide( ), hidden, expand( )

GalleryCapabilities

GalleryCapabilities

An object used by the galleryCapabilities property that contains the capabilities of a gallery.

Type

Object

Properties

isPlayable Boolean Indicates if the gallery supports play operations.
hasCurrentItem Boolean Indicates if the gallery supports the notion of a current item.
hasNavigationButtons Boolean Indicates if the gallery supports navigation buttons.

Examples

Get the gallery's capabilities

bGV0IGNhcGFiaWxpdGllcyA9ICR3KCIjbXlHYWxsZXJ5IikuZ2FsbGVyeUNhcGFiaWxpdGllczsKCi8qCiAqIHsKICogICAiaXNQbGF5YWJsZSI6IGZhbHNlLAogKiAgICJoYXNDdXJyZW50SXRlbSI6IHRydWUsCiAqICAgImhhc05hdmlnYXRpb25CdXR0b25zIjogdHJ1ZQogKiB9CiAqLwoKbGV0IGlzUGxheWFibGUgPSBjYXBhYmlsaXRpZXMuaXNQbGF5YWJsZTsgICAgICAgICAgICAgICAgICAgICAgLy8gZmFsc2UKbGV0IGhhc0N1cnJlbnRJdGVtID0gY2FwYWJpbGl0aWVzLmhhc0N1cnJlbnRJdGVtOyAgICAgICAgICAgICAgLy8gdHJ1ZQpsZXQgaGFzTmF2aWdhdGlvbkJ1dHRvbnMgPSBjYXBhYmlsaXRpZXMuaGFzTmF2aWdhdGlvbkJ1dHRvbnM7ICAvLyB0cnVlCg==
let capabilities = $w("#myGallery").galleryCapabilities;

/*
 * {
 *   "isPlayable": false,
 *   "hasCurrentItem": true,
 *   "hasNavigationButtons": true
 * }
 */

let isPlayable = capabilities.isPlayable;                      // false
let hasCurrentItem = capabilities.hasCurrentItem;              // true
let hasNavigationButtons = capabilities.hasNavigationButtons;  // true

See Also

galleryCapabilities

GalleryItem

GalleryItem

An object used by the Gallery properties items and currentItem to represent a single item in a gallery.

Description

The src property of a GalleryItem for a Pro Gallery can be:

The src property of a GalleryItem for a standard gallery can be:

  • An image from the Media Manager
  • An external image from any web location (some galleries do not support external images)

To determine if your gallery is a Pro Gallery or a standard gallery, hover over the gallery while it is not selected. The gallery type appears above the upper left corner of the gallery. If the type is "Wix Pro Gallery", then your gallery is a Pro Gallery. If the type is anything other than "Wix Pro Gallery", your gallery gallery is a standard gallery.

The URL formats supported are:

  • Images from the Media Manager: wix:image://v1/<uri>/<filename>/#originWidth=<width>&originHeight=<height>[&watermark=<watermark_manifest_string>]
  • Videos from the Media Manager: wix:video://v1/<video_uri>/<filename>/#posterUri=<poster_uri>&posterWidth=<width>&posterHeight=<height>
  • Images from the web: http(s)://<image url>

Type

Object

Properties

src String The item's URL.
description (optional) String The item's description. Descriptions over 100 characters will be truncated.
title (optional) String The item's title.
link (optional) String The URL of the item's clickable link. See here for more information about links.
target (optional) String The target of the link, either "_blank" or "_self"

See Also

items, currentItem