• ベストアンサー

jQueryイメージギャラリーでの画像保護方法

はじめまして。 jQueryプラグインの「lightbox」や「colorbox」などを用いたフォトギャラリーにて、 右クリックやドロップによる画像の持ち出しを禁止する方法を探しております。 表示画像に自動で透明画像を被せる、表示部分だけメニュー無効化などでしょうか。 保存に一手間を取らせる程度の簡単なもので構いません。 可能ならばlightboxもしくはcolorboxを利用したいのですが、似たようなものは多くあると思いますので、他のプラグインでも大丈夫です。 どうぞよろしくお願い申し上げます。

質問者が選んだベストアンサー

  • ベストアンサー
回答No.2

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は消してしまって残っていなかったんですが、同一案件が来て再作成している最中ですので… まだテストしていないので、ご自身で細部は詰めて下さい。(以前、作成した時の記憶があるのでケアレスミス程度で、基本的には動くと思います。)

0ar0ar0
質問者

お礼

回答ありがとうございます！ phpを使うやり方があるのですね…！とても勉強になりました。 ありがとうございました！

全文を見る
すると、全ての回答が全文表示されます。

その他の回答 (2)

回答No.3

こんなのもありますよ http://www.css-lecture.com/log/javascript/dwimageprotector.html

0ar0ar0
質問者

お礼

回答ありがとうございます！ とても便利そうですが、残念ながら新しいjQueryのバージョンではきちんと作動してくれませんでした…。 単体で使うにはとてもよさそうですね。 ありがとうございました！

全文を見る
すると、全ての回答が全文表示されます。
回答No.1

無理矢理ですが、こんなのはどうでしょうか？ $("#imgbox img").bind('contextmenu', function() {return false;}); $("#imgbox img").bind('mousedown', function() {return false;}); 動作確認していませんので、確認してみてください。

0ar0ar0
質問者

お礼

回答ありがとうございました！ 参考にさせていただきます。

