利用API制作相册展页[JQuery版]

分类：附庸风雅

之前因为图片大，数据解析多次的原因，我的API相册展示页访问起来表示鸭梨巨大，所以我就央求了老四同学帮我写了这么一个JQ版本的。【没办法，我是JS盲o(╯□╰)o】使用之后访问起来果然什么鸭梨都木有啊！在此非常感谢老四同学在百忙之中帮我做了这么个小东西。

废话不多说，先放上相册预览地址：预览地址一 | 预览地址二

继续贴上代码【你也可以在这里找到这段代码】

1
2
3
4
5
6
7
<!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></p>
<p><meta http-equiv="content-type" content="text/html; charset=UTF-8"></p>
<pre><code>    &lt;title&gt;&lt;/title&gt;         
</code>

1
2
3
4
5
6
7
8
<code>            &lt;div id="images" style="background-position: 0px 0px;"&gt; 
                    &lt;a id="back"&gt;BACK&lt;/a&gt;
            &lt;/div&gt;
    &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript"&gt;
</code>

var albumURL = 'http://album.imnerd.org/';

$(function(){

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<code>    $.getJSON(albumURL + 'api.php?method=get.gallery.name&amp;callback=?', function(data){
            $.each(data, function(i,item){
                    $.getJSON(albumURL + 'api.php?method=get.gallery.info&amp;name=' + item + '&amp;callback=?', function(data){
                                            $('&lt;a class="album"/&gt;').attr('href', 'javascript:openAlbum("' + data.name + '")').attr('title', data.description)
                                                    .append('&lt;img/&gt;').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('&lt;span/&gt;').children().eq(1).addClass('img_title').html(data.title).parent()
                                                    .append('&lt;span/&gt;').children().eq(2).addClass('img_title').html('共 ' + data.fileCount + ' 张').parent()
                                                    .append('&lt;span/&gt;').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();
    });
</code>

});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<code>    function openAlbum(albumName) {
            //$('#images').children('a').fadeOut();
            $('.album').hide();
            $('#back').show();
            $.getJSON(albumURL + 'api.php?method=get.photos&amp;name=' + albumName + '&amp;callback=?', function(data){
                    $.each(data, function(i,item){
                            $("&lt;a class='photo'/&gt;").attr('href', item.url).attr('title', item.description)
                                    .append('&lt;img/&gt;').children().attr("src", item.thumbnail).parent()
                                    .append('&lt;span/&gt;').children().eq(1).addClass('img_title').html(item.title).parent()
                                    .appendTo('#images');
                    });
            });
    }
    function getLocalTime(nS) {
            return new Date(parseInt(nS) * 1000).toLocaleString();
    }
    &lt;/script&gt;
</code>

友情提示：本代码只是一个实例代码，请大家根据自己的需要做好相关的修改。

标签: 相册, API, imagevue, JQuery

公子 发表于December 9, 2011

仅有一条评论 »

  1. 视野瞳前

    走过认真看看。。

    视野瞳前 | 发表于 December 9, 2011 12:25:12 #1 [回复]

添加新评论 »

贴图表情