Fullscreen button for images

[Kalcifer Kandari]

I have a lot of images on my site that are designed to be viewed in fullscreen. You know how videos have a fullscreen button that causes the video to take up literally the entire screen, where the button only shows again if you move the mouse? I'd like that exact thing for images.

I was thinking of starting with something like the following code, but I don't think <script> tags work:

<script>

var element = document.getElementById("fullscreen-img");

function fullscreen() {
  element.requestFullscreen
}

</script>

<img src="test" id="fullscreen-img">

<button onclick="fullscreen();">Open image in fullscreen</button>


Can this be done with TiddlyWiki?

Kalcifer

[A Gloom]




<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"/>


[Kalcifer Kandari]

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

[Kalcifer Kandari]

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

[Sylvain Naudin]

Hi,

An idea perhaps, that you associate to your second button an action to close the previous image. But it's okay if there's only a few pictures...

[Mat]

Kalcifer

When you say "page" do you mean "tiddler"? Or maybe you mean the viewport?

I'm not sure how to do "showing the button when the mouse is moved" but it would be simple to make the button hide until it is hovered. Is that sufficient (or maybe you already solved the show-on-mouse-move).

Regarding

I need some way to keep track of which image is 'active'. 

This sounds like a so called state tiddler. Buttons typically set these, ie. you set a value in a separate tiddler, e.g a binary "show/hide" and then let the value in this tiddler decide if something is shown or not. You might also want to check out the revealwidget in this context.

General: You might find some ideas from http://pptw.tiddlyspot.com/  which is not full screen but full viewport.

<:-)

[A Gloom]

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

[Kalcifer Kandari]

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

[Kalcifer Kandari]

• 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

[Kalcifer Kandari]

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

[Mat]

Kalcifer Kandari wrote:

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.

You'll help out and make it better once you've solved this, right?

<:-)

[Kalcifer Kandari]

Of course I will. I'm trying using TiddlyWiki to create documentation for something I'm creating. I just don't know how someone can take the time to make something complicated that a lot of people will use, and then in an act of immense irony, NOT effectively tell them how to use it! There are people in this community who have gone through the pain of learning how to make plugins, understand the API if one even exists, and utilise JavaScript, and where are their tutorials? It's going to take me weeks to understand this, just to make a measly 18 lines of code work.

Sorry for the rant, but bad documenation is incredibly irritating.

Kalcifer

[Mat]

Since you're trying to get a JS thing to work, maybe the dev group is more appropriate. There's also the https://tiddlywiki.com/dev/

<:-)

[Kalcifer Kandari]

I made a dev post here. And a big documentation post in the docs group, though maybe that one's waiting for approval?

Kalcifer

[Kalcifer Kandari]

Good solution is here, thanks for the help.

Oh, and my docs thread is up, it's a call to create a hub for this sort of thing with tutorials etc. Basically improving https://tiddlywiki.com/dev/. Already got some replies.

Kalcifer