HTML slieshow output: fullscreen mode

HelpXplain is the exciting new animated infographics and screencast tool that integrates with Help+Manual.

Moderators: Alexander Halser, Tim Green

Post Reply
Tolzmann
Posts: 2
Joined: Mon Jan 29, 2024 12:36 pm

HTML slieshow output: fullscreen mode

Unread post by Tolzmann »

We want to run a by HelpXPlain generated HTML slideshow on our website by using an iframe.
To improve the quality of the slideshow, the user should have the opportunity, to see the slideshow in fullscreen mode.

Is there any easy way, to add a fullscreen mode to the "custom skin" of the HTML slideshow?

A great way would be, to enhance the player bar of the default skin by a fullscreen button.
This could be also a nice feature for the publisher options in HelpXPlain (Dialog "Publish", Format "HTML Slideshow").

Thanks for the feedback
Enno
BertholdL
Posts: 23
Joined: Fri Aug 09, 2024 3:03 pm
Location: Stuttgart, Germany

Re: HTML slieshow output: fullscreen mode

Unread post by BertholdL »

This suggestion sounds nice!
User avatar
Tim Green
Site Admin
Posts: 23351
Joined: Mon Jun 24, 2002 9:11 am
Location: Bruehl, Germany
Contact:

Re: HTML slieshow output: fullscreen mode

Unread post by Tim Green »

Hi Enno,

Putting an Xplain full screen is not as simple as a video: Video files have full screen capability natively, Xplains are actually regular web pages. You have the following options:

If you're publishing the Xplain in a Help+Manual page it's simple: Then you choose the Light Box mode and the user can press F11 in the light box to go full screen.

If you're embedding it in your own page it's more difficult. Xplains natively fill the full container they are in, but that is your iFrame, and the iFrame is normally inside other containers on the page, which will restrict how large it can get. Even if you set its width and height to 100% by script that will still usually only be 100% of the container. In this case there are these options:
  • You could have a second iFrame version set to 100% of the page dimensions at the top of your page, with a z-index that puts it on top of everything else. You then set this to normally display:none; with CSS and switch it to display:block; with script attached to a button or link. And another button in the second version to hide it again. If the user wants to go full screen they can press F11 to make the browser page full screen. (Remember, this is a web page, not a video!)
  • Alternatively, and probably better, put your second version in a separate page with the iFrame filling the page. Link to it with a button or link that opens it in a new tab or window, and the user can then press F11 to go full screen.
Be warned, however, that on computers with weak graphics the animations can get slow or even stuttery in full screen mode.
Regards,
Tim (EC Software Documentation & User Support)

Private support:
Please do not email or PM me with private support requests -- post to the forum directly.
User avatar
Tim Green
Site Admin
Posts: 23351
Joined: Mon Jun 24, 2002 9:11 am
Location: Bruehl, Germany
Contact:

Re: HTML slieshow output: fullscreen mode

Unread post by Tim Green »

Update: Even though I actually wrote this documentation, it was a while ago and I had forgotten about this additional option. You can also use the loader script included with HelpXplain to embed your Xplains in a web page, and the user can then press F11 for full screen view when they open the Xplain in your page. See the instructions here:

https://www.helpandmanual.com/hx/help/g ... pages.html

You need the second "Advanced loader script embedding method".

Sorry about the omission in the original posting. :oops:
Regards,
Tim (EC Software Documentation & User Support)

Private support:
Please do not email or PM me with private support requests -- post to the forum directly.
Post Reply