lightbox2にてちょっとした盗難防止対策の盛り込み。

質問

「Lightbox2」にて表示される写真(画像)にちょっとした盗難対策を盛り込ませようと試行錯誤しているのですが、どうもどこを変更してよいのか分からないのです。

具体的には

<div class="スタイルR" style="background-image:URL(写真１.jpg);">
<img src="透明画像.gif" class="スタイルC" />
</div>

のようにしたいと思っています。

つまりは、DIVの背景に本来表示させたい画像を表示し、IMGタグにて透明な画像を表示させ、画像を保存しようとすると、透明な画像が保存されるという仕組みです。

簡単はJavascriptでならできるのですが、Lightbox2のように入り組んでいるスクリプトではどこをいじくればよいのか分かりません。

lightbox.jsにて195行目と244～246行目にある、

// <img id="lightboxImage">

var objLightboxImage = document.createElement("img");
objLightboxImage.setAttribute('id','lightboxImage');
objImageContainer.appendChild(objLightboxImage);

が表示される画像のIMGタグだと思うのですが、この先がいまいち分かりません。

分かる方がいらっしゃいましたらこの解決策を教えていただけますか？

Lightbox2のサイト：
http://www.huddletogether.com/projects/lightbox2/

回答No.2

taseki · ベストアンサー

ソースを全部読んでいないので、もうちょっと良い方法があるかもしれませんが…。

ファイル「lightbox.js」の473行目、「this.enableKeyboardNav();」という行の“次”に以下を追加してください。

var oContainer = document.getElementById("outerImageContainer");
var oImg = document.getElementById("lightboxImage");
oContainer.style.backgroundImage = "url(" + oImg.getAttribute("src") + ")";
oContainer.style.backgroundRepeat = "no-repeat";
oContainer.style.backgroundPosition = "center center";
oImg.setAttribute("src", "/image/dummy.gif");
oImg.style.width = "90%";
oImg.style.height = "90%";

※あまり検証していません。
※「/image/dummy.gif」というのが透明画像です。

ちなみに、このスクリプトは結構複雑なので、質問者さんの意図として十分に画像を隠せると思います。ソースを読んで画像のURLを見つけ出すのは、かなり面倒です。
キャッシュなどから取られる可能性も残りますが、まぁ効果として十分だと思います。

お礼

tasekiさんのいう回答どおりに試してみたところすんなりできました、ありがとうございます。