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

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

Hi alexcoding7, welcome to Thunkable! :tada:

Be sure to check out our posts about How to ask Great Questions v2.0, our Community Guidelines, and our Docs 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 and give that a try.

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.

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

This demo I made might be helpful: Character Creation - #9 by tatiang. 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 :sparkles: Debugging A Project :sparkles: API JSON Tutorial

Want to hire a Certified Thunkable Expert? Elevate your app with Tatiang on Fiverr

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?

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.

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


Previous and next don’t clone each other, which is good, but neither do the clothes themselves.


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 :))

  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.