javascript類lightbox効果

最近は携帯サイトで画像の拡大縮小効果を開発する必要があります.lightboxのフレームコードを使いたいですが、コードが多すぎて自分で一つ書きました.
主にスタイルの透明度を使っています.また、divを中央に表示しています.
layoutの具体的なスタイル

 <style type="text/css">

    .lay{position:absolute;z-index:998;margin:0 auto;top:0;height:100%;width:100%;background:rgba(0, 0, 0, 0.3);}

 </style>

複数の画像を結合するイベントの時に問題が発生します.つまり、まずサイクルで要素の個数を判断して、それぞれの要素を結びつけるイベントです.コードはこう書きます.

for(var i=0; i<$(".pic .img").length; i++) {

　　$(".pic .img img").get(i).addEventListener("click", function() {
　　　　alert(i);

   　　$(".fuc").get(i).style.display = "none";

       toBiggerPic(i);  

   })
}

コードをこのように書くと問題があります.このようにすれば、参加画像の個数が5なら、そのiを書く値は常に5です.
これは主に作用領域の問題です.結合関数の前のレベルの作用領域はwindowであり、その値は循環終了後は5であるので、いずれにしても5を示します.解決策とは、機能領域を新たに設置することであり、みんなのいわゆるクローズドを使うことである.
新しいコード:

 for(var i=0; i<$(".pic .img").length; i++) {

        $(".pic .img img").get(i).addEventListener("click", (function(i) {

            return  function() {
　　　　　　　　　 alert(i);

                $(".fuc").get(i).style.display = "none";

                toBiggerPic(i);  

            }

        })(i),false);

もう一つは私のdivです.画像のロードが完了したらサイズを持つことができます.そして中に置くことができます.画像がロードされているかどうかを判断して判断する必要があります.
携帯電話のページで画像のロードが完了したかどうかとpc端末が異なると判断します.初めて画像を読み込むとimg.onload方法が実行されますが、画像のロードが完了したらそのままキャッシュから画像を読み取り、window.onloadのコードを実行しません.画像が初めて読み込まれたかどうかを判断します.具体的なコード:

function toBiggerPic(i) {

    $(".layout").get(0).style.display = "block";

    $(".popOrigPic2").get(0).style.display = "block";

    $(".popOrigPic2 img").get(0).setAttribute("src", $(".pic .img img").get(i).getAttribute("src").replace(/b/, "g"));

    /*                   onload  。             。                 。*/

    if($(".popOrigPic2 img").get(0).getAttribute("complete") == "complete") {

        vMiddle($(".popOrigPic2").get(0));

    } else {

        $(".popOrigPic2 img").get(0).onload = function() {

            $(".popOrigPic2 img").get(0).setAttribute("complete", "complete");

            vMiddle($(".popOrigPic2").get(0));

        }

    }

}

最後に違う携帯電話でテストする時、カバーの表示に問題があります.
Androidのブラウザで、カバー層にクリックして隠します.カバー層が明るくなり、黄色になって消えます.その後の解決方法はカバーの外側にdivを追加して、そのdivにクリックイベントを追加して実現します.
具体的なコードアドレス:http://www.cnblogs.com/zzcflying/admin/Files.aspx.testPicファイル.