投稿画像のダウンロードを防止する

製品サポート
34

こんにちは、@davidkingham さん

私が理解している限り、あなたが書いたスクリプトのうち、2つ目のものは、ライトボックスで開かれた画像上で右クリックしたときにコンテキストメニューが開くのを防ぎます。

1つ目のものは、投稿内のサムネイルなど、画像上で右クリックしたときに同じことを行うはずです。

しかし、それは機能せず、セカンダリメニューを開いて画像を別のウィンドウで開くことができます。

CSSに次のように記述してみました。

img {
    pointer-events: none;
}

これによりコンテキストメニューが開かなくなりますが、ライトボックスを開くために画像をクリックすることもできなくなります。

何が間違っているのでしょうか？

ライトボックスの下にあるダウンロードリンクを非表示にできると素晴らしいです。

以前はCSSに次のエントリがありました。

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

しかし、ライトボックスの下に「ダウンロード」と「元の画像」のリンクが表示されるため、これも機能しないようです。

更新：

2つ目のスクリプトを修正して、.lightbox-wrapper も含めるようにしました。これにより、投稿内の画像上で右クリックしたときにコンテキストメニューが表示されなくなり、画像をクリックするとライトボックスが正しく開くようになりました。

<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>

一般的な img オブジェクトに対して同じことをしようとしている最初のスクリプトを削除すべきでしょうか？

.img-source-link の CSS を .mfp-title に置き換えると機能し、ダウンロードリンクは表示されなくなりますが、タイトルも非表示になります。リンクのみを非表示にすることが機能せず、タイトルバー全体を非表示にすると機能する理由がわかりません。

.mfp-title {
    display: none;
}