- ベストアンサー
jQueryイメージギャラリーでの画像保護方法
はじめまして。 jQueryプラグインの「lightbox」や「colorbox」などを用いたフォトギャラリーにて、 右クリックやドロップによる画像の持ち出しを禁止する方法を探しております。 表示画像に自動で透明画像を被せる、表示部分だけメニュー無効化などでしょうか。 保存に一手間を取らせる程度の簡単なもので構いません。 可能ならばlightboxもしくはcolorboxを利用したいのですが、似たようなものは多くあると思いますので、他のプラグインでも大丈夫です。 どうぞよろしくお願い申し上げます。
- 0ar0ar0
- お礼率100% (3/3)
- JavaScript
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
php及びphpの基本拡張機能であるgdを使用 jQueryのFancyboxプラグインを使用 無名関数で自動実行(各オプションは調べて状況に応じた物に変更して下さい) $(".litebox").fancybox({ 'type' : 'inline', 'scrolling' : 'no', 'transitionIn' : 'elastic', 'transitionOut' : 'elastic', 'speedIn' : 600, 'speedOut' : 200, 'overlayShow' : true }); //クラスliteboxにてlitebox化 html部にて <a href="veal_photo.php?path=xxxx.JPG" class="litebox"> veal_photo.phpとして <?php //処理文字コードの指定 mb_language("Japanese"); mb_internal_encoding("UTF-8"); mb_regex_encoding("UTF-8"); //GETでパス情報を受渡し(GETで受け取った情報には手を加えない様にしています) $varGET = $_GET; //画像サイズを取得 $img_info = getimagesize($varGET[path]); $img_width = $img_info[0]; $img_height = $img_info[1]; ?> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=UTF-8"> <META http-equiv="Content-Style-Type" content="text/css"> <TITLE></TITLE> <style type="text/css"> <!-- html,body { width: 100%; height: 100%; margin: 0px; padding: 0px; border: 0px; } div#container { width: 480px; height: 360px; position: relative; } div#cont_photo { display: inline-box; position: relative; z-index: 0; } div#cont_veal { position: absolute; top: 0px; left: 0px; z-index: 1; } --> </style> </HEAD> <BODY> <div id="container"> <div id="cont_photo"> <img src="<? echo $varGET[path]; ?>" id="photo"> </div> <div id="cont_veal"> <img src="transparent.gif" id="trans_gif" width="<? echo $img_width; ?>" height="<? echo $img_height; ?>"> </div> </div> </BODY> </HTML> transparent.gifとして透明1ピクセルgifを作成 たまたま以前作成した件で、veal_photo.phpは消してしまって残っていなかったんですが、同一案件が来て再作成している最中ですので… まだテストしていないので、ご自身で細部は詰めて下さい。(以前、作成した時の記憶があるのでケアレスミス程度で、基本的には動くと思います。)
その他の回答 (2)
- kamepanman
- ベストアンサー率43% (19/44)
お礼
回答ありがとうございます！ とても便利そうですが、残念ながら新しいjQueryのバージョンではきちんと作動してくれませんでした…。 単体で使うにはとてもよさそうですね。 ありがとうございました！
- kamepanman
- ベストアンサー率43% (19/44)
無理矢理ですが、こんなのはどうでしょうか？ $("#imgbox img").bind('contextmenu', function() {return false;}); $("#imgbox img").bind('mousedown', function() {return false;}); 動作確認していませんので、確認してみてください。
お礼
回答ありがとうございました！ 参考にさせていただきます。
お礼
回答ありがとうございます！ phpを使うやり方があるのですね…！とても勉強になりました。 ありがとうございました！