このコードは、私の会社のために更新している不動産のウェブサイトを意味しています。基本的には、プロパティ名、住所などの画像と表があるテーブルがあります。もともと、私はいくつかの理由（オーバーヘッドなどをホスティング）のために、通常のJavascriptにASP.netスイッチでこのWebサイトをコーディングしていました。HTMLテーブルのモーダル部門のJavaScriptプリローダーが新しいimg URLに連結されます
このコードのセクションは、そこにいくつかの異なるチュートリアルから来ています。その1つは、ASP.netモーダルdivイメージ "enlarger"チュートリアルです。これは、いくつかの他のサイトと組み合わせた基礎です。私は彼らの名前などについてはまだコメントしていないが、私は彼らにコードを与えることを計画している。私のコードを投稿する前に、以下のリンクがあります。次のように私のコードは、本質的である
http://archive.aspsnippets.com/post/2009/07/06/Image-Gallery-using-ASPNet-GridView-control.aspx
（私はスタイルのセクションで脂肪や余分な改行をトリミングします）：
まずミューダサー・カーン（部分的に関連する）ことにより、そのチュートリアルからモーダルスタイルタグです：
<style>
body {margin:0;padding:0;height:100%;}
.modal {display: none;position: absolute;top: 0px;left: 0px;background-color:black;z-index:100;opacity: 0.8; filter: alpha(opacity=60);-moz-opacity:0.8;min-height: 100%;}
&#divImage{display: none;z-index: 1000;position: fixed;top: 0;left: 0;background-color:White;height: 550px;width: 600px;padding: 3px;border: solid 1px black;}
<style>
Then comes his script, which I may have tweaked here and there:
<script type="text/javascript">
function LoadDiv(url) {
var img = new Image();
var bcgDiv = document.getElementById("divBackground");
var imgDiv = document.getElementById("divImage");
var imgFull = document.getElementById("imgFull");
var imgLoader = document.getElementById("imgLoader");
img.src = url;
var tcopy = img.src.slice(0,(img.src.length-4)) + "_big.png";
img.src = tcopy;
img.onload = function() {
imgFull.src = tcopy
imgFull.style.display = "block";
imgLoader.style.display = "none";
};
var width = document.body.clientWidth;
if (document.body.clientHeight > document.body.scrollHeight) {
bcgDiv.style.height = document.body.clientHeight + "px";
}
else {
bcgDiv.style.height = document.body.scrollHeight + "px";
}
imgDiv.style.left = (width - 650)/2 + "px";
imgDiv.style.top = "20px";
bcgDiv.style.width = "100%";
bcgDiv.style.display = "block";
imgDiv.style.display = "block";
return false;
}
function HideDiv() {
var bcgDiv = document.getElementById("divBackground");
var imgDiv = document.getElementById("divImage");
var imgFull = document.getElementById("imgFull");
imgLoader.style.display = "block"; // I added as it seems to bring back the loader gif
if (bcgDiv != null) {
bcgDiv.style.display = "none";
imgDiv.style.display = "none";
imgFull.style.display = "none";
}
}
</script>
今、上記のすべてのスクリプトは、各不動産会社のプロパティの画像上でonClickイベントハンドラで呼び出されます。これは小さなアニメーションgifで画像をプリロードするとうまくいくでしょう。クローズボタンはうまく動作します。複数の画像で動作しますが、画像が既にプリロードされている場合は、ユーザーが写真をクリックした後に再度プレビューされた画像を強制的に再表示して閉じ、divタグを非表示にしてからクリックします同じプリロードされた画像上にある。
このイベントハンドラは次のようになります。
img onClick="return LoadDiv(this.src);" src="http://www.ourcompany.com/images/prop_thumbs/Some_plaza.png" style="min-width:200 px;max-height:150 px;max-width:200 px;"
私はグローバルなブール値が働くだろうと思ったが、その後、私は実現し、プリロードされており、何かわからtheresのないので、あなたができない場合は、ブールは助けていない可能性があります意味のあるものを前後に渡す。
私は自分の仕事をしてくれるように求めていませんが、正しい方向に提案していただければ幸いです。
よろしくお願いします。