js点击缩略图弹出层显示原图

嗨 大家好！小女子有个小问题想请教？我想做一个点击缩略图弹出层显示原图，而且是可以套到循环里的。那个大哥哥大姐姐会或者做过类似的，可否代码贴一下 万分感激！ 

解决方案 »

  1.   

    楼主可以试一下 jquery.thickbox.js 
      

  2.   

     jquery.thickbox.js  这个不太会  有可以套用的js吗？
     可否 贴一下 谢谢！
      

  3.   


    jquery.thickbox.js 这个不太会 有可以套用的js吗？
     可否 贴一下 谢谢！
      

  4.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
        <title></title>
        <style type="text/css">
            #imgFrame{ position:absolute; top:40%; left:40%; z-index:1000; display:none;}
        </style>
    </head>
    <body>
        <div>
            <ul>
                <li>
                    <img src="小图路径1" original="原图路径1" onclick="showOriginal(this)" />
                </li>
                <li>
                    <img src="小图路径2" original="原图路径2" onclick="showOriginal(this)" />
                </li>
                <li>
                    <img src="小图路径3" original="原图路径3" onclick="showOriginal(this)" />
                </li>
                <li>
                    <img src="小图路径4" original="原图路径4" onclick="showOriginal(this)" />
                </li>
            </ul>
        </div>
        
        <div id="imgFrame">
            <div><a href="javascript:close();">关闭</a></div>
            <div id="imgbox"></div>
        </div>
        
        <script type="text/javascript">
            function showOriginal(img) {
                document.getElementById("imgFrame").style.display = "block";
                document.getElementById("imgbox").innerHTML = "<img src='" + img.getAttribute("original") + "' />";
            }
            function close() {
                document.getElementById("imgFrame").style.display = "none";
            }
        </script></body>
    </html>