# Image List

#### Image List 위젯은 이미지와 텍스트를 함께 표시하고 선택할 수 있는 UI입니다.

활용 예) 탑승 앱, 찌르기 앱, 아바타 특수 효과 등

**Image**

![](https://2461137890-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FiW553XSGeKCAPpImxXi3%2Fuploads%2F4CjFnONKpPwEvZPMEOk9%2FGroup%201364.png?alt=media\&token=3d3e5286-8023-4111-8f88-4368ecf1616a)

#### Example

{% file src="<https://2461137890-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FiW553XSGeKCAPpImxXi3%2Fuploads%2FQ6I84uX8FG6suME85FUd%2FImageList.zip?alt=media&token=f9421010-dcc6-4193-a141-d7b79945f086>" %}

```javascript
function openWidget(p)
{
    //Check if player is mobile or not
    if(p.isMobile)
        //Set the widget's name, anchor position, width, and height.
        p.tag.widget = p.showWidget('widget.html','sidebar',300,550);
    else
        p.tag.widget = p.showWidget('widget.html','sidebar',280,520);

    //Send data to widget
    p.tag.widget.sendMessage({
        isMobile : p.isMobile,
    })

    //Register events for messages sent from widgets
    p.tag.widget.onMessage.Add(function(sender, msg) {
        switch (msg.type)
        {
            case 'close':
                if(p.tag.widget)
                {
                    p.tag.widget.destroy();
                    p.tag.widget = null;
                }
                
                break;
            case 'submit':
                let choiceItem = msg.choice;
                p.showAlert('Item' + choiceItem);
                break;
        }
    })
}

//Event when a player joins the app
App.onJoinPlayer.Add(function(p) {
    //Reset the player's tag value
    p.tag = {};
});
// Action when the player clicks the sidebar app
App.onSidebarTouched.Add(function(p) {
    openWidget(p);
});


```