How do I get a marker to reveal fully on click?
Nov 16, 2015
Hi,
I'd like my marker which has a title, blurb and an image (with zoom) to reveal in it's entirety on click. So click marker > entire marker box is shown straight away. Is there a way to do this?
From what I can tell you can get it to reveal all on hover, but this is poor UX as the info disappears as soon as the mouse goes outside the hit area and additionally in my case I want the user to enlarge the image using the zoom feature but don't want the info to disappear when they do that, which is what happens when the marker is set to "Show all on hover".
What I want is a "Show all on click" option. At the moment when marker is set to default 'on click' (i.e. not set to 'Show all on hover') then on hover the title flies out and then only when you click does the rest of the info box appear. This is an issue because in my testing users hover, see the title and thinks that's it and miss the main information.
19 Replies
Just put your marker with the title on a slide layer and group them together with "Ctrl + G". Then use a trigger to hide it when the slide timeline starts. Then set another trigger on your click object to reveal the marker once the click object is clicked.
Hi Tim,
In addition to Daniel's suggested workaround if you'd like to see a change in the behavior you can also share your ideas with our product team by submitting it as a feature request.
Hi,
Thanks for the workaround Daniel although I don't quite understand how it would work. If you have a .story file lying around that'd be helpful.
I was hoping to leverage off this in-built feature to save time. I have 16-20 markers per interaction so workarounds will obviously add time. I'm already using a workaround for a bug that I found when using the 'change image' function, so unfortunately it looks like I won't be getting the time saving I was hoping for using this feature.
If you know of any examples/tutorials of how to build your own that would be good.
Thanks.
Tim, can you provide a slide from your project to give me a better idea of how this will look? I have my own vision of it but it may be different then what you're envisioning and static picks in a slide will help. Then I can probably build you an example.
Hey Daniel, see .story attached.
These markers are pretty limited in there options. I haven't used them yet in SL2 and you can't apply actions to hide or show the reveal part as it is a part of the same object.
Did you try selecting one of these markers and then clicking on the format tab and deselecting "Show All on Hover"? That seems to only allow the number to hover and then you click the button and the content stays expanded until you click it again or click off of it.
Oh, I see your point about that above. Sorry I missed it.....
What I can do is make you an example of how one would work without using markers. But you will need to remake pretty much the entire interaction not using markers.
Yes agree this function is limited but doing something like this from scratch I thought would take more time than I have. Making all those triggers, ensuring the right ones are turned on and the rights ones turned off seems like a lot of effort, but may be only option I have as the "Show all on hover" is unacceptable in terms of UX... for the same reason we've moved away from multiple flyout menus on websites ages ago - too fiddly and frustrating when your mouse goes outside hit area and item closes.
Thanks for your help Daniel.
Thanks for the offer Daniel. I think I'm going to have to do it manually or find another way to do it. Mate, if you wouldn't mind doing an example that'd be great. Then I can see if it's a viable alternative or not.
No problem. I'll upload an example soon.
I attached the same file with my added concept. It's on a slide after the slide you had your example on. It works, but doesn't allow for the user to click the image to enlarge it. It's possible, just a lot more work.
There is a text field in red text off stage to the left that gives you detailed directions on how to make more of the click & reveals. It's not too complicated, but still more work than the markers. Lining up the button with the slide layer associated with it is probably the hardest part.
I tried adding a hover state but the hover would show under the other slide layers if left open. Could have been worked around with a lot of triggers so I decided against it.
Let me know how this works for you.
Excellent, thanks Daniel. It doesn't take that long to however I need the zoom on the images. When I made a few extra markers the zoom did work on the one, but not on the others... not sure why. Any ideas? I've attached my changes.
Only thing I can imagine is that the original picture is that size or smaller. I made 4 smaller in that window and it worked. But it only resized a tiny bit.
You're right. Great, solves the image zoom thing. Thanks for your assistance.
Hi Tim,
In regards to the sizing of the zoom as well, it will work if you've resized the image on your slide to be smaller than the original — for example, if you've inserted a 500x500 pixel image and then resized it to be 250x250, the zoom icon will allow learners to see zoom the image to its original 500x500 size.
Hope that helps clarify and glad Daniel was able to share an example with you.
Hi Daniel/All,
Any idea how I can change the button that triggers the show layer to visited after the layer is closed?
Hi Tim,
If you wanted it to change when the layer was closed you'd likely need to do it with a variable that's adjusted on the layer, and then a trigger on the base layer to change the state when the value of the variable is X. The "when" element of that tricky may be the part you'll want to play with in terms of at what point Storyline is checking that the trigger is executed.
You could also change it when the user clicks before the layer is shown - but then you'd be able to see that change on the layer as well.
Thanks all for the input. In the end I remade the interaction without the in-built functionality.
There are two placeholders: header and description. Add text along the header placeholder and do not add anything to the description placeholder. All the text will show.
This discussion is closed. You can start a new discussion or contact Articulate Support.