PageCookery:为照片墙增加灯箱和透明效果

[music1g play=#315715]

不是很喜欢PageCookery默认的照片墙效果,很早之前用了@ideeland同学的方法换了一个透明效果,感觉还不错。这两天又想着搞一个LightBox(灯箱)效果,即点击小图片后可以用LightBox效果浏览大图片。预览效果请见:传送门

PageCookery里头Flickr照片墙是通过CURL函数获取最近上传的json数据来实现的,比较可以的是获取过来的json数据只有小图地址而没有大图地址。所以我就打算自己用Flickr API写过一个。经试验发现,这里需要使用flickr.people.getPublicPhotos和flickr.photos.getSizes两个API,前者获取最近上传照片的信息,后者则获取特定照片的全部尺寸地址。

将下列代码保存成photos.html替换掉template/photos.html


{template header}
<style type="text/css">
    @import 'css/jquery.lightbox.css';
    ul.photos li {
    overflow:hidden;
    /根据这个宽度和长度控制你单行显示图片的数量,如果总长是600px,这里设置为100px的话那么你单行就能放6张图片,可以根据自己的情况做改变。/
    /实在计算不来的可以慢慢试出最佳值/
    width:149px;
    height:149px;    
    }
    ul.photos li a {
  filter:alpha(opacity=70);
  opacity:0.7;
  -moz-opacity:0.7;
  -webkit-opacity:0.7;    
  }
  ul.photos li a:hover {
  filter:alpha(opacity=100);
  opacity:1;
  -moz-opacity:1;
  -webkit-opacity:1;
  }
</style>
<script type="text/javascript" src="javascript/jquery.lightbox.js"></script>
<script type="text/javascript">
    $(function() {
        $('ul.photos li a').lightBox({fixedNavigation:true});
    });    
</script>
<div id="main">    
    <php> $key= ""; //输入你申请的key,请到"http://www.flickr.com/services/apps/create/noncommercial/?"这里申请你自己的非商用key $user_id = ""; //输入你的账户id,请到"http://www.flickr.com/services/api/explore/?method=flickr.photos.getRecent"这里查看你的id $per_page = ""; //输入你要显示的照片的数量 $data = file_get_contents("http://api.flickr.com/services/rest/?method=flickr.people.getPublicPhotos&api_key=" . $key . "&user_id=" . $user_id . "&per_page=" . $per_page ); $object = simpleXML_load_string($data); $photo = $object -> photos -> photo; foreach ($photo as $each) { $photo_m = 'http://farm' . $each['farm'] . '.static.flickr.com/' . $each['server'] . '/' . $each['id'] . '_' . $each['secret'] . '_m.jpg'; $photo_b = 'http://farm' . $each['farm'] . '.static.flickr.com/' . $each['server'] . '/' . $each['id'] . '_' . $each['secret'] . '_b.jpg'; </php>
  • <php> } </php>

<div style="clear:left"></div>
</div>
{template footer}</pre>

需要填写的东西我已经在代码里写好了,大家填写上就好了。可能美观上有些问题,大家再自己根据我这个修改一下自己的样式表就可以了。如有不懂的地方也可以留言,我会尽量帮忙的啦~
其实我自己的上面是把php语句function成了一个函数,然后再html模板中直接引用就好啦~嘿嘿,发现我最近真的很喜欢这样做,function_microblog.php里已经有好几个自定义函数了。嘿咻~!然后顺便想说的是更换了一个新的icon,没别的意思,就像让大家看一下,结束!

PS:搞完这个之后,我发现Flickr有最近更新的RSS订阅,XML里小图地址大图地址各种齐全,连API,USER_id什么的都不要,各种给力。于是我就这么的悲催了image

PageCookery:为照片墙增加灯箱和透明效果》上有 17 条评论

    1. :9 大神不是我啦,真的不是……
      话说乃在用么?也不曝光个地址什么的...==,话说果断更新吧,后期有follow功能,虽然不完美,不过还是不错滴...
      小小剧透一下,这两天貌似又要出更新了,嘿嘿...

      1. :3 俺就老实巴交的告诉你吧
        当年我装8的时候就没装上= =#
        升级就更别提了
        等这两天的新版本出来我再试试
        还有哇
        我看了你那个做挂件的教程
        也没整出来
        :11

    1. 音乐播放器请在后台添加新插件那里搜索"1g-music-share"
      音乐的话是ONCE这部电影里头的,我是下的OST,不过虾米有这首歌的,播放器在这里:[请点击播放器上的下载按钮,就在播放按钮的左边,谢谢!]

    1. 不好意思,可能我写的代码没做测试,有些出入,真是抱歉。
      我已经修改好并在完全新的PageCookery中做了测试,没有问题了,欢迎使用。谢谢!

  1. 终于搞定的,能够出现弹出照片的!谢谢先,不知道有啥办法让照片缩小到方框大小显示啊?请教请教。

      1. 就是图片如何能显示的漂亮点,比如让图片居中,靠左或右,放大缩小。是在css还是在flickr中设置啊?

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注