Verhindern des Herunterladens von geposteten Bildern

Hallo @davidkingham

Wenn ich das von Ihnen geschriebene Skript richtig verstehe, verhindert das zweite die Anzeige des Kontextmenüs, wenn Sie mit der rechten Maustaste auf ein Bild klicken, das in der Lightbox geöffnet wurde.

Das erste sollte dasselbe tun, wenn Sie mit der rechten Maustaste auf ein beliebiges Bild klicken, z. B. auf die Miniaturansicht im Beitrag.

Aber es funktioniert nicht, ich kann immer noch das sekundäre Menü öffnen und das vollständige Bild in einem anderen Fenster öffnen.

Ich habe versucht, dies in CSS einzufügen:

img {
    pointer-events: none;
}

Es verhindert die Anzeige des Kontextmenüs, aber es verhindert auch, dass Sie auf das Bild klicken können, um die Lightbox zu öffnen.

Was ist falsch?

Es wäre großartig, die Download-Links unter der Lightbox auszublenden.

Ich hatte zuvor diesen Eintrag in CSS:

.image-source-link
{
    display: none;
}

Aber jetzt scheint es auch nicht mehr zu funktionieren, da die Links Download und Originalbild trotzdem unter dem Lightbox-Bild angezeigt werden.

UPDATE:

Ich habe das zweite Skript modifiziert, um auch .lightbox-wrapper einzuschließen, und jetzt scheint es zu funktionieren und das Kontextmenü wird nicht angezeigt, wenn Sie mit der rechten Maustaste auf ein Bild in einem Beitrag klicken, und es öffnet korrekt die Lightbox, wenn Sie auf das Bild klicken.

<script type="text/discourse-plugin" version="0.8">
  api.onPageChange((url, title) => {
    $("body").on("contextmenu", ".cooked img, .mfp-img, .lightbox-wrapper", function(e) {
      e.preventDefault();
    });
  });
</script>

Sollte ich das erste Skript löschen, das versucht, dasselbe für ein generisches img-Objekt zu tun?

Wenn ich das CSS von .img-source-link durch .mfp-title ersetze, funktioniert es und die Download-Links sind nicht mehr sichtbar, aber der Titel wird auch ausgeblendet. Ich verstehe nicht, warum das Ausblenden nur der Links nicht funktioniert und es funktioniert, wenn Sie die gesamte Titelleiste ausblenden.

.mfp-title
{
    display: none;
}