最好用插件，去layer官网有专门的点击图片，弹出浏览还支持多个图片。
先去官网下载layer包，你的网页引用layer的js文件。
地址：网页链接 点击相册层
然后js代码：
//调用示例
layer.ready(function(){ //为了layer.ext.js加载完毕再执行
var ps=$("#psize").val()
layer.photos({
photos: '#layer-photos-demo'
,shift: ps //0-6的选择，指定弹出图片动画类型，默认随机
})
})
html代码：
<div id="layer-photos-demo" class="layer-photos-demo" >
<img layer-pid="图片id，可以不写" layer-src="缩略图片地址" src="图片地址" alt="" style="height: 140pxwidth: 120pxborder:1px solid #bbb">
</div>
首先讲下这个bug的出现的情况，页面中有<a href="JavaScript:void(0)" onclick="document.getElementById('current').src=‘images/001.jpg’“>这么一个a标签，onclick中的JS代码就是改变id为current的img标签的src属性，以达到动态切换图片的效
果。可是不幸的是：IE是动态改变的图片的路径，但是图片却不显示出来，得右键“显示图片”才能看到改变后的图片，不知是什
么原因，但据说是<a href="javascript:void(0)">或者<a href="#">这样使用a标签的话并不能阻止a标签最后触发一个什么行为，
导致ie6会错误的认为页面刷新或者重定向了，并且中断了当前所有连接，这样新图片的加载就被aborted了（不知真假），不管原
因是真是假，下面就先说下解决方案吧
简单的解决方法：
1、<a href="javascript:void(0)" onclick="document.getElementById('current').src=‘images/001.jpg’return false“
>；就是在代码后面加上return false即可
2、把A换成SPAN等
问题代码
1 function getNewCaptcha(obj, ct){
2 var oImg = obj.getElementsByTagName('img')[0]
3 var capId = obj.getElementsByTagName('input')[0].value
4 if(!capId){
5 capId = genCapId(obj, ct)
6 }
7 if(capId){
8 oImg.src = '/captcha?c=' + capId + '&r=' + Math.random()
9 oImg.style.display = 'block'
10 oImg.onerror = function(){
11 imgError(oImg)
12 }
13 obj.onclick = function(){
14 getNewCaptcha(obj)
15 return false
16 }
17 }else{
18 imgError(oImg)
19 }
20 }
15行为新加的return false，加上以后IE6就OK了
首先你要有后台的图片地址，然后引用一个js插件就可以实现你要的效果了。至于插件的话，我建议你可以去这人网址下载，里面有很多灯箱图片效果。http://www.xiamiz.com/list-86-1.html 希望我的回答你.如果还有问题，你可以继续追问。
