Disabling "click for fullscreen" behaviour for images and footnotes

[tilman-schieber]

I have the requirement to use some pictures just for decoration on a course site so I do not want them to be clickable
Here ist my use case: liascript editor

I would love to use the gallery for this but because all the logos I am showing here have a transparent background, it looks really bad. Also I do not want to have the click-for-fullscreen behaviour.
In general I would love an easy way to disable this behaviour for footnotes as well. A fullscreen footnote looks really weird if it's just a single sentence.

[andre-dietrich]

Disabling clickable images

The image part is quite simple, try something like this:

### Linux als Betriebssystem

<!--  style="margin:2em; display:inline-block; width: 150px" -->
![Ubuntu](https://upload.wikimedia.org/wikipedia/commons/7/76/Ubuntu-logo-2022.svg)<!-- data="true" -->

The click and enlarge behavior for images is triggered, if the user has NOT defined some custom stiles/CSS. You can modify the width for example, change the background or define a random parameter like data-something ...

Gallery with background

But If you want to have a gallery and change the background, you can try this:

### Linux als Betriebssystem

![Ubuntu](https://upload.wikimedia.org/wikipedia/commons/7/76/Ubuntu-logo-2022.svg "Ubuntu")<!-- style="background-color: lightgray" -->
![Debian](https://upload.wikimedia.org/wikipedia/commons/4/4a/Debian-OpenLogo.svg "debian")<!-- style="background-color: lightgray" -->
![Archlinux](https://upload.wikimedia.org/wikipedia/commons/e/e8/Archlinux-logo-standard-version.png "Arch-Linus")<!-- style="background-color: lightgray" -->
![Fedora](https://upload.wikimedia.org/wikipedia/commons/0/09/Fedora_logo_and_wordmark.svg "Fedora")<!-- style="background-color: lightgray" -->

In this case, styling will be applied. But I don't know why the Ubuntu-image is not displayed at all ... The others work as expected ...

Footnotes

Do you mean, that you only want to disable that clicking onto a footnote will show the associated text?

[tilman-schieber]

Regarding footnotes: in my mind the default behaviour should be jumping to a footnote (like Wikipedia). I am sure the modal dialogue style footnotes are great if you have footnotes with pictures or video, for simple annotations it feels clunky.

[andre-dietrich]

Footnote is a button, where the onclick function is defined in window.LIA.showFootnote. You can overwrite this function and implement your own behavior like this:

<!--

@onload
const showFootnote = window.LIA.showFootnote

window.LIA.showFootnote = (ref) => {
  if (window.LIA.settings.mode === "Textbook") {
    document.getElementById("footnote-" + ref).scrollIntoView()
  } else {
    showFootnote(ref)
  }
}
@end

-->

# Footnotes

This is a [^ref] with only one URL.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum dolor sit amet.

...

[^ref]: https://LiaScript.github.io

In Textbook mode this will scroll to the associated element, otherwise, if the footnotes are not visible, it will display them ...

Demo: LiveEditor