kfitz/presentations.kfitz.info
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

install fullscreen; update amical.html to use

Browse Source
This commit is contained in:
kfitz
2023-06-22 17:17:31 -04:00
parent 62e5b1c5b4
commit 6c26eb2b85
4 changed files with 118 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
plugin/fullscreen/README.md Normal file
View File

@@ -0,0 +1,39 @@
# Fullscreen plugin
This is a small Reveal.js plugin to display regular images in fullscreen mode, using the entire available window area, with options `contain` or `cover` mimicking the display behavior of background images.
In Reveal.js, the scaling of [background images](https://revealjs.com/backgrounds/) is controlled by the [data-background-size](https://developer.mozilla.org/en-US/docs/Web/CSS/background-size) attribute. The value `contain` uniformly scales the image to the available window area without cropping the image, leaving empty space if the aspect ratios of the image and the available window area are different, while the value `cover` scales the image to the available area, cropping it either vertically or horizontally, if necessary, so that no empty space remains. However, only one background image can be used per slide. In some cases, it can be useful to consecutively display several images of same size in fullscreen mode within one slide, using the [fragment feature](https://revealjs.com/fragments/) of Reveal.js. For example, to add precisely positioned graphical elements on top of a background photo, or to add a fullscreen slide show within one slide.
## Installation
Copy the file `plugin.js` into a subfolder of the plugin folder of your Reveal.js installation, i.e. `plugin/fullscreen`, and copy the file `fullscreen.css` into the `dist` subfolder of your Reveal.js installation. Load the plugin as shown below.
```html
<link rel="stylesheet" href="dist/fullscreen.css">
<script src="plugin/fullscreen/plugin.js"></script>
<script>
Reveal.initialize({
// ...
plugins: [ RevealFullscreen ],
// ...
});
</script>
```
Alternatively to loading the CSS styles as a separate file, you can add the content of file `fullscreen.css` directly to your local cases file (typically in folders `dist` or `dist/theme`).
## Usage
Add the image in the content section of the slide with the `fullscreen` class. To mimic `cover` mode add also the `cover` class, otherwise the image will be displayed in `contain` mode.
```html
<section data-background-image="https://wallpapercave.com/wp/hd9yFNT.jpg" data-background-size="cover">
<img class="fragment fullscreen cover" src="https://wallpapercave.com/wp/wp3162046.jpg">
<img class="fragment fullscreen cover" src="https://wallpapercave.com/wp/wp3987071.jpg">
</section>
```
## License
Copyright (C) 2021, Roland Schmehl