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

提醒:本文最后更新于 3749 天前,文中所描述的信息可能已发生改变,请谨慎使用。

不是很喜欢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">	
<ul class="photos">
 <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>
 <li><a href="{$photo_b}"><img src="{$photo_m}" /></a></li>
 <php>
 }
 </php>
</ul>
<div style="clear:left"></div>
</div>
{template footer}

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

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

Avatar
怡红公子 擅长前端和 Node.js 服务端方向。热爱开源时常在 Github 上活跃,也是博客爱好者,喜欢将所学内容总结成文章分享给他人。
上一页 不想过春节
下一页 平安回家

17 评论

月光下的小豆豆 IE 8.0 Windows XP
2011-02-23T14:29:26.000Z 回复
话说文章里那个小表情…… 请问博主认识允儿么?或者崇子姐姐?
怡红公子 Chrome 11.0.664.0 Windows 7
2011-02-23T16:01:26.000Z 回复
:9 额,都不认识耶……
Aiio IE 7.0 Windows XP
2011-02-04T10:16:22.000Z 回复
终于搞定的,能够出现弹出照片的!谢谢先,不知道有啥办法让照片缩小到方框大小显示啊?请教请教。
怡红公子 Chrome 10.0.603.0 Windows 7
2011-02-04T11:08:35.000Z 回复
弹出的那个就叫灯箱效果...你的意思我还是不太明白 :5
Aiio IE 7.0 Windows XP
2011-02-06T06:40:49.000Z 回复
就是图片如何能显示的漂亮点,比如让图片居中,靠左或右,放大缩小。是在css还是在flickr中设置啊?
怡红公子 Chrome 10.0.603.0 Windows 7
2011-02-06T07:18:37.000Z 回复
是弹出之后的那个图片么?恩,如果是的话那要换一个灯箱才行~
Aiio IE 7.0 Windows XP
2011-02-03T17:35:00.000Z 回复
灯箱和透明效果怎么都弄不好,能教下吗? photos.html能发个给我吗?
怡红公子 Chrome 10.0.603.0 Windows 7
2011-02-04T04:52:42.000Z 回复
不好意思,可能我写的代码没做测试,有些出入,真是抱歉。 我已经修改好并在完全新的PageCookery中做了测试,没有问题了,欢迎使用。谢谢!
Jclyn Chrome 5.0.375.127 Windows Vista
2011-02-02T06:35:16.000Z 回复
求歌曲下载地址 求播放器代码 高级了 还同步歌词
怡红公子 Chrome 10.0.603.0 Windows 7
2011-02-02T09:01:03.000Z 回复
音乐播放器请在后台添加新插件那里搜索"1g-music-share" 音乐的话是ONCE这部电影里头的,我是下的OST,不过虾米有这首歌的,播放器在这里:[请点击播放器上的下载按钮,就在播放按钮的左边,谢谢!]
Jclyn Chrome 5.0.375.127 Windows Vista
2011-02-01T03:30:26.000Z 回复
:1 话说我到现在用的还是7.2呢 公子 乃就是pagecookery界的大神 :6
怡红公子 Chrome 10.0.603.0 Windows 7
2011-02-02T05:21:02.000Z 回复
:9 大神不是我啦,真的不是…… 话说乃在用么?也不曝光个地址什么的...==,话说果断更新吧,后期有follow功能,虽然不完美,不过还是不错滴... 小小剧透一下,这两天貌似又要出更新了,嘿嘿...
Jclyn Chrome 5.0.375.127 Windows Vista
2011-02-02T06:32:02.000Z 回复
:3 俺就老实巴交的告诉你吧 当年我装8的时候就没装上= =# 升级就更别提了 等这两天的新版本出来我再试试 还有哇 我看了你那个做挂件的教程 也没整出来 :11
怡红公子 Chrome 10.0.603.0 Windows 7
2011-02-02T08:57:53.000Z 回复
挂件的那个,你用小工具的RSS那个就可以了~我那个只是把小工具的代码给搞出来了而已
Jclyn Chrome 5.0.375.127 Windows Vista
2011-02-03T12:03:08.000Z 回复
神马时候更新内部通知我哈子 :4 兔年快乐
lovee Safari 5.0.3 Mac OS 10.6.6
2011-01-31T13:34:57.000Z 回复
又折腾了 :9
怡红公子 Chrome 10.0.603.0 Windows 7
2011-01-31T13:49:44.000Z 回复
:9 乃回复好快啊!