全文を見る
すると、全ての回答が全文表示されます。
  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • jQueryイメージギャラリーに関しての質問です。

    jQueryに関して。下記URLを参考に、イメージギャラリーを設置しました。 http://www.webdesignerwall.com/demo/jquery/img-replacement.html この、大きく表示されている画像に対して、さらにリンクを設定し、画像をさらに大きく表示させられるようなjQueryプラグインはあるでしょうか。 たとえばこの画像は 550px × 400px となっていますが、さらにこの画像をクリックすることで、別に用意された倍のサイズの画像をlightbox効果を付けて表示できるような、そういったプラグインです。 また、この画像が表示されている部分に、別のHTMLファイルを表示させられるようなプラグインがあるかどうかも知りたいです。 よろしくお願いします。

  • WordPressのプラグインとjQueryのそれ

    jQueryの存在を知り、WordPressでスライド画像表示なんかが簡単に実現できることを知りました。さらには、WordPressのプラグインとして直接実装も可能なようですが、両方可能な場合、どちらを選べばよいのでしょうか？ Nivo Slider, ColorBox, FancyBoxを手始めに候補としています。 例えば、jQueryプラグインとして実装したほうが重くならない、などといった違いがあるのでしょうか？比較しつつ教えていただけると助かります。

  • 「jQuery」Lightboxのアニメーションを無くしたい

    フォトギャラリーのホームページを作っています。 サムネイルをクリックしたら、ページ上で写真が拡大表示され、 拡大写真の以外の部分がグレーになるような演出をしたく思っています。 つまりjQueryのLightboxのようにしたいのですが、 Lightboxの「写真を表示するごとに、画像幅に合わせて枠が広がり、 最後にクローズボタン部分が表示される」というアニメーションを無くしたいと思っています。 （シンプルに拡大画像がでてくるのみ、にしたい） このようなことは設定で可能でしょうか？ ちなみに「Lightbox」では無く、「ThickBox」というものを使ってみたのですが、 これが理想の動きではあるものの、IE６ですと画像を開いたときに背景のページが 少しずれる、という不具合があります。 Lightboxの設定や他のライブラリ等ご存知でしたら教えていただけないでしょうか？ 知識不足のため、説明が拙くすみません。。。 どうぞ宜しくお願いもうしあげます。

  • colorboxにいいね！ボタンなどをいれたい

    今、ギャラリー風のサイトを構築中です。 Lightbox風のjQueryプラグイン、ColorBoxを使用しております。 ColorBoxはサムネールをクリックして、画面が暗転して画像が拡大表示されると、 右下に×の閉じるボタンが表示されます。 その左隣あたりに、Facebookのいいね！ボタンとピンタレストの“Pin it”ボタンを 設置したいのですが...JavaScriptが全然分からないので、 どこを触って良いかも分かりません。 拡大画像をHTML上でマークアップするさいに、aタグのtitleの所を上手く使う方法も あるのかな？とも思いますが、いちいちtitleに書き込むのもちょっと煩雑ですし、 できればJavaScriptにて自動に表示されれば...と思っております。 お分かりになる方、どうぞご教授ください。

  • jqueryでGalleryを作りたい

    質問します。 ライトボックスのような画像ギャラリーで、一枚の画像をクリックすると、複数の画像が出てきて、そういうグループを複数設置したいのですが、ピッタリのプラグインありますか？ 画面にはA、B画像があり、Aをクリックするとa01.jpg、a02.jpg、a03.jpg……とライトボックスのように表示され、ESCAPEを押して最初の画面に戻り、Bの画像を押すとb01.jpg、b02.jpg、b03.jpg……というふうに表示したいです。

    • ベストアンサー
    • AJAX
  • jQueryプラグインの併用について

    jQueryプラグインの併用について 失礼します、WEB制作初心者です。 現在jQueryのプラグインであるcolorboxを使用し、 以下のように外部ファイル（PHP）を読み込んでいます。 $(document).ready(function(){ 　$("#inline").colorbox({ 　　contentWidth:"500px", 　　contentInline:"#inline-content" 　}); }); この際、読み込んだPHP内で同じくjQueryプラグインである FlexPlayerをお借りして、音楽を再生しようとしたのですが・・・ 個別では動作するものの、併用すると外部ファイルが読み込まれた後、 プレイヤーの表示がされるだけで、再生ボタンを押しても反応がない状態です。 情けない話ですがリファレンス等を見ても自力では解決できず 悩んでいたので、こちらでお伺いすることにした次第です。 これらのプラグインは同時に使うことはできないのでしょうか、初心者丸出しの 質問で申し訳ないですが、参考になるページだけでも教えてもらえたら幸いです。

  • jQueryのlightBox？もしくはFaceBoxに詳しい方教えて

    jQueryのlightBox？もしくはFaceBoxに詳しい方教えてください。 あのあたりのものはオーバーレイ表示といえばよいでしょうか？ このような動きができるプラグインの表示位置を真ん中ではなく指定した位置に表示させることはできませんでしょうか？ また、オーバーレイ表示させたものを自由に動かすことができるプラグインはありませんでしょうか？

  • Windows フォトギャラリーで画像が開けなくなります。

    フォルダーのピクチャーを開いて、例えば、spain '09 という写真フォルダーとItaly '09 という写真フォルダーをドラッグ・アンド・ドロップで新しく作成したTrip '09という写真フォルダーにまとめると、 フォルダーからはそれぞれの写真を開くことができます。 このときWindowsフォトギャラリーで写真が開かれています。 でも・・・・ Windowsフォトギャラリーを開いて直接、移動したこれらの写真を開こうとすると、このようなメッセージが出てきてしまいます。 「この画像が削除されたか、利用できない場所にあるためこの画像を開けません」 そこで、Trip'09という写真フォルダーから移動したファイルを元に戻すと、Windows フォトギャラリーから直接見ることができます。 以前は問題なくいくつかのピクチャフォルダーを新しいフォルダーに移動しても、直接Windowsフォトギャラリーを開いた時に移動した写真を見ることができたのですが、、 どうしてこうなってしまったのかわかりません。 どうしたら直せるのか教えてください！！！

  • jQuery LightBox Plugin動かず

    複数の画像をLightBoxで表示したくて http://shanabrian.com/web/library/jlightbox.php#option のページ参考にテストしてみました。紹介されてるダウンロードページからデータを取得し、 解凍後、css、images、jsディレクトリを適用するファイルと同じディレクトリに設置しました。 そしてJavaScriptおよびCSSをhead内にコピーし a要素にrel="lightbox"を追加 これで完了のはずですが、しかし動作しません。 画像のページが開いてしまいます。なぜ動かないのでしょうか？ <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>テスト</title> <link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" /> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script> <script type="text/javascript"> $(function() { $('#gallery a').lightBox(); }); </script> </head> <body> <a href="images/sample1.jpg" rel="lightbox"><img src="photos/image1.jpg" width="200" height="300"></a> <a href="images/sample2.jpg" rel="lightbox"><img src="photos/image2.jpg" width="200" height="300"></a> <a href="images/sample3.jpg" rel="lightbox"><img src="photos/image3.jpg" width="200" height="300"></a> </body> </html> お願いします。

  • 複数のjQueryを導入するには…？

    見てくださってありがとうございます。 サイトにスムーススクロールとフォトギャラリーのjQueryを入れたのですが片方が動きません。 ------------------------- <!-- スムーススクロール↓ --> <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script> <script type="text/javascript" src="js/test.js"></script> <!-- フォトギャラリー↓ --> <link href="css/lightbox.css" rel="stylesheet" type="text/css" media="screen" /> <script type="text/javascript" src="js/prototype.js"></script> <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script> <script type="text/javascript" src="js/lightbox.js"></script> ------------------------- コードは上記のように記述してありあます。 スクロールはhttp://klutche.org/archives/536/様のを使用、、 フォトギャラリーはhttp://myisland.jp/様のフォトギャラリーSample#2を使用しています。 片方消すと正常に動くのでコードは間違っていないと思いますが なぜjsフォルダに一個一個入れて呼び出しているのに動かないのかわかりません。 head内にバージョン違いのjQuery本体を呼び出すと動かなくなるのは知っていますが この場合本体は一個しか呼び出していないですよね・・・？ プログラムさっぱりでとても困っています。 解決策よろしくお願いします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する