> For the complete documentation index, see [llms.txt](https://docs-kr.zep.us/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs-kr.zep.us/creator/tutor/undefined/image-list.md).

# 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="/files/xLhzZjKrV8LeMTYUsMXG" %}

```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);
});


```