Product Gallery API reference
Last updated: Sep-02-2024
The Product Gallery API reference details all the parameter options, types and ENUMS that you can use when configuring the Product Gallery widget.
- For in-depth information, see the Product Gallery guide.
- Use the Product Gallery Demo to try out some of the widget customization options.
Code explorer: Product Gallery widget example
Try out some sample configuration changes in this JavaScript Product Gallery Sandbox.
Parameters
The following tables list all available parameters (options) for creating and initializing a Product Gallery widget with the galleryWidget method:
- Required parameters
- Widget parameters
- Main viewer parameters
- Carousel parameters
- Navigation parameters
Besides for the required parameters, only include other parameters in order to override their default values.
For example, to initialize a new widget that is populated with all images that have the "bag" tag:
Required parameters
The following parameters are required when initializing the Product Gallery widget:
Parameter | Type | Description |
---|---|---|
cloudName | string | Your Cloudinary product environment cloud name. Example: "demo"
|
container | string selector or DOM Element | The containing element on the page for the Product Gallery widget. Examples: "#my-widget-container" document.getElementById("my-widget-container");
|
mediaAssets | Asset[] or PublicID[] | Populates the widget with all the media assets given as an array of assets. The individual assets in the array can be described either by an Asset object or by a PublicID string (as a shortcut for images only). Example (all images tagged with 'shirt' + a video with the PublicId of 'shirt-vid' + an image with the PublicId of 'shirt-1'): [{ tag: "shirt" }, {publicId: "shirt-vid", mediaType: "video"}, "shirt-1"]
|
Widget parameters
Parameter | Type | Description |
---|---|---|
analytics | boolean | Whether to update the Google Tag Manager's dataLayer array whenever an event is triggered (requires Google Tag Manager integrated on the page). |
displayProps | DisplayProps | Sets the display properties for the widget. |
focus | boolean | Whether to set focus on the widget when it renders (to ease keyboard navigation) or only after selecting the widget. Default: false
|
loaderProps | LoaderProps | An object that defines the loading spinner properties to override. |
placeholderImage | boolean | Whether to load and display a low-quality blurred placeholder image while waiting for the higher quality image, instead of a loading spinner. Default: true
|
sort | Sort | (Deprecated, please use sortProps instead) Determines how to sort (by PublicID) the assets given in the mediaAssets parameter for display in the Product Gallery. Default: asc
|
sortProps | SortProps | An object that defines how to sort the assets for display in the Product Gallery. Default: { source: "public_id", direction: "asc" }
|
themeProps | ThemeProps | An object that defines the theme colors to override. |
viewportBreakpoints | BreakpointProps[] | An array of breakpoints for the viewport (browser window), together with the Product Gallery configuration parameters to override when the width of the Product Gallery widget is less than the given breakpoint (see Responsive widget for more information). |
Main viewer parameters
Parameter | Type | Description |
---|---|---|
accessibilityProps | AccessibilityProps | An object that defines the accessibility properties to override. |
ar3dProps | Ar3dProps | An object that defines the 3D viewer properties. |
aspectRatio | AspectRatio | The aspect ratio of the main viewer. Default: "square"
|
borderColor | Color | The color of the main viewer's border. Default: "transparent"
|
borderWidth | int | The width of the main viewer's border in pixels. Default: 0
|
imageBreakpoint | int | The step size for rounding up the width of responsive images in pixels. Default: 100
|
videoBreakpoint | int | The step size for rounding up the width of responsive videos in pixels. Default: 100
|
preload | String[] | An array indicating which media assets should be preloaded into the browser cache when the Product Gallery widget is initialized. Possible values: "image", "video", "spin", "3d". Default: ["image"] Note: pass an empty array if you want to preload only the first asset ( [] ). |
radius | int | The radius of the main viewer's corners in pixels. Default: 0
|
spinProps | SpinProps | An object that defines the 360 spin set properties to override. |
startIndex | int | The media asset to initially display in the main viewer when the widget is rendered. Default: 0 (the first asset) |
tipProps | TipProps | An object that defines the properties to override for the zoom tip, which appears on images and 360 spin sets. Relevant only when zoom is set to 'true'. |
transition | Transitions | The effect to apply while transitioning between assets. Default: "slide"
|
videoProps | VideoProps | An object that defines the video display properties to override. |
zoom | boolean | Whether to activate the zoom functionality for images. Default: true
|
zoomProps | ZoomProps | An object that defines the zoom properties to override. Relevant only when zoom is set to 'true'. |
zoomPopupProps | ZoomPopupProps | An object that defines the backdrop color, opacity and z-index stack order. Relevant only when zoomProps: type is set to 'popup'. |
Carousel parameters
Parameter | Type | Description |
---|---|---|
carouselLocation | CarouselLocation | The location of the carousel relative to the main viewer. Default: "left"
|
carouselOffset | int | The space between the main viewer and the carousel in pixels. Default: 5
|
carouselStyle | CarouselStyle | The display style of the carousel. Default: "thumbnails"
|
indicatorProps | IndicatorProps | An object that defines the indicator properties to override. Relevant only when carouselStyle is set to 'indicators'. |
thumbnailProps | ThumbnailProps | An object that defines the thumbnail properties to override. Relevant only when carouselStyle is set to 'thumbnails'. |
Navigation parameters
Parameter | Type | Description |
---|---|---|
navigation | Navigation | The display style of the navigation buttons. Default: "mouseover"
|
navigationButtonProps | NavigationButtonProps | An object that defines the navigation button properties to override. |
navigationOffset | int | The offset of the navigation buttons from the side of the widget in pixels. Default: 0 Relevant only when navigationPosition is set to a value of 'offset'. |
navigationPosition | NavigationPosition | The position of the navigation buttons. Default: "inside"
|
Types
- Asset
- AccessibilityProps
- Ar3dProps
- BreakpointProps
- Color
- DisplayProps
- IndicatorProps
- LoaderProps
- NavigationButtonProps
- SpinProps
- ThemeProps
- ThumbnailProps
- TipProps
- VideoProps
- ZoomProps
- zoomPopupProps
Asset
An object identifying either a single media asset or multiple assets: use the publicId
parameter to identify a single asset, or use the tag
parameter to identify multiple assets of the same mediaType.
Parameter | Type | Description |
---|---|---|
publicId | string | A string value representing the identifier that is used for accessing an uploaded media asset. Use this parameter to identify a single resource. Example: "long-shirt"
|
tag | string | All assets (as given by mediaType) that have the given tag. Use this parameter to identify multiple assets. The assets will be ordered alphanumerically by their PublicID. Example: "shirt"
|
mediaType | string | The type of media to deliver ("image", "video", "spin" or "3d" ). The default is 'image' if not specified. |
resourceType | string | Set to "video" if you are delivering an image (mediaType: "image") of an uploaded video asset. |
transformation | Object | The Cloudinary transformation to apply. Any set of transformation options can be applied in addition to the default transformation parameters, or to override their values. To apply this transformation before the default transformation parameters, set |
thumbnailTransformation | Object | The Cloudinary transformation to apply to the thumbnail image(s) used in the carousel to represent the media asset. This value overrides the transformation parameter (only for thumbnails) if that is also given. To apply this transformation before the default transformation parameters, set |
altText | string | The string to use as the Alt accessibility text in the gallery. |
videoPlayerSource | Object | The Cloudinary Video Player source options to apply to the video. Relevant only when the playerType property of the videoProps parameter is set to 'cloudinary'. |
For example:
AccessibilityProps
The accessibility properties to override for the widget.
Parameter | Type | Description |
---|---|---|
mediaAltSource | string | The source of the string to use as the Alt accessibility text for each of the media assets in the gallery. The value of this property can be one of the following sources: - contextual : use the value of a Contextual metadata field for each asset, as given by the key passed in the mediaAltId property. - metadata : use the value of a Structured metadata field for each asset as given by the external_id passed in the mediaAltId property. - auto : (default) use the order of the asset within the gallery using the template: "Gallery asset n of m". |
mediaAltId | string | Required when setting the mediaAltSource property as follows: For 'contextual' - the key of a Contextual metadata key-value pair (or an empty string to use the default 'alt' key added to every asset). OR For 'metadata' - the external_id of a Structured metadata field. |
For example:
Ar3dProps
The properties of the 3D viewer used to display 3D models.
Parameter | Type | Description |
---|---|---|
shadows | boolean | Whether to add shadow to the 3D model. Default: true
|
showAR | boolean | Whether to show the 'View in AR' button. Default: false
|
For example:
BreakpointProps
An object defining a single breakpoint value plus the configuration parameters (options) to override when the width of the Product Gallery widget is less than or equal to this number. Any parameter can be overridden except for the required parameters.
Parameter | Type | Description |
---|---|---|
breakpoint | int | (Required) All the other 520 |
{options} | The configuration parameters to override for the given breakpoint . |
For example:
Color
A string value representing an RGB or RGBA hex triplet or quadruplet, a 3- or 4-digit RGB/RGBA hex, or a named color.
For example:
#FFAAFF
DisplayProps
Parameter | Type | Description |
---|---|---|
mode | DisplayMode | The display mode for the widget. Default: "classic"
|
spacing | int | The spacing between assets in pixels. Default: 5 Relevant only when mode is set to 'expanded'. |
columns | int | The number of columns to display simultaneously. Default: 1 Relevant only when mode is set to 'expanded'. |
topOffset | int | The offset of the widget from the top of the page in pixels. Default: 0 Relevant only when mode is set to 'expanded'. |
bottomOffset | int | The offset of the widget from the bottom of the page in pixels. Default: 0 Relevant only when mode is set to 'expanded'. |
For example:
IndicatorProps
Parameter | Type | Description |
---|---|---|
color | Color | The color to use for the indicators. Default: ThemeProp.onPrimary |
selectedColor | Color | The color to use for the currently selected indicator. Default: ThemeProp.active |
shape | IndicatorShape | The shape of the indicators. Default: "round"
|
size | int | The width of the indicators in pixels. Default: 8
|
spacing | int | The space to add between the indicators in pixels. Default: 3
|
sticky | boolean | Whether the Carousel scrolls with the main viewer or is always visible next to it. Default: true Relevant only when display mode is set to 'expanded'. |
For example:
LoaderProps
Parameter | Type | Description |
---|---|---|
color | Color | The color of the loading spinner. Default: "#000"
Relevant only when style is not set to 'custom'. |
opacity | float | The opacity of the loading spinner. Default: 0.5 Relevant only when style is not set to 'custom'. |
style | LoaderStyle | The style of loader to use. Default: "cloudinary"
|
url | String | The full path to a custom (animated) image to use as the loading spinner. As the spinner is scaled to 25% of the available width, it's recommended to use the SVG format to preserve quality at any sizes. Relevant only when style is set to 'custom'. |
For example:
NavigationButtonProps
Parameter | Type | Description |
---|---|---|
shape | ButtonShape | The shape of the navigation button. Default: "none"
|
iconColor | Color | The color to use for the navigation icon. Default: ThemeProp.onPrimary |
color | Color | The color of the navigation button. Default: ThemeProp.primary |
size | int | The width of the navigation button in pixels. Default: 54
|
For example:
SortProps
Parameter | Type | Description |
---|---|---|
source | string | The data source to use for sorting the assets in the display. The value of this property can be one of the following sources: - contextual : use the value of a Contextual metadata field for each asset, as given by the key passed in the id property. - metadata : use the value of a Structured metadata field for each asset as given by the external_id passed in the id property. - public_id : (default) use the public ID of the asset. |
id | string | Required when setting the source property as follows: For 'contextual' - the key of a Contextual metadata key-value pair. OR For 'metadata' - the external_id of a Structured metadata field. |
direction | string | The direction to alphanumerically sort the assets, either asc (default), or desc . |
For example:
SpinProps
Parameter | Type | Description |
---|---|---|
animate | SpinAnimation | When to automatically spin the image. Default: "start"
|
spinDirection | SpinDirection | The direction to spin the image. Default: "counter-clockwise"
|
disableZoom | boolean | Whether to disable the zoom functionality for 360 spin sets. Default: false
|
showTip | ShowTip | When to display a tip. Default: touch
|
tipPosition | TipPosition | The position of the tip text. Default: "center"
|
tipText | string | The text to display as a tip for screens without touch support. Default: "Drag to rotate"
|
tipTouchText | string | The text to display as a tip for screens with touch support. Default: "Swipe to rotate"
|
For example:
ThemeProps
The default colors defined for the theme. Overriding one of these values will update all properties that inherit from that particular ThemeProp.
Parameter | Type | Description |
---|---|---|
primary | Color |
Default: "#FFFFFF"
|
onPrimary | Color |
Default: "#000000"
|
active | Color |
Default: "#0078FF"
|
For example:
ThumbnailProps
Parameter | Type | Description |
---|---|---|
width | int | The width of each thumbnail displayed in the carousel in pixels. Default: 64
|
height | int | The height of each thumbnail displayed in the carousel in pixels. Default: 64
|
spacing | int | The space to add between the individual thumbnails in pixels. Default: 2
|
gutter | int | The space to add between the thumbnails and the navigation buttons in pixels. Default: 2
|
borderColor | Color | The color of the thumbnail's border. Default: "#EBF0F4"
|
borderWidth | int | The width of the thumbnail's border in pixels. Default: 1
|
radius | int | The radius of the thumbnail's corners in pixels. Default: 0
|
mediaSymbolPosition | MediaSymbolPosition | The position of the media symbol within the thumbnail. Default: "center" Relevant only when mediaSymbolShape is set to 'none'. |
mediaSymbolShape | MediaSymbolShape | The shape of the media symbol background. Default: "round"
|
mediaSymbolColor | Color | The color of the media symbol background. Default: ThemeProp.primary |
mediaSymbolOpacity | float | The opacity of the media symbol background. Range: 0.0 to 1.0 Default: 0.3
|
mediaSymbolIconShadow | boolean | Whether a shadow is added to the media symbol. Default: "false"
|
mediaSymbolIconColor | Color | The color of the media symbol. Default: ThemeProp.onPrimary |
mediaSymbolSize | int | The size of the media symbol in pixels. Default: 40% of the thumbnail width |
navigationBorderColor | Color | The color of the navigation button's border. Default: "transparent"
|
navigationBorderWidth | int | The width of the navigation button's border. Default: 0
|
navigationColor | Color | The color of the Carousel navigation buttons. Default: ThemeProp.primary |
navigationFloat | boolean | Whether the navigation buttons float above the last thumbnails on either side of the carousel, or whether the buttons are adjacent to them. Default: false
|
navigationIconColor | Color | The color of the Carousel navigation arrows. Default: ThemeProp.onPrimary |
navigationSize | int | The size of the Carousel navigation buttons in pixels. Default: 42
|
navigationShape | ButtonShape | The shape of the Carousel navigation buttons. Default: "rectangle"
|
selectedBorderPosition | SelectedBorderPosition | The position of the selected thumbnail's border. Default: "left" Relevant only when selectedStyle is set to 'border'. |
selectedBorderColor | Color | The color of the selected thumbnail's border. Default: ThemeProp.active |
selectedBorderWidth | int | The width of the selected thumbnail's border in pixels. Default: 2
|
selectedBorderOpacity | float | The opacity of the selected thumbnail's border. Range: 0.0 to 1.0 Default: 1
|
selectedGradientStart | Color | The color of the first color for the gradient fade effect. Default: ThemeProp.primary |
selectedGradientEnd | Color | The color of the second color for the gradient fade effect. Default: ThemeProp.primary |
selectedGradientDirection | Direction | The direction to fade between the start and end colors defined. Default: "vertical"
|
selectedGradientOpacity | float | The opacity of the gradient fade. Range: 0.0 to 1.0 Default: 0.5
|
selectedStyle | SelectedStyles | The style to apply to a selected thumbnail. Default: "all"
|
sticky | boolean | Whether the Carousel scrolls with the main viewer or is always visible next to it. Default: true Relevant only when display mode is set to 'expanded'. |
For example:
TipProps
Parameter | Type | Description |
---|---|---|
textColor | Color | The color of the tip's text. Default: #FFFFFF
|
color | Color | The color of the tip element. Default: #000000
|
radius | number | The radius of the tip's corners in pixels. Default: 5
|
opacity | number | The opacity of the tip. Range: 0.0 to 1.0 Default: 0.5
|
For example:
VideoProps
Parameter | Type | Description |
---|---|---|
controls | string | Determines the controls that appear on the video:"all" - all native controls "play" - only the play/pause button"none" (default) - the user has no control and the video plays automatically in an endless loop with muted audio |
sound | boolean | Whether the video has sound. Default: false Relevant only when controls is not set to 'none'. |
autoplay | boolean | Whether the video should start playing automatically. Default: true Relevant only when controls is not set to 'none'. |
loop | boolean | Whether the video should play in an endless loop. Default: false Relevant only when controls is not set to 'none'. |
playerType | string | The video player to use for playing all the video assets in the Product Gallery:"cloudinary" - use the Cloudinary Video Player"native" (default) - the browser's HTML5 video player |
{config} | {params} | Any parameters available as Video Player configuration options can also be added to the videoProps parameter. Relevant only when playerType is set to 'cloudinary'. |
For example:
ZoomProps
Parameter | Type | Description |
---|---|---|
type | ZoomType | The type of zoom to use. Default: "inline"
|
level | float | The zoom factor to apply when zooming in to the image. Default: 2 (200%) |
steps | int | The number of zoom steps available, i.e., the number of times the user can zoom into the image. Range: 0 to 5 Default: 0 Relevant only when type is set to 'popup'. |
stepLimit | boolean | Whether to limit the number of steps to not zoom in beyond the original image size. Default: false
|
trigger | ZoomTrigger | Determines how zooming is triggered. Default: "click"
|
viewerPosition | ZoomViewerPosition | The position of the viewer adjacent to the main viewer. Default: "right" Relevant only when type is set to 'flyout'. |
viewerRadius | int | The radius of the viewer's corners in pixels. Default: 0 Relevant only when type is set to 'flyout'. |
viewerZIndex | int | The stack order of the zoom viewer element. An element with greater stack order is rendered in front of an element with a lower stack order. Default: 100 Relevant only when type is set to 'flyout'. |
container | string selector | The identification of a container element on the page for displaying the zoom viewer. Example: "#my-zoom-container" Relevant only when type is set to 'flyout'. |
viewerOffset | int | The offset of the viewer for the zoomed-in image from main viewer. Default: 10 Relevant only when type is set to 'flyout'. Note that this parameter is ignored when using multi-column expanded display mode. |
showLens | boolean | Whether to display a lens outlining the current zoomed-in portion of the image. Default: true Relevant only when type is set to 'flyout'. |
lensBorderColor | Color | The color of the lens border. Default: "#FFFFFF"
Relevant only when showLens is set to 'true'. |
lensBorderWidth | int | The width of the lens border in pixels. Default: 0 Relevant only when showLens is set to 'true'. |
lensColor | Color | The color of the lens. Default: "#FFFFFF"
Relevant only when showLens is set to 'true'. |
lensOpacity | float | The opacity of the lens. Range: 0.0 to 1.0 Default: 0.5 Relevant only when showLens is set to 'true'. |
lensRadius | int | The radius of the lens' corners in pixels. Default: 0 Relevant only when showLens is set to 'trueˇ'. |
lensShadow | boolean | Whether a shadow is added to the lens. Default: "true" Relevant only when showLens is set to 'true'. |
showTip | ShowTip | When to display a tip. Default: touch
|
tipText | string | The text to display as a tip for screens without touch support. Default: "Click to zoom"
|
tipTouchText | string | The text to display as a tip for screens with touch support. Default: "Tap to zoom"
|
tipPosition | TipPosition | The position of the tip text. Default: "bottom"
|
For example:
ZoomPopupProps
Parameter | Type | Description |
---|---|---|
backdropColor | Color | The color of the backdrop. Default: "#000000"
|
backdropOpacity | float | The opacity of the backdrop. Range: 0.0 to 1.0 Default: 1.0
|
zIndex | int | The stack order of the popup element on the page. Default: 100
|
For example:
ENUMs
- AspectRatio
- ButtonShape
- CarouselLocation
- CarouselStyle
- Direction
- DisplayMode
- IndicatorShape
- LoaderStyle
- MediaSymbolPosition
- MediaSymbolShape
- Navigation
- NavigationPosition
- SelectedBorderPosition
- SelectedStyles
- Transitions
- ZoomButtonPosition
- ZoomTrigger
- ZoomType
- ZoomViewerPosition
AspectRatio
A string value setting the aspect ratio of the main viewer:
Value | Notes |
---|---|
square | |
1:1 | |
3:4 | |
4:3 | |
4:6 | |
6:4 | |
5:7 | |
7:5 | |
5:8 | |
8:5 | |
9:16 | |
16:9 |
ButtonShape
A string value setting the shape of the button:
Value | Notes |
---|---|
none | The button is transparent and only an enlarged icon appears. |
round | |
square | |
radius | |
rectangle |
CarouselLocation
A string value setting the location of the carousel relative to the widget:
Value | Notes |
---|---|
right | - |
left | - |
top | Not supported in 'expanded' display mode. |
bottom | Not supported in 'expanded' display mode. |
CarouselStyle
A string value setting the display style of the carousel:
Value | Notes |
---|---|
none | No carousel component is displayed: only the main viewer navigation buttons are available for cycling through the assets. |
thumbnails | ![]() |
indicators | ![]() |
Direction
A string value setting the colorization priorities of a gradient fade effect:
Value | Notes |
---|---|
vertical | Use the 'start' color at the top fading into the 'end' color at the bottom. |
horizontal | Use the 'start' color on the left fading into the 'end' color on the right. |
DisplayMode
A string value setting the display mode for the widget:
Value | Notes |
---|---|
classic | The assets are displayed one at a time in the main viewer. |
expanded | The main viewer is expanded and all assets are displayed in vertical columns (1 by default). Not supported by mobile devices where the widget always uses classic mode. |
IndicatorShape
A string value setting the shape of the carousel indicators:
Value | Notes |
---|---|
round | |
square | |
radius |
LoaderStyle
A string value setting the type of loading spinner to use while assets are loading. The spinner is scaled to 25% of the available width:
Value | Notes |
---|---|
cloudinary | |
circle | |
custom | A custom loading spinner as specified by the url parameter. |
MediaSymbolPosition
A string value setting the position of the icon:
Value | Notes |
---|---|
top-left | - |
top-right | - |
bottom-left | - |
bottom-right | - |
center | - |
MediaSymbolShape
A string value setting the shape of the media icon background:
Value | Notes |
---|---|
none | |
round | |
square | |
radius |
Navigation
A string value setting when to display navigation buttons:
Value | Notes |
---|---|
none | The buttons never appear. |
always | The buttons always appear. |
mouseover | The buttons only appear when the mouse pointer is over the main viewer (for desktops only - buttons will always appear on mobile devices). |
NavigationPosition
A string value setting the position of the navigation buttons:
Value | Notes |
---|---|
inside | Aligns the edge of the navigation arrow to the inside edge of the widget. |
middle | Aligns the middle of the navigation arrow to the inside edge of the widget. |
offset | Offsets the edge of the navigation arrow from the inside edge of the widget, according to the value of the navigationOffset parameter. |
SelectedBorderPosition
A string value setting which borders are displayed on a selected thumbnail:
Value | Notes |
---|---|
top | |
bottom | |
left | |
right | |
top-bottom | |
left-right | |
all |
SelectedStyles
A string value setting the effect for the selected thumbnail in the carousel:
Value | Notes |
---|---|
border | |
gradient | |
all |
ShowTip
A string value setting when to show the tip:
Value | Notes |
---|---|
touch | Only on touch enabled devices |
desktop | Only on desktops |
all | On touch enabled devices and desktops |
never | No tips shown |
Sort
A string value setting how to apply an alphanumeric sort:
Value | Notes |
---|---|
none | The assets are displayed in the same order as they are given in the mediaAssets parameter. |
asc | In ascending order by PublicID. |
desc | In descending order by PublicID. |
SpinAnimation
A string value setting when to automatically spin the image:
Value | Notes |
---|---|
none | |
start | As soon as the 360 spin set appears in the main viewer. |
end | When the user finishes manually rotating the 360 spin set. |
both |
SpinDirection
A string value setting the direction to spin the image:
Value | Notes |
---|---|
clockwise | |
counter-clockwise |
TipPosition
A string value setting the position of the tip:
Value | Notes |
---|---|
top | - |
center | - |
bottom | - |
Transitions
A string value representing the effect to apply when transitioning between media assets:
Value | Notes |
---|---|
none | - |
slide | - |
fade | - |
ZoomTrigger
A string value setting the zoom operation:
Value | Notes |
---|---|
click | Zoom is activated when clicking anywhere over the asset. |
hover | Zoom is activated when hovering over the asset (applies to desktops only). |
ZoomType
A string value setting the type of zoom:
Value | Notes |
---|---|
inline | The zoomed in image appears within the same area as the main viewer. |
flyout | The zoomed in image appears adjacent to the main viewer. Not supported by mobile devices where the widget will use 'inline' instead. |
popup | The zoomed in image appears in a pop-up box. |
ZoomViewerPosition
A string value setting the position of the zoom viewer relative to the main viewer:
Value | Notes |
---|---|
top | - |
right | - |
left | - |
bottom | - |
Instance methods
The following methods can be used with the Product Gallery instance returned by the galleryWidget method:
Render
Use the render
method to render an initialized Product Gallery widget object.
For example:
Destroy
Use the destroy
method to erase the Product Gallery widget and remove it from memory.
For example:
On
Use the on
method to register to a specific event.
For example:
Update
The update
method accepts a map of configuration parameters to update an already rendered widget.
For example:
Events
The following events can be registered with the on method of a Product Gallery instance.
Event | Description |
---|---|
indicatorclick | An indicator icon has been clicked. |
mouseenter | The mouse cursor is over the widget. |
mouseleave | The mouse cursor has left the widget. |
spinclick | A 360 spin set has been clicked. |
thumbclick | A thumbnail has been clicked. |
thumbnext | The 'Next' thumbnail navigation button has been clicked. |
thumbprev | The 'Previous' thumbnail navigation button has been clicked. |
videopause | A video has been paused. |
videoprogress | A video has progressed (triggered at 25%, 50%, 75% and 100%). |
videostart | A video has started playing. |
viewernext | The 'Next' main viewer navigation button has been clicked. |
viewerprev | The 'Previous' main viewer navigation button has been clicked. |
zoomin | The image has been zoomed in. |
zoomout | The image has been zoomed out. |
The following information is included when the event is triggered, and is available in the (data)
structure:
- label: The PublicID of the current media asset displayed.
- timestamp: The time the event occurred.
-
progress: The amount that the video has progressed - only relevant for the
videoprogress
event.
For example: