So in the native app I’m making, users can upload multiple images and just set which is the main picture. If you look at image 1, the circles on the right side represents the number of pics available for that user and when the user flicks vertically (going up), it will display the next picture and the white dot will go to the next circle.
Also, in the text overlay (which doesn’t disappear even when the user swipes vertically), if the user presses it (the text overlay area), it will become bigger (scroll up to a certain height) and display more information (see image 2).
How can I do these functionalities? Any tutorials available?
My question is how to implement these 2 functionalities in bubble? The text overlay one, I think I got it figured out - make a group and make the group scroll up when pressed… but for the image swiping one, I have no idea how to do it in bubble.
I’d use a repeating group with the image at a big size and overlay the circles. Set the group to display on 1 row and make it big. Use dynami data to update the circles conditions based on where you are in the repeating group.
I’m working on this now but I’m having problems with the circles. You said to use dynamic data to update the circles conditions. Ok, so first, the number of circles to be displayed will be dynamic (depends on how many images are available). Next, the state of the circles (say, the opacity) will change depending on which pic is shown. How do I link think to which picture is shown?
I have no idea how to do it in bubble. Can you show me how to do this?
Again it’s not very difficult you just need to think in a bubbly sort of way
There are 2 approaches I would suggest:
You can set the condition of the element to change the icon/image based on any condition you specify:
So here I set this text to be visible - note the checkbox is checked when the count is zero. Initially the element is set to be non visible. So you can add a variety of conditions like this to change the element just define multiple conditions.
If the condition doesn’t give you the option to change what you want you can do another trick which is to put multiple elements on top of each other and setting each to visible/ non visible depending on the condition this gives the appearance of any effect you pretty much want to try to do. Just line them up exactly, I’d also put them in the same group to keep them together.
With these 2 approaches I’m certain you can make those circles work the way you want. Give it a shot
@john3 I have a question regarding the images that I will display in the repeating group. My DB table for images have images (images) and main_pic (yes/no). I want the main pic to be displayed first but I’m at a loss on how to do the sorting. Search for images by a specific user then if main pic is yes, it should display first - but in practice, I don’t know how to do it. Any idea?
Under Data Source if you click on your data table - in my case Startup Datas.
It will show you this submenu that you can set constraints on and underneath
is a Sort By area.
Just select main_pic and it will sort by the yes first then no.
So sort by main_pic then on descending i choose “yes”?
And under type i just put images=??? In the previous page, I have a repeating group listing posts and it displays the main_pic for that post. So the user clicks on a post and it brings them to this page. So what do I put for images=?
Can you put a few screenshots of what you are trying to do?
I thought you were trying to sort within the repeating group by the image but it doesn’t sound like it so seeing would make it clear.
@john3 Here are the screenshot of the 2 groups (bec its a native app). The first group where it says “category name” has a repeating group which will display posts with that category name and display the main_pic for that post. That icon on the top right will bring them to a filter group where they can choose the category name. Once they choose one (dropdown list) and they go back to this page, it will search the DB display posts that is under that category. I haven’t set it up yet 'coz I don’t know how to do it yet.
When a user clicks on a main_pic from the repeating list, it will bring them to the next screen (where it says product name) which will show the details of the post. Basically, it will first show the main pic. The circles on the right represents how many pics the post has. I don’t know to make the circles dynamic so I made a group for each circle which will be hidden and collapsed if there is no pic available. I also have a condition on what kind of icon to show depending on what pic is shown (basically, it will give the illusion that the circle icon is moving up or down).
The dark grey area (black but 50% opacity) will have all the other info (texts, buy button, etc). Its suppose to move up (how it is shown in the pic) when clicked and move back down again when clicked again. I don’t know how to do this as well because I want part of the gray to be shown (initial position) to show the item name and cost and when the user clicks on the gray part, it will move up and show all the other details. I understand the collapse function but I don’t know how to make a partial collapse work.
So yeah, I have a couple of questions/problems that I’m going through right now. Would appreciate any advice you can offer.
Sorry I wasn’t clear - you should put a screen shot of the repeating group on category name appearance - that’s the screen that lets you do sorting for the yes/no that you want to do.
I can’t put it in the same group (screen). The filter group will have several options - the user will have to choose a category, a location, condition of the product (brand new, used, etc). then when they click "back"it brings them to this group (where it says category name) and all the options chosen will be considered in the items displayed in the repeating group.
So my table in the DB is post (all the product details), category (list of categories), location (list of location), pics (images of the products, main_pic=yes/no) and the Post table will have a field for category, location and pics.
So will the condition be search for post’s category where category=dropdowninput’s value and search for posts location where location=DropdownLocInput’s value and search for post’s image where images=search for pics where main_pic=yes.
Something like this but I think these 3 conditions give their own results and it doesn’t filter it down. Any advice?
