> > - 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. > > I've decided this idea is so clumsy it's impractical. If the user goes to tiddler B *without *going through the button in some tiddler A, the image button would take up the whole screen, but if the user clicks the button where does it take them? To ensure tiddler B make sense on its own, there would have to be some extra instruction from the button in tiddler A to tell tiddler B to make the image button fullscreen, and what to do when its image button is pressed. Is that level of sophistication something action widgets are capable of?
It seems that JavaScript will be necessary. If it is, I'm thinking there are 2 ways to go about this: 1. *Hard: A TiddlyWiki fullscreen image viewer plugin.* I have no idea how to write them, but surely it would be possible to make a basic customisable fullscreen image viewer? Maybe special macro for inserting images like <<fullscreen-image-viewer src:"image.png" fit-to:"both" allow-zoom:"true" gallery-mode:"false">>, which would put the image in the tiddler like normal, but if the image is clicked it takes the user to the fullscreen image viewer without leaving the TiddlyWiki. Could even implement an optional fancy gallery which has next buttons to take the viewer to the next image in the tiddler. 2. *Easy: An external fullscreen image viewer HTML page.* <a href="fullscreen-viewer.html#example.png target="_blank"><img src="exampe.png"></a>. No messing with TiddlyWiki, this would open a HTML file in a new tab that just has a bit of JavaScript to catch the image source and go fullscreen, and some CSS to display the image in fullscreen. Kalcifer On Tuesday, May 19, 2020 at 4:53:07 PM UTC+1, Kalcifer Kandari wrote: > > 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/a10545c1-0ab7-4861-8711-bd4ed949d5e1%40googlegroups.com.
