之前因为图片大，数据解析多次的原因，我的API相册展示页访问起来表示鸭梨巨大，所以我就央求了老四同学帮我写了这么一个JQ版本的。【没办法，我是JS盲o(╯□╰)o】使用之后访问起来果然什么鸭梨都木有啊！在此非常感谢老四同学在百忙之中帮我做了这么个小东西。
继续贴上代码【你也可以在这里找到这段代码】
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xml:lang="fr" xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title></title>
<style>
body {
background-color:#E9E9E9;
color:#333333;
font-family:'Microsoft YaHei','Lucida handwriting',Arial,Helvetica,sans-serif;
font-size:10pt;
margin:0;
padding:0;
text-shadow: 0px 0px 1px #999;
-webkit-text-size-adjust:none;
}
a,a:hover {
color:#333333;
text-decoration:none;
}
.photo, .album {
display:inline-block;
margin:5px;
padding:10px 0;
float:left;
position: relative;
text-align:center;
background-color: #fff;
border: 1px solid #eee;
-webkit-box-shadow:2px 2px 3px rgba(135,139,144,0.4);
-moz-box-shadow:2px 2px 3px rgba(135,139,144,0.4);
box-shadow:2px 2px 3px rgba(135,139,144,0.4);
}
.photo:before, album:before {
-webkit-transform: skew(-25deg) rotate(-6deg);
-moz-transform: skew(-25deg) rotate(-6deg);
transform: skew(-25deg) rotate(-6deg);
left: 27px;
width: 70%;
height: 35%;
content: ' ';
-webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
position: absolute;
bottom: 7px;
z-index: -1;
}
.album img {
width:120px;
}
.img_title {
margin:auto;
display:block;
width:160px;
height:17px;
overflow: hidden;
}
.img_date {
margin:2px auto 0 auto;
display:block;
width:160px;
height:17px;
overflow: hidden;
color:#888;
}
#back {
display:inline-block;
margin:5px;
padding:10px;
float:left;
position: relative;
text-align:center;
background-color: #fff;
border: 1px solid #eee;
-webkit-box-shadow:2px 2px 3px rgba(135,139,144,0.4);
-moz-box-shadow:2px 2px 3px rgba(135,139,144,0.4);
box-shadow:2px 2px 3px rgba(135,139,144,0.4);
display: none;
}
#back:hover {
background-color: #ccc;
}
</style>
</head><body>
<div id="images" style="background-position: 0px 0px;">
<a id="back">BACK</a>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
var albumURL = 'http://album.imnerd.org/';
$(function(){
$.getJSON(albumURL + 'api.php?method=get.gallery.name&callback=?', function(data){
$.each(data, function(i,item){
$.getJSON(albumURL + 'api.php?method=get.gallery.info&name=' + item + '&callback=?', function(data){
$('<a class="album"/>').attr('href', 'javascript:openAlbum("' + data.name + '")').attr('title', data.description)
.append('<img/>').children().eq(0)
//.attr("src", albumURL + data.path + data.previewimage)
.attr("src", albumURL + data.path + 'tn_' + data.previewimage.substr(0,data.previewimage.length-3) + 'jpg')
//.css('width', data.maxThumbWidth)
.parent()
.append('<span/>').children().eq(1).addClass('img_title').html(data.title).parent()
.append('<span/>').children().eq(2).addClass('img_title').html('共 ' + data.fileCount + ' 张').parent()
.append('<span/>').children().eq(3).addClass('img_date').html(getLocalTime(data.mTime)).parent()
.appendTo('#images');
});
});
});
$('#back').click(function(){
//$('#images').children('a:visible').hide();
$('.photo').remove();
//$('#images').children('a:hidden').fadeIn();
$('.album').show();
$(this).hide();
});
});
function openAlbum(albumName) {
//$('#images').children('a').fadeOut();
$('.album').hide();
$('#back').show();
$.getJSON(albumURL + 'api.php?method=get.photos&name=' + albumName + '&callback=?', function(data){
$.each(data, function(i,item){
$("<a class='photo'/>").attr('href', item.url).attr('title', item.description)
.append('<img/>').children().attr("src", item.thumbnail).parent()
.append('<span/>').children().eq(1).addClass('img_title').html(item.title).parent()
.appendTo('#images');
});
});
}
function getLocalTime(nS) {
return new Date(parseInt(nS) * 1000).toLocaleString();
}
</script>
</body>
</html>
友情提示：本代码只是一个实例代码，请大家根据自己的需要做好相关的修改。
走过认真看看。。