Thanks for the replies. Before I respond let me make some clarifications. So there are 2 separate problems:
1. Click on image, image takes up fullscreen. Not just the browser window, but the entire screen. 2. When in fullscreen, a button appears to exit fullscreen only when the mouse moves. *Let's focus on number 1.* Here is the full problem: - I have normal tiddlers with a bunch of text and images in them, nothing special. - *These images are best viewed in fullscreen*, because they are almost always 16:9 and high resolution. We can think about fancy controls like scolling the image, or fitting the image in different way later. - The images are not in their own image tiddlers, I am just linking directly to files. I can link them in a tiddler dedicated to each specific image if required. - *When the user clicks on an image I would like it to take up the entire screen. Not the tiddler, but the image itself*. This should be in the same way a video does when you click the fullscreen button. Not just the browser window, but the fullscreen. - When the user clicks the image in fullscreen, or presses escape, everything goes back to normal. Back to the same tiddler as before, preferrably at the scroll position they left off. Reading your replies I think *I will try the following in the next few days*, right now I'm in the middle of something else: - In tiddler A, each image should be in its own button. - When that button is pressed tiddler B is opened and fullscreen is activated. - Tiddler B would have the image in a different button, and have some CSS to make the button take up the entire browser window, which of course is currently fullscreen. - When that button is pressed, the tiddler B is closed, which should automatically take us back to tiddler A, and fullscreen deactivated. Maybe a slight problem of what if the user presses escape in fullscreen instead of pressing the image? Fullscreen would be deactivated but the image would still take up the entire viewport. I suppose the user could just press the image. I think I saw that there is a way to detect a key presses with TiddlyWiki, so maybe I'll look into that. If you think there is an easier way to do it than this, let me know, otherwise I'll get back with the results in a few days. Kalcifer On Tuesday, May 19, 2020 at 4:09:53 PM UTC+1, A Gloom wrote: > > So the this works unless you have 2 images on the same page, because as >> the last one will always be on top. I thought maybe I could make the image >> a label for the button and a radio, but that doesn't seem to work. I need >> some way to keep track of which image is 'active'. Any suggestions? > > > the button trick works for whatever is nested in it so if the 2nd image is > a separate tiddler it will replace any previous separate images with the > css positioning you're using... > > you could embedded an entire tiddler's content in a button which would be > tricky with formatting or use a button by itself *(nothing nested inside > it) and it will make whatever tiddlers you have open be in full screen > > there is some vagueness in what you're doing-- are these multiple images > separate tiddlers or in the same tiddler? > > the button code I provided I use as a button with nothing nested inside > with additional actions which closes the tiddler containing the button, > opening a new tiddler with mixed content (multiple images and text) I want > in full screen-- I didn't have to adjust any positioning other than setting > the tiddler title, subtitle, tags to display:none and tc frame padding set > to 0 (set by a stylesheet for the tiddler and not needing to be invoked > when displayed in full screen), I also did have sidebar set to be hidden, > > > full screen mode is a widget message for the action witdget that the > button/radio button/checkbox widgets use > https://tiddlywiki.com/#Messages > to escape fullscreen with a button use "exit" for the parameter > https://tiddlywiki.com/#WidgetMessage%3A%20tm-full-screen > -- You received this message because you are subscribed to the Google Groups "TiddlyWiki" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/a5d59efd-2dd3-40b0-88fb-58c5517a1803%40googlegroups.com.
