x5engine.imShowBox(settings, [startIndex], [launcher]) ⇒ bool

Show the ShowBox using the provided settings.

Kind: global function
Returns: bool - Always return false to let the function to be used in the "onclick" event

Param Type Default Description
settings object The settings object. For each element in it, the default value is the one set inside the ShowBox settings of WSX5.
settings.allowFrameTransparency boolean True to allow the iframes transparency in the content
settings.autoplay boolean True to automatically skip from a media to the next every autoplayTime milliseconds
settings.autoplayTime number Number of milliseconds between every media transition
settings.background string The external background color.
settings.borderWidth object The object containing the border width.
settings.borderWidth.top number
settings.borderWidth.left number
settings.borderWidth.bottom number
settings.borderWidth.right number
settings.borderColor string The border color
settings.borderRadius number The border radius
settings.boxColor string The internal background color
settings.buttons object The settings of the two buttons used to scroll the medias (one left and one right). If no setting is provided, the buttons are not shown.
settings.effect string The effect used to show the ShowBox. Must one of the following: "none", "fade", "move", "zoom", "hide".
settings.fontFamily string The description font family
settings.fontStyle string The description font style
settings.fontWeight string The description font weight
settings.fontSize string The description font size
settings.innerBorder number The internal padding size in px
settings.media array The array of settings of each media loaded in the ShowBox
settings.media.type string Must be one of the following types: image,video,sound,youtube,vimeo,html
settings.media.url string Url of the media to be loaded inside the ShowBox
settings.media.width number Width in px
settings.media.height number Height in px
settings.media.html number Code to be loaded inside the ShowBox if the specified media type is "html"
settings.opacity number The external background opacity.
settings.shadow string The ShowBox's shadow
settings.textColor string The description text color
settings.textAlignment string The description text alignment
[startIndex] number 0 The index of the image to show when the ShowBox is launched
[launcher] DOMObject The DOM element used as start point when the ShowBox is shown using the "Zoom" or "Zoom and Hide" effects

Parameters available until v13

Param Type Default Description
settings.buttonRight object The settings of the right button
settings.buttonRight.url string Url of the image shown as right button
settings.buttonRight.position object The position of the right button expressed as x and y offset from the right ShowBox border
settings.buttonRight.position.x number
settings.buttonRight.position.y number
settings.buttonLeft object The settings of the left button
settings.buttonLeft.url string Url of the image shown as left button
settings.buttonLeft.position object
settings.buttonLeft.position.x number The position of the left button expressed as x and y offset from the left ShowBox border
settings.buttonLeft.position.y number
settings.closeImg string Url of the image used to close the ShowBox
settings.helperBg string Background color used for the helper image
settings.swipeImg string Url of the helper image shown on touch devices

Parameters available since v14

Param Type Default Description
settings.boxClass string The classname to be assigned tothe mediabox
settings.buttonLeft string HTML of the left button
settings.buttonRight string HTML of the right button
settings.buttonClose string HTML of the close button
settings.buttonEnterFS string HTML of the 'enter fullscreen' button
settings.buttonExitFS string HTML of the 'exit fullscreen' button
settings.buttonZoomIn string HTML of the zoom+ button
settings.buttonZoomOut string HTML of the zoom- button
settings.buttonZoomRestore string HTML of the 'zoom restore' button
settings.windowPadding number The size of the margin from the viewport
settings.showProgress boolean True to show the progress number on the top right corner of he screen, if more than one media is defined
settings.fullScreenEnabled boolean True to enable fullscreen, when available. If the browser doesn't support HTML5 Fullscreen API, the button will be automatically disabled
settings.zoomEnabled boolean True to enable zoom on images media. For other types of media, the button will be disabled
settings.showThumbs boolean True to show the thumbs of the media, if more than one media is defined
settings.thumbSize number The size of the thumbs
settings.transitionEffect string The transition effect to be applied between two media. Must one of the following: 'fade', 'horizontalSlide', 'verticalSlide', 'zoom', 'elasticFromTop', 'elasticFromBottom', 'elasticFromRight', 'elasticFromLeft', 'bounceFromTop', 'bounceFromBottom', 'bounceFromLeft', 'bounceFromRight', 'rotateLinear'


    media: [
            width: 800,
            height: 400
            width: 800,
            height: 600