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'

Example

x5engine.imShowBox({
    media: [
        {
            url:'myimage1.jpg',
            width: 800,
            height: 400
        },
        {
            url:'myimage2.jpg',
            width: 800,
            height: 600
        }
    ]
});