CodeAPI

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.

Table of Contents

PROPERTIES

?
Store values associated with an object.
clickActionSets or gets the action that occurs when an item in the gallery is clicked.
collapsedIndicates if the element is collapsed or expanded.
currentIndexGets the index of the gallery's current item.
currentItemGets an object containing information about the current item.
galleryCapabilitiesGets an object containing information about the gallery's capabilities.
globalIndicates if an element appears on all pages or only on the current page.
hiddenIndicates if the element is visible or hidden.
idGets the elements's ID.
isPlayingIndicates if the element is currently playing.
isVisibleIndicates if the element is actually visible.
itemsSets or gets the items in a gallery.
parentGets the element's parent element.
renderedIndicates if an element is currently displayed.
showNavigationButtonsDetermines if a gallery's navigation arrows are shown.
typeGets the element's type.

FUNCTIONS

?
Perform actions on an object.
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.
onCurrentItemChanged( )Adds an event handler that runs when a gallery's current item changes.
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.

OBJECTS

?
Objects used when setting, getting, or calling the properties and methods listed above.
GalleryCapabilitiesAn object used by the galleryCapabilities property that contains the capabilities of a gallery.
ImageItemAn object used by the Gallery properties items and currentItem to represent a single gallery image.
VideoItemAn object used by the Gallery properties items and currentItem to represent a single gallery video.

MIXES IN

?
Where some functionality is inherited from.
$w.Element, $w.HiddenCollapsedMixin, $w.PlayableMixin

clickAction

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

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 popup window.
  • "link": The item's link opens.

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

Syntax

get clickAction(): string
set clickAction(value: string): void
TYPE
?
The kind of data the property stores.
string

Examples

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

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

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

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

collapsed

Indicates if the element is collapsed or expanded.

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 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) is still not displayed if:

Even if the element is not be displayed due to the conditions mentioned above, if its collapsed property is false, it's 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.

See Also

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

Syntax

get collapsed(): boolean
TYPE
?
The kind of data the property stores.
boolean
DEFAULT VALUE
?
The value of a property before you explicitly set it.
false

MIXED IN FROM

?
Where this functionality is inherited from.
$w.HiddenCollapsedMixin

Examples

Get an element's collapsed status

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

Toggle an element's collapsed state

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

currentIndex

Gets the index of the gallery's current item.

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.

Note

The currentIndex property is supported by galleries where the hasCurrentItem capability is true.

If you change the gallery's type to one that doesn't support currentIndex and you try to use it, your code may no longer function correctly.

Syntax

get currentIndex(): number
TYPE
?
The kind of data the property stores.
number

Examples

Get the index of the gallery's current item

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

currentItem

Gets an object containing information about the current item.

Note

The currentItem property is supported by galleries where the hasCurrentItem capability is true.

If you change the gallery's type to one that doesn't support hasCurrentItem and you try to use it, your code may no longer function correctly.

Syntax

get currentItem(): ImageItem | VideoItem

galleryCapabilities

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

Syntax

get galleryCapabilities(): GalleryCapabilities

Examples

Get the gallery's capabilities

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

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

Description

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

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

Syntax

get global(): boolean
TYPE
?
The kind of data the property stores.
boolean
DEFAULT VALUE
?
The value of a property before you explicitly set it.
false

MIXED IN FROM

?
Where this functionality is inherited from.
$w.Element

Examples

Get whether an element is displayed on all pages

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

hidden

Indicates if the element is visible or hidden.

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 is still not displayed if:

Even if the element is not displayed due to the conditions mentioned above, if its hidden property is set to false, it's 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.

Note

An element's hidden property is not the same as its isVisible property. The hidden property indicates whether the element should be displayed, while isVisible indicates if it is actually displayed.

See Also

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

Syntax

get hidden(): boolean
TYPE
?
The kind of data the property stores.
boolean
DEFAULT VALUE
?
The value of a property before you explicitly set it.
false

MIXED IN FROM

?
Where this functionality is inherited from.
$w.HiddenCollapsedMixin

Examples

Get an element's hidden status

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

Toggle an element's hidden state

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

id

Gets the elements's ID.

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.

Syntax

get id(): string
TYPE
?
The kind of data the property stores.
string

MIXED IN FROM

?
Where this functionality is inherited from.
$w.Element

Examples

Get the ID

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

isPlaying

Indicates if the element is currently playing.

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.

See Also

play( ), pause( )

Syntax

get isPlaying(): boolean
TYPE
?
The kind of data the property stores.
boolean

MIXED IN FROM

?
Where this functionality is inherited from.
$w.PlayableMixin

Examples

Get an element's current playing status

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

