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

之前因为图片大,数据解析多次的原因,我的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>

 


        <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> 
        


                

                
        
        


</body>
</html>

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

利用API制作相册展页

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

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


  ul {
    margin:0 auto;
  } 
  li {
    display:inline;
  }
</style>
';
  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”(不包括引号!)

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