Lightbox2をカスタマイズしてみました．右クリック禁止．

2024.08.12

Logging

おはようございます．先日、Lightbox2をカスタマイズしてみました．Lightbox2は画像をポップアップ表示できるJavaScriptのライブラリ機能です．そのソースコードをカスタマイズし右クリック禁止の機能を追加しました．

ソースコードの編集箇所はlightbox.jsファイルの307行目の下に下記のコードを追加することで、対応可能です．

      $image.on('contextmenu', function(event) {
        event.preventDefault();
      });

なお、lightbox.jsはJqueryが動作している環境で動作するライブラリです、Jqueryが入っていない場合はlightbox.jsが入っていたフォルダに有るlightbox-plus-jquery.jsかlightbox-plus-jquery.min.jsを読み込ましてください．lightbox-plus-jquery.jsかlightbox-plus-jquery.min.jsを読み込ました場合は変更箇所が違いますので注意が必要です．

ちなみにソースコードを覗いて見ると案外自分でも作れそうな構造でした、昔に比べて自分も少しは技術が上がったのかもと思った瞬間でした．

先人のオープンソースコードを見ると本当にためになります．

明日へ続く．

タグ

$image.on, contextmenu&#39, EVENT, event.preventDefault, function, jquery, Lightbox, lightbox-plus-jquery.jsかlightbox-plus-jquery.min.js, lightbox.js, lightbox.jsファイル, LightBox2, オープンソースコード, ソースコード, フォルダ, ポップアップ, ライブラリ機能, 先人, 構造, 瞬間, 編集箇所,

定番javascript、右クリックを禁止するあのコード．

2024.06.28

Logging

おはようございます、定番javascript、右クリックを禁止するあのコードを自分のサイトにも導入しました．因みにJSをOFFにするとリダイレクトページへ飛ぶ仕様になっているので右クリックから画像保存とかは出来ない感じになりました．スマホでどういう挙動になるのかは知らないけども．

  if(document.querySelector('video')){
    let elm = document.querySelectorAll('video');
    [...elm].forEach(el=>nocontextmenu(el));
  }
  if(document.querySelector('img')){
    let elm = document.querySelectorAll('img');
    [...elm].forEach(el=>nocontextmenu(el));
  }

  function nocontextmenu(elm){
    elm.addEventListener('contextmenu',function(event){
      event.preventDefault();
    });
  }

今まで画像保存とかしていた人はソースコードからURLを導き出して画像保存とかを行っても良いですが画像などの二次配布などは禁止しています．

尚、当たり前ですが上記のソースコードの可変などはOKです．

追伸：スマホはCSSで対応

video,img{
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  -moz-touch-callout:none;
  -moz-user-select:none;
  user-select:none;
}

明日へ続く．

タグ

document.querySelector, EL, elm, elm.addEventListener, EVENT, event.preventDefault, foreach, function, if, JS, moz-touch-callout, moz-user-select, nocontextmenu, none, querySelectorAll, user-select, webkit-touch-callout, webkit-user-select, リダイレクトページ, 追伸,