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

作者：公子 发布时间：December 9, 2011 分类：附庸风雅

之前因为图片大，数据解析多次的原因，我的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制作相册展页

作者：公子 发布时间：December 1, 2011 分类：附庸风雅

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

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

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
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 '<a href="' . $item['url'] . '" class="highslide" onclick="return hs.expand(this,{slideshowGroup:\'images\'})"><img src="' . $item['thumbnail'] . '" alt="' . $item['title'] . '" />';
        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><a href="?page=photo&album=' . $item . '" alt="' . $gallery_info['title'] . '"><img src="' . $preview['thumbnail'] . '" alt="' . $preview['title'] . '" /></a></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的博客页面，如果不懂得制作的，可以自行谷歌一下，很简单的！

ImageVue API

作者：公子 发布时间：November 20, 2011 分类：附庸风雅

这两天突发奇想想要给imagevue做一个API接口出来，这样站外引用什么的就好做多了。简单的应用比如在博客中插入相册或者最近上传照片的RSS挂件什么的都变得轻而易举了。开始想用树形文件夹的遍历来获取数据的，然后发现imagevue有将所有的信息都存储在xml文件里，犹如发现新大陆啊。API返回的数据要么是json要么是字符串，没有将其整理成标准的XML格式，原因很简单，我对XML的格式其实也不太熟o(╯□╰)o

我在Google Code上创建了这个项目，需要的同学可以去参观一下：点击这里

API文件下载地址：下载一 

API参数说明：点击这里

若不能下载的可以保存下面的源码为api.php上传到相册根目录即可使用

最后如果有什么想法或者建议请一定要联系我！谢谢

下一篇：利用API制作相册展页 敬请期待...

ImageVue 2.16

作者：公子 发布时间：February 8, 2010 分类：日常杂事

嘿咻，经过我的不懈努力，ImageVue 2.16版的汉化终于制作好啦！谢谢大家的关心以及帮助，由于本人英语不佳，可能有汉化之处过于中文化或者语句生硬，烦请大家指出并提出修改意见，我会第一时间考虑修改。当然，如果汉化有错的地方，你可以在下面留言，或者Mail/QQ/Gtalk/MSN 我，联系方式请浏览关于页面。

ImageVue 程序介绍：

ImageVue是一款Flash版超酷超炫相册网站程序，易 于安装，易于管理，使用者只需在后台上传好图片即可。程序包括相册，幻灯片播放和后台三个部分，提供多种风格给大家选择，喜欢DIY的朋友后台也有大量的 选项提供给大家设置。

主机要求：一台支持PHP的服务器或者虚拟主机，以及GD库扩 展，便于程序生成缩略图/如果没有则需要自己修改图片生成缩略图并上传，一般PHP主机均配置/

官方网站：http://imagevue.com/

预览地址：http://imnerd.org/album

ImageVue 2.16汉化版介绍：

ImageVue 2.16汉化版是在原版的基础上参照ImageVue 2.14汉化版本增加了后台的汉化，便于大家的管理。鉴于本人第一次汉化程序，汉化有不当之处，还请大家留言指出，谢谢！如果还没有使用过 ImageVue程序的，只要下载完整版即可，如果已经在使用的，可下载汉化包解压到Imagevue程序根目录并覆盖即可。此操作不会更改你的数据以及 其它操作！

汉化版所修改文件：(指定到目录的则为该目录所有文件)

../imagevue/admin/controllers

../imagevue/admin/guestcontrollers

../imagevue/admin/templates

../imagevue/admin/uploader.swf

../imagevue/controllers

../imagevue/filemods/filemod.xml

../imagevue/images/uploadfilebutton.png

../imagevue/include/config.xml

../imagevue/include/theme.xml

../imagevue/templates

温馨提示：请对自己修改过的文件备份，以免文件覆盖过程中发生 丢失！

下载地址：

ImageVue 2.16汉化完整版：下载一 | 下载二

ImageVue 2.16汉化文件包：下载一 | 下载二

PS:由于ImageVue 2.16汉化文件的某些编码问题，导致后台会出现错误提示，再此特作出修正版本，如果您在2月9日之前下载了上面两个文件的，请下载解决方法包，解压后将controllers文件夹上传至imagevue/admin文件夹下进行覆盖即可解决！欢迎大家反馈自己的使用心得！

修正版作出了如下修改： 1. 修正了上个版本中出现的错误提示问题； 2. 对textpage和contact页面进行了汉化； 3. 都某些细节进行了汉化修改；

下载地址：

ImageVue 2.16错误提示解决包： 下载一 | 下载二

ImageVue 2.16汉化修正完整版： 下载一 | 下载二

ImageVue 2.16汉化修正文件包： 下载一 | 下载二

PS2:由于本人马大哈，设置中的缩略图设置有些选项没有汉化，给大家造成的不便还请见谅，如果有在2月9日之前下载了修改版的站长请下载最终版修正文件并上传到imagevue/include/文件夹下覆盖即可。此次虽然发布的是最终版，但并不表示没有错误，还请大家积极反馈自己的意见，谢谢！

下载地址：

ImageVue 2.16最终版修正文件： 下载一 | 下载二

ImageVue 2.16汉化最终文件包： 下载一 | 下载二

ImageVue 2.16汉化最终完整版： 下载一 | 下载二

友情提示：如遇到压缩包需要解压密码的，密码一律为“http://imnerd.org”(不包括引号！)

特注：此汉化版可修改，可传播，可共 享，但怡红公子对此汉化版本享有最终拥有权，由于只是对原版程序进行汉化，所以由于此程序所造成的一切损失与本人无关。

    1. 1