利用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的博客页面,如果不懂得制作的,可以自行谷歌一下,很简单的!

    ImageVue API

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

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

    API文件下载地址:下载一 

    API参数说明:点击这里

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

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

    相关文章:利用API制作相册展页 | 利用API制作相册展页[JQuery版]

    ImageVue 2.16

    嘿咻,经过我的不懈努力,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”(不包括引号!)

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