Hi! I’m looking for a way to achieve similar effect.
How to add these ‘anchor points to image for modals’?
(I do not even know how to call this)
See it here
You can recreate that using an icon for the dots and PopDrop dropdown set to hover.
The tricky bit will be positioning the dots over the image on multiple devices / screen sizes. You are probably better of adding them to the image in Photoshop and then targeting a larger area for the Popdrop dropdown.
If you are using UIkit from @Lucas you could do that with the Position stack. I think also @willwood makes a stack for this sort of thing, although I’m not sure how it works.
I think Target by Joe might be able to do it too, although again don’t know how it works.
Theres also Joes Points stack for the targeting but I’ve never used it so don’t know how it works. Target will be tricky as multiple similar screen sizes will make it very hard to, er, target.
Rather than trying to position the drop downs to a specific icon I suggest you just position Popdrops to trigger on hover when the user is in the close vicinity to the subject. A lot easier but still will take some setting up.
If I had to do that, that’s the way I’d go too.
Although, it has to be said, these things are great in theory (or not) but generally are a PITA to use in reality. IMO it’s one of those things that “designers” love and everyone else hates. IMO.
1 Like
Thank you for your responses!
Will look into Popdropdown, Target and see what wildwood has.
I am using Foundry so Ulkit it out option.
Planning to have it only on desktop and hide it from mobile size any way, perhaps it helps? If I can make it work well maybe then I could try to make a version for each size with Visibility stack
Its’ only going to work on desktop - forget mobile devices as the user wont know to trigger it and it’ll hog the screen if triggered. That makes it a bit easier to position.
IMO it’s one of those things that “designers” love and everyone else hates. IMO.
Good to know :D WP design type of virus…
Thanks, now that you said it it makes perfect sense to skip it.
@TapioMichael: I used @joeworkman’s Points 2 stack (https://www.weavers.space/stacks/points). Here is my page in action: yankee-lake.org (scroll down to the “Points of Interest” map). It is responsive. I am a complete neewbie and was able to make it work without a problem. I am using the Foundation framework; I don’t know if the Points 2 stack requires that.
Hejsan yes Joe Workmans Points 2 stack can easily do this. You make the points and then you can set clicking the points to reveal almost any kind of pop up or modal, there is long list in the stack that can be trickered by clicking on the points. Very nice indeed, I am using this on my fathers webpage about our long gone relatives. Build in source by the way.
Kind Regards
Thank for suggestion @YankeeLaker & @Kent.
I got Points2 stack today and it was exactly what I needed! Works well with mobile size and with Foundry as usually Joe’s stacks does. Only thing I didn’t get working yet was font awesome icons, have to get into that…