Prevent downloading of posted images

제품 지원
34

안녕하세요, @davidkingham

작성하신 스크립트를 잘 이해했다면, 두 번째 스크립트는 라이트박스에서 열려 있는 이미지에 마우스 오른쪽 버튼을 클릭할 때 컨텍스트 메뉴가 열리지 않도록 방지하는 역할을 하는 것 같습니다.

첫 번째 스크립트는 예를 들어 게시물 속 썸네일과 같은 모든 이미지에 마우스 오른쪽 버튼을 클릭할 때 동일한 역할을 해야 합니다.

하지만 작동하지 않아서 여전히 보조 메뉴를 열고 새 창에서 전체 이미지를 열 수 있습니다.

CSS에 다음을 추가해 보았습니다:

img {
    pointer-events: none;
}

컨텍스트 메뉴가 열리지 않도록 방지하지만, 이미지를 클릭하여 라이트박스를 여는 것도 방지하게 됩니다.

어디가 잘못되었나요?

라이트박스 아래에 있는 다운로드 링크를 숨길 수 있으면 좋겠습니다.

이전에 CSS에 다음 항목이 있었습니다:

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

하지만 이제는 이것도 작동하지 않는 것 같습니다. 왜냐하면 다운로드 및 원본 이미지 링크가 여전히 라이트박스 이미지 아래에 표시되거든요.

업데이트:

두 번째 스크립트를 수정하여 .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;
}