寒冷平原


三月 30th, 2011

picasa相册展示页搭建

8,372 views, picasa, by coldplains.

文章开头,感谢木木同学的贡献,原文链接:http://immmmm.com/using-picasaweb-api-produced-album.html

很久没有写blog了,随着picasa的https访问模式的诞生,以及手机直接上传照片到picasa,我就一直想弄个picasa的相册展示放在blog里,后来看到木木童鞋有教程便看了,直到最近才把它弄出来,哈哈,还是自己不懂这些啊。也确实很感谢这些wp界折腾、又能共享成果的朋友,有了他们,我们这些小白才能有好的东西可以“抄袭”。

好啦,由于木木写得太专业了,我还是简单来说怎么搞吧,方便小白搭建,大虾直接看木木的原文,谢谢!(提示:请注意代码中符号的半角问题

展示:picasa1

首先在下载相关文件:猛烈的点我(链接在文中,我就不单独弄下载链接了)

修改picasa.js中的google的ID:

picasa2

将下载到的文件夹“images”、文件picasa.js(修改后的)和slimbox2.js放在根目录即可;

在wordpress后台新建页面,在纯html模式下,添加以下代码:

<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js></script>
<script type=”text/javascript” src=”http://yourdomain/slimbox2.js”></script>
<script type=”text/javascript” src=”http://yourdomain/picasa.js”></script>

<body>
<div id=”navi”><a href=”1″ style=”display:none;”></a></div>
<div id=”items”></div>
</body>

有朋友反映相册就是不显示,有一种可能是header.php中已加载了

<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js>

请在页面添加的时候不要添加上面这条试试

然后将以下css添加添加到你的样式表中,一般是style.css:

#navi {margin-top:2em;text-align:center;}
#navi a{padding:5px;margin:0 10px;}
#navi .current{text-shadow:#AAA 1px 1px 1px;}
#items{display:none;}
.item{margin:20px 0 20px 42px;text-align:center;display:inline-block;}
.item img{padding:2px;border:1px solid #aaa;-webkit-box-shadow:rgba(0,0,0,.2) 0px 0px 5px;-moz-box-shadow:rgba(0,0,0,.2) 0px 0px 5px;box-shadow:rgba(0,0,0,.2) 0px 0px 5px;cursor:pointer;}
.item span{display:block;height:18px;width:118px;overflow:hidden;}
.thumb,.thumb img{width:120px;height:80px;}
.thumb-1{width:118px;height:118px;display:table-cell;vertical-align:middle;}
.thumb-1 img{vertical-align:middle;}
#albums{margin:10px 35px 10px 42px;height:80px;}
#albums img{width:90px;height:60px;float:left;}
#albums .des{padding: 0 0 15px 120px;line-height:22px;}

/* SLIMBOX2 */
#lbOverlay{position:fixed;z-index:9999;left:0;top:0;width:100%;height:100%;background-color:#000;cursor:pointer;}
#lbCenter, #lbBottomContainer{position:absolute;z-index: 9999;overflow: hidden;background-color:#fff;}
.lbLoading{background:#fff url(images/loading.gif) no-repeat center;}
#lbImage {position:absolute;left:0;top:0;border:6px solid #fff;background-repeat:no-repeat;}
#lbPrevLink,#lbNextLink{display: block;position: absolute;top:0;width:50%;outline:none;}
#lbPrevLink{left:0;}
#lbPrevLink:hover{background:transparent url(images/prevlabel.gif) no-repeat 0 15%;}
#lbNextLink{right:0;}
#lbNextLink:hover{background:transparent url(images/nextlabel.gif) no-repeat 100% 15%;}
#lbCaption,#lbNumber,#lbCloseLink,#lbBottom{display:none;}

好啦,保存你的页面,就可以啦~~当然乃要是会写css自己写喽,反正我是不会的,直接抄的。木木童鞋给的文件也可以修改后单独使用的,因为包含index的嘛,不过我还是喜欢放在页面中展示。只要picasa的https不挂掉,配合android系统,秒杀一切图床,而且picasa的付费空间价格便宜到令人发指。

PS:中午草草的写的,如有错误,请指正。

同时得知最近木木同学由于版权问题跟别人有些口角之争,我的看法是,跟对方说过就可以了,改就可以了,不要太较真而影响自己的心情,那就不好了,不要受他人影响,做自己就好,加油,wordpress界爱折腾的朋友!同时也希望大家尊重原作者的劳动成果。



原创文章,转载请注明转自寒冷平原.本文链接地址:http://coldplains.com/?p=884

博主twitter主页http://x.co/xxoo 欢迎fo


Back Top

Tags:

回复自“picasa相册展示页搭建”

评论 (2) 引用 (1) 发表评论 引用地址
  1. 还是你写的详细,我们这些童鞋应该能看的懂,慢慢学下,谢谢了。

  2. @Denny: :mrgreen: 要学习还得去原作者那里啊,他是学术性的,我是依葫芦画瓢的呢 😆

  1. 亨sir » 将picasa相册搬到你的GAE博客 United States WordPress Unknow Os (,2011-09-13)

    […] 原文:http://coldplains.com/archives/884 […]

Leave a Reply

Back Top

😉 😐 😡 😈 🙂 😯 🙁 🙄 😛 😳 😮 mrgreen.png 😆 💡 😀 👿 😥 😎 ➡ 😕 ❓ ❗ 

注意: 评论者允许使用'@user空格'的方式将自己的评论通知另外评论者。例如, ABC是本文的评论者之一,则使用'@ABC '(不包括单引号)将会自动将您的评论发送给ABC。使用'@all ',将会将评论发送给之前所有其它评论者。请务必注意user必须和评论者名相匹配(大小写一致)。


无觅相关文章插件,快速提升流量