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

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

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

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

 

    <title></title>         

            <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>
友情提示:本代码只是一个实例代码,请大家根据自己的需要做好相关的修改。

利用API制作相册展页

上一篇提到了本人为ImageVue写的一个API,这一篇将给大家提供一个实例,使大家能够更明白的了解和使用这个API.

将下面的内容保存成PHP文件后上传到服务器访问即可,只是简单的做了照片的读取,没有做过多的修饰。有心情的可以根据API做个分页以及JS和CSS方面的修饰。预览地址:点击这里

ul {
margin:0 auto;
}
li {
display:inline;
}

'; switch($_GET['page']) { case 'photo': $photos = file_get_contents($api . 'get.photos&name=' . $_GET['album']); $photos = json_decode($photos, true); foreach($photos as $item) { echo '
  • '; echo '' . $item['title'] . ''; echo '
  • '; } break; default: $gallery_name = file_get_contents($api . 'get.gallery.name'); $gallery_name = json_decode($gallery_name, true); foreach($gallery_name as $item) { $gallery_info = file_get_contents($api . 'get.gallery.info&name=' . $item); $gallery_info = json_decode($gallery_info, true); $preview = file_get_contents($api . 'get.photo&album=' . $item . '&photo=' . $gallery_info['previewimage']); $preview = json_decode($preview, true); if($preview['thumbnail'] != "") { echo '
  • '; echo '
      '; echo '
    1. ' . $preview['title'] . '
    2. '; echo '
    3. ' . $gallery_info['title'] . '(' . $gallery_info['fileCount'] . ')' . $gallery_info['description'] . '
    4. '; echo '
    '; echo '
  • '; } } break; } echo '';

    大家还可以做成WP或者Typecho的博客页面,如果不懂得制作的,可以自行谷歌一下,很简单的!