PageCookery照片墙改造

PageCookery July 27 2010 CSS PHP


今天看到人家发给我的一个网站,说很好看。我发现是用ImageFlow做的效果。之前研究过一下下。遂决定将我的微博上的照片墙拿来改造。事实上ImageFlow很简单就是在它预定的DIV里面加入要调用图片的标记即可。

效果:http://t.yourtion.com/?act=photos

改造过程:

因为PageCookery调用Flick的相册后生成的<ul><li>标签,所以先从标签入手,

下载:ImageFlow_1.3.0.zip

把下载回来的ImageFlow解压到你的微博下面的imageflow目录。

然后把template下的photos.html中的

<div id="main" style="padding: 0;">
<ul>

<!--{foreach ($recent_photos['items'] AS $photo)}-->
<li>
<div style="background: url({$photo['media']['m']}) no-repeat center center"title="{$photo['title']}"></div>
<a href="{$photo['link']}" target="_blank">{$photo['title']}</a>
</li>
<!--{/foreach}-->

</ul>
<div style="clear:left"></div>
</div>

替换为:

<div id="main" style="padding: 0;" >
<div id="myImageFlow" class="imageflow" >

<!--{foreach ($recent_photos['items'] AS $photo)}-->
<img src="{$photo['media']['m']}" longdesc="{$photo['link']}"  alt="{$photo['title']}">
<!--{/foreach}--> 

</div>
<div style="clear:left"></div>
</div>

然后在前面加上

<script type="text/javascript" src="imageflow/imageflow.packed.js"></script>

最后在head.html中的<head>中加入

<link rel="stylesheet" href="imageflow/imageflow.packed.css" type="text/css" />

这样就大功告成了,剩下的是一些微调的工作。

下面是我博客的headphoto还有imageflow文件的打包。希望对你有帮助,举一反三自己改造咯

我博客的文件打包:ImageFlow.rar

更加详细的用法可以参看ImageFlow的官方文档:http://finnrudolph.de/ImageFlow/Documentation

原文链接:https://blog.yourtion.com/pagecookery-photo-wall-reconstruction.html


欢迎来到郭宇翔的博客

打酱油专业户,喜欢各种折腾!

Follow @yourtion on GitHub

推荐内容