# \[Solved\] How do I make an image appear when clicking an image from a data viewer grid?

**URL:** <https://community.thunkable.com/t/solved-how-do-i-make-an-image-appear-when-clicking-an-image-from-a-data-viewer-grid/3072094>\
**Category:** Questions about Thunkable X\
**Tags:** beginner, help\
**Created:** [June 24, 2024, 12:35pm UTC](https://community.thunkable.com/t/solved-how-do-i-make-an-image-appear-when-clicking-an-image-from-a-data-viewer-grid/3072094 "2024-06-24T12:35:39Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![alexcoding7](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/alexcoding7/32/179549_2.png) [@alexcoding7](https://community.thunkable.com/u/alexcoding7)\
**Post date:** [June 24, 2024, 12:35pm UTC](https://community.thunkable.com/t/solved-how-do-i-make-an-image-appear-when-clicking-an-image-from-a-data-viewer-grid/3072094/1 "2024-06-24T12:35:39Z")

</div>

For context, I want to make a dress up game. I have a data viewer grid with images, which are meant to be the clothes. I want the user to be able to click the image (aka a piece of clothing), so that the piece of clothing appears on a certain position on the screen, with a certain size. When I click the image again, I want the piece of clothing to disappear.

So far, I’ve made:

* * *

When _Data\_Viewer\_Grid1 Item Click_  
row id  
Do \> Create _Image At position_ x 100  
y 100  
in _clothes_  
component  
\> Do

* * *

This does nothing. When I click the image in the data viewer grid, nothing happens. As for everything else I mentioned that I want to be able to do… well, I have no idea how to do it

---

<div class="post-metadata">

**Author:** ![matt\_conroy](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/matt_conroy/32/150843_2.png) [@matt\_conroy](https://community.thunkable.com/u/matt_conroy)\
**Post date:** [June 24, 2024, 2:46pm UTC](https://community.thunkable.com/t/solved-how-do-i-make-an-image-appear-when-clicking-an-image-from-a-data-viewer-grid/3072094/2 "2024-06-24T14:46:41Z")

</div>

Hi alexcoding7, welcome to Thunkable! 🎉

Be sure to check out our posts about [How to ask Great Questions v2.0](https://community.thunkable.com/t/how-to-ask-great-questions-v2-0/2689983/1), our [Community Guidelines](https://community.thunkable.com/t/community-guidelines/78/8), and our [Docs](https://docs.thunkable.com/) as you get started.

Data Viewers aren’t intended for interactions like this. You will be better off to use cloning to create this interaction.

Take a look at our [Thunkable Deep Dive: Clone Blocks](https://community.thunkable.com/t/thunkable-deep-dive-clone-blocks/3020519) and give that a try.

---

<div class="post-metadata">

**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\
**Post date:** [June 24, 2024, 11:26pm UTC](https://community.thunkable.com/t/solved-how-do-i-make-an-image-appear-when-clicking-an-image-from-a-data-viewer-grid/3072094/3 "2024-06-24T23:26:42Z")

</div>

I would recommend not moving an image but rather having placeholder image components where you need them and just changing their image’s value so that you display what you need when the user clicks a particular selection.

---

<div class="post-metadata">

**Author:** ![alexcoding7](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/alexcoding7/32/179549_2.png) [@alexcoding7](https://community.thunkable.com/u/alexcoding7)\
**Post date:** [June 24, 2024, 11:28pm UTC](https://community.thunkable.com/t/solved-how-do-i-make-an-image-appear-when-clicking-an-image-from-a-data-viewer-grid/3072094/4 "2024-06-24T23:28:48Z")

</div>

How would I do that? I have pretty much no experience with Thunkable and its a bit overwhelming

---

<div class="post-metadata">

**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\
**Post date:** [June 24, 2024, 11:43pm UTC](https://community.thunkable.com/t/solved-how-do-i-make-an-image-appear-when-clicking-an-image-from-a-data-viewer-grid/3072094/5 "2024-06-24T23:43:15Z")

</div>

This demo I made might be helpful: [Character Creation - #9 by tatiang](https://community.thunkable.com/t/character-creation/2975383/9). I recommend reading that topic to get an idea of the reason it’s set up that way.

·····················································································································  
Need help? [How to Ask Great Questions](https://community.thunkable.com/t/how-to-ask-great-questions-v2-0/2689983) ✨ [Debugging A Project](https://community.thunkable.com/t/debugging-in-thunkable-x-video/849471) ✨ [API JSON Tutorial](https://community.thunkable.com/t/api-json-tutorial-video/1140575)

Want to hire a Certified Thunkable Expert? [Elevate your app with Tatiang on Fiverr](https://www.fiverr.com/s/726B4a)

---

<div class="post-metadata">

**Author:** ![alexcoding7](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/alexcoding7/32/179549_2.png) [@alexcoding7](https://community.thunkable.com/u/alexcoding7)\
**Post date:** [June 25, 2024, 2:06am UTC](https://community.thunkable.com/t/solved-how-do-i-make-an-image-appear-when-clicking-an-image-from-a-data-viewer-grid/3072094/6 "2024-06-25T02:06:40Z")

</div>

Hey! I saw it and I’ve a few questions:

1. Where do you load the images from? I looked at all the blocks and I don’t understand where you get them from, since you only mention ‘Image1’ yet you have 4 images.

2. Is there a method of displaying the clothes that isn’t by clicking the arrows (e.g. a scroll)? I’ve designed about 50 items of clothing and it would be tedious to have to click next/previous so many times.  
 → What would the blocks look like if it is possible to make a scroll version?

---

<div class="post-metadata">

**Author:** ![marion.dorsett](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/marion.dorsett/32/175129_2.png) [@marion.dorsett](https://community.thunkable.com/u/marion.dorsett)\
**Post date:** [June 25, 2024, 1:27pm UTC](https://community.thunkable.com/t/solved-how-do-i-make-an-image-appear-when-clicking-an-image-from-a-data-viewer-grid/3072094/7 "2024-06-25T13:27:40Z")

</div>

You can use the if/else conditional block and the Any Image block to setup the logic for if your prev & next images are clicked to handle them in the Any Image Click event.

 ![dress-up-00](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/6/8/686d8a5984a08cbf2af0f0a50dd9e2dffb19de3d.png)

---

<div class="post-metadata">

**Author:** ![alexcoding7](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/alexcoding7/32/179549_2.png) [@alexcoding7](https://community.thunkable.com/u/alexcoding7)\
**Post date:** [June 25, 2024, 10:22pm UTC](https://community.thunkable.com/t/solved-how-do-i-make-an-image-appear-when-clicking-an-image-from-a-data-viewer-grid/3072094/8 "2024-06-25T22:22:42Z")

</div>

Thanks! For some reason when I test it, it doesn’t work.

 ![Capture d’écran 2024-06-26 à 08.19.56](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/0/1/01ccda5591fbc543c1975ab03010c862b0865f46.png)  
Previous and next don’t clone each other, which is good, but neither do the clothes themselves.

 ![Capture d’écran 2024-06-26 à 08.21.11](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/3/8/38422eb3cf2bc2073e5e094febb33d4d7ca25a6b.jpeg)  
I’ve attached what my components are called in case that helps.

* * *

Also: my other 2 questions: [How do I make an image appear when clicking an image from a data viewer grid? - #6 by alexcoding7](https://community.thunkable.com/t/how-do-i-make-an-image-appear-when-clicking-an-image-from-a-data-viewer-grid/3072094/6) :))

---

<div class="post-metadata">

**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\
**Post date:** [June 25, 2024, 11:55pm UTC](https://community.thunkable.com/t/solved-how-do-i-make-an-image-appear-when-clicking-an-image-from-a-data-viewer-grid/3072094/9 "2024-06-25T23:55:52Z")

</div>

1. It’s a single image component but I uploaded the images as assets to the project. They are named face1.png, face2.png, etc.

---

<div class="post-metadata">

**Author:** ![matt\_conroy](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/matt_conroy/32/150843_2.png) [@matt\_conroy](https://community.thunkable.com/u/matt_conroy)\
**Post date:** [June 26, 2024, 3:43pm UTC](https://community.thunkable.com/t/solved-how-do-i-make-an-image-appear-when-clicking-an-image-from-a-data-viewer-grid/3072094/10 "2024-06-26T15:43:29Z")

</div>


