css + js 构建的图片查看器

css + js 构建的图片查看器

这是一个使用 css + js 构建的简易图片查看器，使用缩略图点击查看大图，可以分别显示每张图片的描述，大图显示位置使用固定宽度和高度，超出部分隐藏，点击大图可查看完全尺寸，兼容性ie、firefox 、opera。

js部分

以下是引用片段
function showpic (whichpic) {      
if (document.getelementbyid) {          
document.getelementbyid('placeholder').src = whichpic.href;  
if (whichpic.title) {              
document.getelementbyid('desc').childnodes[0].nodevalue = whichpic.title;  
} else {              
document.getelementbyid('desc').childnodes[0].nodevalue = whichpic.childnodes[0].nodevalue;  
}         return false;      
} else {          
return true;      
} }

xhtml

以下是引用片段
<div id=album> 
<div id=pic> 
<img src=第一张大图的地址 alt= id=placeholder /> 
</div> 
<p id=desc>第一张大图的描述</p> 
<div id=thumbs> 
<ul> 
<li><a onclick=return showpic(this); href=第一张大图的地址 title=> 
<img src=第一张小图的地址 alt= /></a></li> 
. 
. 
. 
</ul> 
</div> 
</div>

css代码见文章末端演示文件下载

因为大图显示位置是固定大小的，但图片每张大小是不一的，所以上面代码运行的结果不是理想的，还要加上点击大图查看完全尺寸的代码，这里使用不错的lightbox效果。

在上面js代码中加入

document.getelementbyid('showlightbox').href = whichpic.href;

lightbox需要在a标签里有个大图的地址。.

head区加入lightbox的代码。

在上面的xhtml代码中加入

以下是引用片段
<div id=pic> <a href=第一张大图的地址 rel=lightbox id=showlightbox> 
<img src=第一张大图的地址 alt=点击查看完全尺寸 id=placeholder /></a> 
</div>