Overlay for zoomable image on front page to prevent scroll interruption

[TMUND]

Hello :)

I've come to realize that every time I go to the main page, as I start to scroll down I almost invariably end up zooming the Duomo image accidentally. It's a minor thing but some sort of overlay could help facilitate that scroll flow a little better; what do you think?

[avandecreme]

Hello!
Could you explain how that would work?

[TMUND]

Sure, I was imagining a slightly opaque overlay with a message that says something along the lines of "click to reveal/play with demo". That way those who are familiar with OSD could just keep scrolling over the demo and the first time users would have an easy way to activate it.

Does that make sense?

[avandecreme]

Ha got it. I am neither in favor or against such a thing. Let's wait for @iangilman thoughts :)

[TMUND]

As I said, it's a fairly minor thing but every time I visit the page I have a little D'oh moment when I zoom in accidentally while scrolling :)

[iangilman]

Hello! Excellent point. This is a usability issue other sites have with OSD as well, depending on their page structure. I figure this is an opportunity for us to come up with some sort of best practice.

Given that, I'm not excited about the "click to begin zooming" solution, since I don't want that to become the new standard.

Here's another thought: how about if we try to add some intelligence to the wheel handling, where if the user has scrolled the page and hasn't moved their mouse, but now the mouse is on top of the OSD viewer, any wheel action is allowed to go through to continue scrolling the page? I don't know... could be too weird (i.e. produce unexpected results).

Anyway, I'd love to see us play with various solutions to this issue.

[TMUND]

@iangilman could you point me to where this code would live? I can experiment with your suggestion when I get some free time :)

[iangilman]

Sounds great! The code for that image is right here:

https://github.com/openseadragon/site-build/blob/master/www/index.html#L16-L23

...I figure you can just expand on that.