I'm so close to finding the solution, but not quite there. Here is what I
have so far:
WikiText:
<$button message="tm-full-screen">
<img src="test_1.png">
</$button>
<$button message="tm-full-screen">
<img src="test_2.png">
</$button>
CSS:
.tc-tiddler-frame {
/* This is necessary because otherwise position:fixed won't work. */
transform: none !important;
}
:fullscreen button img {
position: fixed;
top: 0px;
left: 0px;
width: 100vw;
height: 100vh;
}
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?
Kalcifer
On Monday, May 18, 2020 at 1:38:01 PM UTC+1, Kalcifer Kandari wrote:
>
> Whoa, thanks. Hadn't come across this widget before.
>
> I did this, and clicking the image made the website go fullscreen,
> suprised that's built-in:
> <$button message="tm-full-screen" param="enter">
> <img src="test.png">
> </$button>
>
> Now I just need that specific image to take up the whole screen only in
> fullscreen. Can't think of how to do that with CSS.
>
> Kalcifer
>
> On Monday, May 18, 2020 at 12:55:32 PM UTC+1, A Gloom wrote:
>>
>>
>> <img src="test" id="fullscreen-img">
>>
>> without using js you can wrap the image in a button or include a button
>> with it using this
>>
>> <$action-sendmessage $message="tm-full-screen" $param="enter"/>
>>
>
--
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/29773cdc-a257-49bb-a76c-5981c8a43be4%40googlegroups.com.
