Hey bubblers, so the idea is to have a graphic/image with objects like cars, people, objects and so on you understand so just basic stuff… If the user hovers over that object i want the page to display data in a focus group relative to that object or when the user clicks on it data on a sidebar gets displayed with more informations…
How can I dynamically create this depending on how many objects are in that graphic/image. First thought a repeating group yes, but to hover or click on that object the button has to be in that custom shape of that specific object in the image/graphic. So I think your already seeing the problem I am encountering, if theres a plugin for that I havent found yet or another maybe more trckier but working solution I would be so thankful
AND if possible, Iam really not seeing another way for that without a repeating group, is that the enduser Can add that button layout himself but I think this is just too much to ask for. Thank you for reading this Question in advance!
It sounds like you’re trying to create hotspots on an image?
It can be done using code, but I don’t know how experienced you are with that.
Based on what I DO know about Bubble so far…
I’m thinking create a group that is align to parent. Place an image in the group aligned to center…then create invisible buttons aligned where you need them over whatever you want?
Then, do a workflow so when button 1 (or whatever) was hovered it would show a focus group and when clicked show another group.
There are widgets on sites like Common Ninja that give you the ability to create hotspots. But, whether it would work in Bubble I have no idea…although they say it does.
So, if I’m understanding your question that would be my thoughts.
Then again maybe I’m just rambling. I get working on a project for a few hours then have to do something to clear my mind
Thank you very much for your reply and thoughts about this. It means a lot!
I just looked into the Hot Spot widget by Common Ninja. They offer a full SDK, but it wasn’t as customizable as I expected after browsing through their website.
I was thinking about coding something myself, but I’ve never implemented anything that interacts with data from my database before. The tricky part is creating a custom-shaped button in form of the flower like a masking—like a flower, for example. The idea is that when a user hovers over the flower, it gets highlighted in blue, and if they click on it, more information about the flower is displayed.
At first, I thought I could use the “custom shape” plugin, but I found out there’s no option to add a workflow to that, which would have solved a lot of my problems. Another challenge I’m facing is with something like a bookshelf image with 50 books, where each book has a different size. I want to enable hovering over each book, but I’m unsure how to create buttons of different sizes for each book in a repeating group. So I can basically just update the image on the frontend, add new text to the new book and add another book-shaped-button. So like just adding or removing a book from the bookshelf
I’ve seen apps that have spent hundreds of thousands on a feature and nobody cared.
It’s like Webflow where you can do twirling whatever, and spinning whatever…but who cares?
It’s all about serving the user and creating an income for yourself.
Users only care what your app can do for them. They don’t care about all the thrills and frills you can offer in the way of cute…and what you consider technological breakthroughs.
I would seriously look at your concept and decide if it was really worth it.
Maybe it is with your use case, I don’t know.
But, usually, a lot of what we think is important, isn’t.
Hopefully, you can figure out a good route to take.
Understandable, so I am creating a 3D animation Illusion like this, an then want to implement the button overlay so its more like a product iam trying to creat than a feature:
sorry for the GIF bubbe won’t let me upload videos
Iam sorry. So basically the Hotspots overlay will be on each key frame/view different (the three images on the bottom), because some objects will be naturally hidden by perspective
The intention behind this is because highly detailed scenes on the web are mostly pretty slow without pixelstreaming. So this approach will offer the user to showcase there scene in an interactive (a.e. on their website/portfolio) way by rendering a video and exporting each frame. After importing their frames and the overlay of the buttons will be applied either by me or the user over each key frame
I am sorry for the confusion
*The switching between overlays is not a problem, already solved it
