You are here: Deprecated Widgets > ImageGallery Widget

ImageGallery Widget

ImageGallery represents a set of images adjacent to each other. If the images exceed the row size, they are pushed to the next line.

You can add the ImageGallery Widget only to the VBox form. This widget will be available in the Widgets palette when the VBox form is selected in the app canvas.

This section provides the following documentation on this Widget.

Overviews
Events
Methods
Properties

The ImageGallery widget capabilities can be broadly categorized into the following:

Layout

Properties Description
anchorPoint Specifies the anchor point of the widget bounds rectangle using the widget's coordinate space.
  

Animations

MethodsDescription
animateApplies an animation to the widget.
 
PropertiesDescription
transformContains an animation transformation that can be used to animate the widget.
 

Data Management

MethodsDescription
addAll Allows you to add new images to the ImageGallery.
addDataAt Allows you to add/insert a new image at a given index.
removeAll Removes all the images in the HorizontalImageStrip.
removeAt Removes the image at the given index in the ImageGallery.
setData Allows you to set new images to the ImageGallery.
setDataAt Allows you to set a new image at a given index.
 
PropertiesDescription
data Represents the JSObject to represent the images to be rendered in ImageGallery.
 

3D Touch

MethodsDescription
registerForPeekandPop Registers a widget to enable 3D Touch peek and pop gestures.
setOnPeek Sets and overrides the existing onPeekCallback for the widget.
setOnPop Overrides the existing onPopCallback for the widget.
unregisterForPeekandPop Unregisters a widget from 3D Touch peek and pop gestures.
 

User Input Handling

 
MethodsDescription
addGestureRecognizer Allows you to set a gesture recognizer for a specified gesture for a specified widget.
removeGestureRecognizer Allows you to remove the specified gesture recognizer for the specified widget.
setGestureRecognizer Allows you to set a gesture recognizer for a specified gesture for a specified widget.
 

UI Appearance

PropertiesDescription
focusSkinSpecifies the look and feel of the widget when in focus.
hoverSkin Specifies the look and feel of a widget when the cursor hovers on the widget.
navigationBarPosition Specifies the position of the navigation bar for the ImageGallery.
selectedIndex Indicates the currently selected image in the ImageGallery.
selectedItem Returns the selected data object (input array) corresponding to the selected image of the ImageGallery.
skinSpecifies the look and feel of the ImageGallery when not in focus.
spaceBetweenImages Specifies the space between the images in the ImageGallery.
viewType Specifies the appearance of the Image Gallery as Default view or Page view.
viewConfig Specifies the view configuration parameters when the viewType is set as IMAGE_GALLERY_VIEW_TYPE_PAGEVIEW for Desktop Web platform.

Miscellaneous

PropertiesDescription
imageWhenFailed Specifies the image to be displayed when the remote resource is not available.
imageWhileDownloading Specifies the image to be displayed when the remote source is still being downloaded.
itemsPerRow Specifies the number of images to be displayed per row in an ImageGallery at a time.
noofRowsPerPage Specifies the number of rows to be displayed in each page.
 
MethodsDescription
getBadge Enables you to read the badge value (if any) attached to the specified widget.
setBadge Enables you to set the badge value to the given widget at the upper, right corner of the widget.
 
EventsDescription
onSelection An event callback that is invoked by the platform when an Image is selected in ImageGallery.

Configurations Common To All Widgets

MethodsDescription
convertPointFromWidget Allows you to convert the coordinate system from a widget to a point (receiver's coordinate system).
convertPointToWidget Allows you to convert the coordinate system from a point (receiver's coordinate system) to a widget.
removeFromParent Allows you to remove a child widget from a parent widget.
setEnabled Specifies the widget that must be enabled or disabled.
setFocus Specifies the widget on which there must be focus.
setVisibility Sets the visibility of the widget.
 
PropertiesDescription
accessibilityConfig Enables you to control accessibility behavior and alternative text for the widget.
enableCache Enables you to improve the performance of Positional Dimension Animations.
id id is a unique identifier of ImageGallery consisting of alpha numeric characters.
info A custom JSObject with the key value pairs that a developer can use to store the context with the widget.
isVisible controls the visibility of a widget on the form.
 
EventsDescription
postOnclickJS Allows the developer to execute custom javascript function after the onClick callback of the ImageGallery is invoked.
preOnclickJS Allows the developer to execute custom javascript function when the ImageGallery is invoked.

ImageGallery Overviews

Note: ImageGallery widget is not supported in BlackBerry 10 platform.

Creating an Image Gallery using a constructor: kony.ui.ImageGallery


var imagegallery1 = new kony.ui.ImageGallery2 (basicConf, layoutConf, pspConf)

Note: The configuration properties should be passed only in the respective configuration objects otherwise they are ignored

Example

//Defining properties for ImageGallery.
var imgGalBasic = 
    { 
      id: "imgGallery",
      isVisible: true,
      skin: "gradroundfocusbtn",
      focusSkin: "gradroundfocusbtn",
      selectedIndex:3,
      spaceBetweenImages: 50
    };
var imgGalLayout = {containerWeight:50};
var imgGalPSP = {itemsPerRow:3, navigationBarPosition:"Bottom"};
//Creating the ImageGallery.
var imgGallery = new kony.ui.ImageGallery(imgGalBasic,imgGalLayout,imgGalPSP );
//Reading the containerWeight of ImageGallery.
alert("ImageGallery containerWeight is ::"+imgGallery.containerWeight); 

For backward compatibility with support for all deprecated properties and behaviors, use the constructor kony.ui.ImageGallery.


var imageGal1= new kony.ui.ImageGallery (basicConf, layoutConf, pspConf)

Customizing Appearance

You can customize the appearance of the Image Gallery using the following properties:

Important Considerations:

premCopyright © 2012 Kony, Inc. All rights reserved.
premCopyright © 2012 Kony, Inc. All rights reserved.