Toggle an element's current playing state

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

isVisible

Indicates if the element is actually visible.

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 is 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.

Note

An element's isVisible property is not the same as its hidden property. The isVisible property indicates whether the element is actually displayed, while hidden indicates if it should be displayed.

The isVisible property of an element remains true even if another element completely covers it so that a user cannot see it.

See Also

hidden, collapsed, rendered

Syntax

get isVisible(): boolean
TYPE
?
The kind of data the property stores.
boolean
DEFAULT VALUE
?
The value of a property before you explicitly set it.
true

MIXED IN FROM

?
Where this functionality is inherited from.
$w.HiddenCollapsedMixin

Examples

Get whether an element is visible

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

items

Sets or gets the items in a gallery.

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.

Note

You can only get the items of a Pro Gallery using the items property if you set its items using the items property or connect the gallery to a dataset first. If you set the gallery's items in the Editor, you are not be able to retrieve them with the items property. This limitation does not apply to standard galleries.

To determine if your gallery is a Pro 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", the limitation described above does not apply to your gallery.

Syntax

get items(): Array<ImageItem> | Array<VideoItem>
set items(value: Array<ImageItem> | Array<VideoItem>): void

Examples

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

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

$w('#myGallery').items = [
  {
    "title": "Plants",
    "src": "wix:image://v1/b9c015a001da419a9b6b4618158bbc28.jpg/Plants.jpg#originWidth=5472&originHeight=3648"
  },
  {
    "title": "Bouquet",
    "src": "wix:image://v1/b1d0014f7b604fa8acdbb32e9f9f11a4.jpg/Bouquet.jpg#originWidth=5760&originHeight=3840"
  },
  {
    "title": "Ceramics",
    "src": "wix:image://v1/a38649d65bd949f1a23175c75483200f.jpg/Ceramics.jpg#originWidth=2920&originHeight=1357"
  },
  {
    "title": "Poster",
    "src": "wix:image://v1/26eb4aec7a214877925d3c03b8bafd9a.jpg/Poster.jpg#originWidth=3024&originHeight=4032"
  }
];

Add an item to a gallery

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

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

Gets the element's parent element.

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.

See Also

children

Syntax

get parent(): Node
TYPE
?
The kind of data the property stores.
DEFAULT VALUE
?
The value of a property before you explicitly set it.
null

MIXED IN FROM

?
Where this functionality is inherited from.
$w.Element

Examples

Get the parent element and the parent's ID

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

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

rendered

Indicates if an element is currently displayed.

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.

See Also

collapsed, hidden, isVisible

Syntax

get rendered(): boolean
TYPE
?
The kind of data the property stores.
boolean
DEFAULT VALUE
?
The value of a property before you explicitly set it.
false

MIXED IN FROM

?
Where this functionality is inherited from.
$w.Element

showNavigationButtons

Determines if a gallery's navigation arrows are shown.

Description

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

Note

The showNavigationButtons property is supported by galleries where the hasNavigationButtons capability is true.

If you change the gallery's type to one that doesn't support hasNavigationButtons and you try to use it, your code may no longer function correctly.

Syntax

get showNavigationButtons(): boolean
set showNavigationButtons(value: boolean): void
TYPE
?
The kind of data the property stores.
boolean

type

Gets the element's type.

Syntax

get type(): string
TYPE
?
The kind of data the property stores.
string

MIXED IN FROM

?
Where this functionality is inherited from.
$w.Element

Examples

Get the element's type

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

collapse( )

Collapses the element and sets its collapsed property to true.

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.

See Also

expand( ), collapsed, hide( )

Syntax

function collapse(): Promise<void>
RETURN VALUE
?
Value that a function evaluates to when it is finished running.
Promise<void>
Fulfilled - When the element's collapsed property has been set to true.

MIXED IN FROM

?
Where this functionality is inherited from.
$w.HiddenCollapsedMixin

Examples

Collapse an element

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

Collapse an element and log a message when done

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

Toggle an element's collapsed state

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

expand( )

Expands the element and sets its collapsed property to false.

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.

See Also

expand( ), collapsed, show( )

Syntax

function expand(): Promise<void>
RETURN VALUE
?
Value that a function evaluates to when it is finished running.
Promise<void>
Fulfilled - When the element's collapsed property has been set to false.

MIXED IN FROM

?
Where this functionality is inherited from.
$w.HiddenCollapsedMixin

Examples

Expand an element

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

Expand an element and log a message when done

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

Toggle an element's collapsed state

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

hide( )

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

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.

See Also

show( ), hidden, collapse( )

Syntax

