2011年12月 - 怡红院落

之前因为图片大，数据解析多次的原因，我的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;"> 
                        BACK
                </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){
                                                $('').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){
                                $("").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>

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

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

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


  ul {
    margin:0 auto;
  } 
  li {
    display:inline;
  }
</style>
<?php
  $api = 'http://album.imnerd.org/api.php?method=';  //注意大家要将这里的网址改成你自己的相册网址哦~  
  echo '<ul>';
  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 '<li>';
        echo '';
        echo '</li>';
      }
    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 '<li>';
                echo '<ol style="display:inline;">';
                echo '<li></li>';
          echo '<li><div id="album"><span class="tilte">' . $gallery_info['title'] . '</span><span class="count">(' . $gallery_info['fileCount'] . ')</span><span class="discription">' . $gallery_info['description'] . '</span></div></li>';
                echo '</ol>';
                echo '</li>';
              }
      }
    break;
    }
  echo '</ul>';

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

怡红院落

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

利用API制作相册展页