Grüßt euch,

hab mir die Anzeige von 11 Files versucht übersichtlicher zu gestalten. Funktioniert auch super. Blöd ist nur, das diejenigen welche Safari benutzen, sich ganz schnell gemeldet haben. Es läuft da leider nicht. Die Mac-App stürzt bei dem Versuch es anzeigen zu lassen komplett ab. (aber hier kann ich es ja abfangen)

Hat einer von euch da eventuell was Ähnliches für die Ansicht umgesetzt? Was jedoch auf allen Browsern läuft.

Würde es ungern verwerfen. Da man schneller ist, wenn man die Files im vollen Format anschauen kann und auch das Herunterladen in den Download Ordner (mit dem Original Filenamen) klappt.

Hier mal ein Auszug des Skriptes ohne CSS. Zur Vereinfachung ist auch nur ein Grid-Container mit dem dazugehörigen Modal enthalten + das Herunterladen des Files, welches dem Modal zugeordnet ist.

<aside class = 'grid-container'>
<aside class = 'gridFormat gridTwo item-1'> <button class= 'myBtn' ><embed src='" +
    if linkBild1 then
        linkBild1
    else
        first(select NinoxKeys).link_kein_Bild
    end +
    "' width=200 height=200
 type=application/pdf> <span style=display: block; width: 80px >Bild 1</span> </button>
<div id='myModal0' class='modal'>
  <!-- Modal content -->
  <div class='modal0-content'>
    <div class='modal-header'>
      <span class='close'>×</span>


      <h2>Bild 1</h2>
    <button1 onclick='download()'>
                  Download file
</button1>
    </div>
    <div class='modal-body'>
      <iframe
              width=100%
              height=750vh
              src='" +
    if linkBild1 then
        linkBild1
    else
        first(select NinoxKeys).link_kein_Bild
    end +
    "'

              frameborder=7

            ></iframe>
    </div>

  </div>
</div>
<script>

var modal = document.getElementsByClassName('modal');

var btn = document.getElementsByClassName('myBtn');

var span = document.getElementsByClassName('close');

btn[0].onclick = function() {
    modal[0].style.display = 'block';
}

span[0].onclick = function() {
    modal[0].style.display = 'none';
}

window.onclick = function(event) {
    if (event.target == modal[0]) {
         modal[0].style.display = 'none';
     }

</script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js'></script>
<script>
function download() {
        axios({
            url: '" +
    linkBild1 +
    "',
            method: 'GET',
            responseType: 'blob'
        })
            .then((response) => {
                const url = window.URL
               .createObjectURL(new Blob([response.data]));
                const link = document.createElement('a');
                link.href = url;
                link.setAttribute('download', '" +
    last(split(text(linkBild1), "/")) +
    "');
                document.body.appendChild(link);
                link.click();
            })
    }
</script>