function hide([effectName: string], [effectOptions: ArcEffectOptions | BounceEffectOptions | FadeEffectOptions | FlipEffectOptions | FloatEffectOptions | FlyEffectOptions | FoldEffectOptions | GlideEffectOptions | PuffEffectOptions | RollEffectOptions | SlideEffectOptions | SpinEffectOptions | TurnEffectOptions | ZoomEffectOptions]): Promise<void>
RETURN VALUE
?
Value that a function evaluates to when it is finished running.
Promise<void>
Fulfilled - When the effect is complete and the element's hidden property has been set to true.

MIXED IN FROM

?
Where this functionality is inherited from.
$w.HiddenCollapsedMixin

Examples

Hide an element with no effect

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

Hide an element with the "fade" effect

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

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

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

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

Toggle an element's hidden state

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

next( )

Moves to the next item.

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.

Note

When using next() on a gallery, make sure the gallery is one where the isPlayable capability is true.

If you change a gallery's type to one that doesn't support next(), your code may longer function correctly.

See Also

previous( ), play( ), pause( )

Syntax

function next(): Promise<Element>
RETURN VALUE
?
Value that a function evaluates to when it is finished running.
Promise<Element>
Fulfilled - The newly displayed image or slide.

MIXED IN FROM

?
Where this functionality is inherited from.
$w.PlayableMixin

Examples

Move to the next item

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

Move to the next item and log a message when done

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

onCurrentItemChanged( )

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

Description

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

Note

The onCurrentItemChanged() function is supported by galleries where the hasCurrentItem capability is true.

If you change the gallery's type to one that doesn't support hasCurrentItem and you try to use it, your code may no longer function correctly.

Deprecation note: The $w parameter of event handlers is being deprecated. To get a scoped selector, use the $w.at() function and pass it the context property of the event parameter: $item = $w.at(event.context). To learn more, see here.

Syntax

function onCurrentItemChanged(handler: GalleryItemChangedEventHandler): Gallery
callback GalleryItemChangedEventHandler(event: GalleryItemChangedEvent, $w: $w): void
PARAMETERS
?
The kind of data the property stores.
handler
function(event: GalleryItemChangedEvent, $w: $w)

The name of the function or the function expression to run when the gallery's current item changes.

RETURN VALUE
?
Value that a function evaluates to when it is finished running.
The gallery that triggered the event.

Examples

Get the information of the item that changed

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

onItemClicked( )

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

Note

Deprecation note: The $w parameter of event handlers is being deprecated. To get a scoped selector, use the $w.at() function and pass it the context property of the event parameter: $item = $w.at(event.context). To learn more, see here.

See Also

clickAction

Syntax

function onItemClicked(handler: GalleryItemClickedEventHandler): Gallery
callback GalleryItemClickedEventHandler(event: GalleryItemClickedEvent, $w: $w): void
PARAMETERS
?
The kind of data the property stores.
handler
function(event: GalleryItemClickedEvent, $w: $w)

The name of the function or the function expression to run when a gallery item is clicked.

RETURN VALUE
?
Value that a function evaluates to when it is finished running.
The gallery that triggered the event.

Examples

Get the information of the item that was clicked

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

onMouseIn( )

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

Note

Deprecation note: The $w parameter of event handlers is being deprecated. To get a scoped selector, use the $w.at() function and pass it the context property of the event parameter: $item = $w.at(event.context). To learn more, see here.

Syntax

function onMouseIn(handler: MouseEventHandler): Element
callback MouseEventHandler(event: MouseEvent, $w: $w): void
PARAMETERS
?
The kind of data the property stores.
handler
function(event: MouseEvent, $w: $w)

The name of the function or the function expression to run when the mouse pointer is moved onto the element.

?
The kind of data the property stores.
event
The mouse event that occurred.
$w

Deprecated: A selector function. The $w function enables event handlers to work with elements in repeaters and in the global scope.

RETURN VALUE
?
Value that a function evaluates to when it is finished running.
The element to which the event handler was added.

MIXED IN FROM

?
Where this functionality is inherited from.
$w.Element

Examples

Get the mouse event info when the mouse enters an element

$w("#myElement").onMouseIn( (event) => {
  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
} );

onMouseOut( )

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

Note

Deprecation note: The $w parameter of event handlers is being deprecated. To get a scoped selector, use the $w.at() function and pass it the context property of the event parameter: $item = $w.at(event.context). To learn more, see here.

Syntax

function onMouseOut(handler: MouseEventHandler): Element
callback MouseEventHandler(event: MouseEvent, $w: $w): void
PARAMETERS
?
The kind of data the property stores.
handler
function(event: MouseEvent, $w: $w)

