I'm convinced this wouldn't be difficult to get this working within
TiddlyWiki, but the documentation relating to this is so bad I don't know
where to begin.
The following skeleton code works in a plain HTML file, and does basically
what I want. Can anyone tell me the simplest way of getting it to work in a
TiddlyWiki? Even just where I'm supposed to start would be great!
<!-- A button with an image inside. Call the function we define below with
this element as the argument. -->
<button onclick="fullscreen(this);"><img src="test.png"></button>
<script>
function fullscreen(element) {
// Really we want the immediate child of the element we passed.
element = element.children[0];
// Request fullscreen.
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.mozRequestFullScreen) { /* Firefox */
element.mozRequestFullScreen();
} else if (element.webkitRequestFullscreen) { /* Chrome, Safari & Opera
*/
element.webkitRequestFullscreen();
} else if (element.msRequestFullscreen) { /* IE/Edge */
element.msRequestFullscreen();
}
}
</script>
Thanks,
Kalcifer
On Wednesday, May 20, 2020 at 5:11:47 PM UTC+1, Kalcifer Kandari wrote:
>
>
>
>> - 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/7370bab0-299d-41c9-9d11-648e2a1d103b%40googlegroups.com.