The name of the function or the function expression to run when the mouse pointer is moved off of the element.

?
The kind of data the property stores.
event
The mouse event that occurred.
$w

Deprecated: A selector function. The $w function enables event handlers to work with elements in repeaters and in the global scope.

RETURN VALUE
?
Value that a function evaluates to when it is finished running.
The element to which the event handler was added.

MIXED IN FROM

?
Where this functionality is inherited from.
$w.Element

Examples

Get the mouse event info when the mouse exits an element

$w("#myElement").onMouseOut( (event) => {
  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
} );

onPause( )

Adds an event handler that runs when playback is paused.

Description

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

Note

When using onPause() on a gallery, make sure the gallery is one where the isPlayable capability is true.

If you change a gallery's type to one that doesn't support onPause(), your code may longer function correctly.

Deprecation note: The $w parameter of event handlers is being deprecated. To get a scoped selector, use the $w.at() function and pass it the context property of the event parameter: $item = $w.at(event.context). To learn more, see here.

See Also

pause( )

Syntax

function onPause(handler: EventHandler): Gallery | Slideshow
callback EventHandler(event: Event, $w: $w): void
PARAMETERS
?
The kind of data the property stores.
handler
function(event: Event, $w: $w)

The name of the function or the function expression to run when the element is paused.

?
The kind of data the property stores.
event
The event that occurred.
$w

Deprecated: A selector function. The $w function enables event handlers to work with elements in repeaters and in the global scope.

RETURN VALUE
?
Value that a function evaluates to when it is finished running.
The gallery or slideshow that triggered the event.

MIXED IN FROM

?
Where this functionality is inherited from.
$w.PlayableMixin

Examples

Get the ID of the element that has been paused

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

onPlay( )

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

Description

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

Note

When using onPlay() on a gallery, make sure the gallery is one where the isPlayable capability is true.

If you change a gallery's type to one that doesn't support onPlay(), your code may longer function correctly. Deprecation note: The $w parameter of event handlers is being deprecated. To get a scoped selector, use the $w.at() function and pass it the context property of the event parameter: $item = $w.at(event.context). To learn more, see here.

See Also

play( )

Syntax

function onPlay(handler: EventHandler): Gallery | Slideshow
callback EventHandler(event: Event, $w: $w): void
PARAMETERS
?
The kind of data the property stores.
handler
function(event: Event, $w: $w)

The name of the function or the function expression to run when the element is played.

?
The kind of data the property stores.
event
The event that occurred.
$w

Deprecated: A selector function. The $w function enables event handlers to work with elements in repeaters and in the global scope.

RETURN VALUE
?
Value that a function evaluates to when it is finished running.
The gallery or slideshow that triggered the event.

MIXED IN FROM

?
Where this functionality is inherited from.
$w.PlayableMixin

Examples

Get the ID of the element that is playing

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

onViewportEnter( )

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

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.

Note

Deprecation note: The $w parameter of event handlers is being deprecated. To get a scoped selector, use the $w.at() function and pass it the context property of the event parameter: $item = $w.at(event.context). To learn more, see here.

See Also

onViewportLeave( )

Syntax

function onViewportEnter(handler: EventHandler): Element
callback EventHandler(event: Event, $w: $w): void
PARAMETERS
?
The kind of data the property stores.
handler
function(event: Event, $w: $w)

The name of the function or the function expression to run when the element enters the viewport.

?
The kind of data the property stores.
event
The event that occurred.
$w

Deprecated: A selector function. The $w function enables event handlers to work with elements in repeaters and in the global scope.

RETURN VALUE
?
Value that a function evaluates to when it is finished running.
The element on which the event is now registered.

MIXED IN FROM

?
Where this functionality is inherited from.
$w.Element

Examples

Get the ID of the element that has entered the viewport

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

onViewportLeave( )

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

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.

Note

Deprecation note: The $w parameter of event handlers is being deprecated. To get a scoped selector, use the $w.at() function and pass it the context property of the event parameter: $item = $w.at(event.context). To learn more, see here.

See Also

onViewportEnter( )

Syntax

function onViewportLeave(handler: EventHandler): Element
callback EventHandler(event: Event, $w: $w): void
PARAMETERS
?
The kind of data the property stores.
handler
function(event: Event, $w: $w)

The name of the function or the function expression to run when the element leaves the viewport.

?
The kind of data the property stores.
event
The event that occurred.
$w

Deprecated: A selector function. The $w function enables event handlers to work with elements in repeaters and in the global scope.

RETURN VALUE
?
Value that a function evaluates to when it is finished running.
The element on which the event is now registered.

MIXED IN FROM

?
Where this functionality is inherited from.
$w.Element

Examples

Get the ID of the element that has entered the viewport

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

pause( )

Pauses playback.

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 are called.

Note

When using pause() on a gallery, make sure the gallery is one where the isPlayable capability is true.

If you change a gallery's type to one that doesn't support pause(), your code may longer function correctly.

See Also

play( ), onPause( )

Syntax

function pause(): void

MIXED IN FROM

?
Where this functionality is inherited from.
$w.PlayableMixin

Examples

Pauses playback

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

Toggle an element's current playing state

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

play( )

Begins or resumes playback.

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 are called.

Note

When using play() on a gallery, make sure the gallery is one where the isPlayable capability is true.

If you change a gallery's type to one that doesn't support play(), your code may longer function correctly.

See Also

pause( ), onPlay( )

Syntax

function play(): void

MIXED IN FROM

?
Where this functionality is inherited from.
$w.PlayableMixin

Examples

Begins or resumes playback

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

Toggle an element's current playing state

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

previous( )

Moves to the previous image or slide.

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.

Note

When using previous() on a gallery, make sure the gallery is one where the isPlayable capability is true.

If you change a gallery's type to one that doesn't support previous(), your code may longer function correctly.

See Also

next( )

Syntax

function previous(): Promise<Element>
RETURN VALUE
?
Value that a function evaluates to when it is finished running.
Promise<Element>
Fulfilled - The newly displayed image or slide.

MIXED IN FROM

?
Where this functionality is inherited from.
$w.PlayableMixin

Examples

Move to the previous item

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

Move to the previous item and log a message when done

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

scrollTo( )

Scrolls the page to the element using an animation.

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.

Syntax

function scrollTo(): Promise<void>
RETURN VALUE
?
Value that a function evaluates to when it is finished running.
Promise<void>
Fulfilled - When the scroll is complete.

MIXED IN FROM

?
Where this functionality is inherited from.
$w.Element

Examples

Scroll the page to an element

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

Scroll the page to an element and log message when done

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

show( )

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

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:

See Also

hide( ), hidden, expand( )

Syntax

function show([effectName: string], [effectOptions: ArcEffectOptions | BounceEffectOptions | FadeEffectOptions | FlipEffectOptions | FloatEffectOptions | FlyEffectOptions | FoldEffectOptions | GlideEffectOptions | PuffEffectOptions | RollEffectOptions | SlideEffectOptions | SpinEffectOptions | TurnEffectOptions | ZoomEffectOptions]): Promise<void>
RETURN VALUE
?
Value that a function evaluates to when it is finished running.
Promise<void>
Fulfilled - When the effect is complete and the element's hidden property has been set to false.

MIXED IN FROM

?
Where this functionality is inherited from.
$w.HiddenCollapsedMixin

Examples

Show an element with no effect

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

Show an element with the "fade" effect

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

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

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

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

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

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

Toggle an element's hidden state

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

GalleryCapabilities

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

See Also

galleryCapabilities

Syntax

type GalleryCapabilities = {
  isPlayable: boolean
  hasCurrentItem: boolean
  hasNavigationButtons: boolean
}
MEMBERS
?
The kind of data the property stores.
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

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

ImageItem

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

Description

The src property of a ImageItem can be:

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

    The image source format for Media Manager images is: wix:image://v1/<uri>/<filename>#originWidth=<width>&originHeight=<height>[&watermark=<watermark_manifest_string>]

See Also

items, currentItem

Syntax

type ImageItem = {
  type: string
  slug: string
  src: string
  description: string
  title: string
  link: string
}
MEMBERS
?
The kind of data the property stores.
type
string
Item type. Value is "image".
slug
string
Item slug.
src
string
Image source URL.
description(Optional)
string
Image description. Descriptions over 100 characters are truncated.
title(Optional)
string
Image title.
link(Optional)
string
URL of the image's clickable link. See here for more information about links.

VideoItem

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

Description

A VideoItem can be used as an item in a Pro Gallery.

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 video source format is: wix:video://v1/<video_uri>/<filename>#posterUri=<poster_uri>&posterWidth=<width>&posterHeight=<height>

See Also

items, currentItem

Syntax

type VideoItem = {
  type: string
  slug: string
  src: string
  description: string
  title: string
  link: string
  thumbnail: string
}
MEMBERS
?
The kind of data the property stores.
type
string
Item type. Value is "video".
slug
string
Item slug.
src
string
Video source URL.
description(Optional)
string
Video description. Descriptions over 100 characters are truncated.
title(Optional)
string
Video title.
link(Optional)
string
URL of the video's clickable link. See here for more information about links.
thumbnail(Optional)
string
Video thumbnail.