Lightbox使用及地址变更

更新:太不幸啦,存放文件的服务器Down了,所以建议自己更改文件保存,这样最放心。

下面是Lightbox测试(请在原始网页测试):
图片一
图片二
重新将Lightbox上传到新的服务器上,相信这一次不会再变更地址,请放心使用。
另外再将lightbox使用方法贴在这里:
实现方法:
1.在<head></head>之间添加如下代码(请将全角<>改为半角字符):
<script type="text/javascript" src="http://202.100.82.31/eool/js/lightbox/prototype.js"></script>
<script type="text/javascript" src="http://202.100.82.31/eool/js/lightbox/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="http://202.100.82.31/eool/js/lightbox/lightbox.js"></script>
<link rel="stylesheet" href="http://202.100.82.31/eool/css/lightbox.css " type="text/css" media="screen" />
其中引用的js文件我已上传到自己的FTP空间.
2.在你想要引用图片的位置添加以下类似代码:
  <a href="pic/1.jpg" rel="lightbox" title="my caption">LightBOX测试</a>
 将pic/1.jpg换成你想展示的图片地址
3.添加一组图片用以下类似代码:
<a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>
<a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a>
<a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>
只要方括号内的字符一样,它就会将图片归到一个相册里
注意:
1.找到<body>
并修改为:<body onload="initLightbox()">
2.图片一定要用绝对路径

如果有自己的FTP服务器(如Googlepages),可以将文件传到自己的服务器上,这样会比较“安心”,文件请到Lightbox官方网站下载。下载之后修改其中的CSS和名为Lightbox.js的文件,将其中所有出现图片地址的地方更改为自己上传图片后的实际地址。

(针对Blogger.com生成的博客)
LightBox产生的超炫效果的确很吸引人,可是每次应用的时候都要写入代码并不是件轻松的事,上帝让人有懒惰的特性正是要求我们发现新的方法使一切变得简单起来。
Blogger的设置中有一项设置是“贴子模板”,这是一个预置的功能,可以让我们预先为贴子设置一些默认的形式,以方便撰写。LightBox的代码我们就可以放在这儿,设置以后它就会作为模板的形式出现在新贴子的代码里。一切都很简单
1.“设置”→“格式设定”→“帖子模板”
2.在里面输入你想在每篇帖子里显示的内容就行了,这儿我们要加入的代码是
单张图片:<a href="pic/1.jpg" rel="lightbox" title="my caption">LightBOX测试</a>
一组图片:<a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>
3.重新发布索引

Bloggerspaces新发布了一个超炫相册,呵呵,完全就是一个Lightbox,不过却让应用变的更加简单了,嫌自己的LightBox使用复杂,不妨用它。

LightBox只能在网页中引用图片,如果你嫌功能少,不妨试一试GreyBox,它可以像LightBox一样在网页中轻松引用图片或者网页。

4 条评论:

Peng Lei 说...

谢谢哦~
greybox还是没有弄出来,现在这个世界上又多了一个叫做thickbox的东东,我都头昏了~

匿名 说...

嗯?你以后就搬到这里了?

咖啡鱼 说...

Bloggerspaces的域名绑定到期了,而且新版的Blogger已经变为动态,早晚是要搬回Blogspot的。
Blogspot远比Bloggerspaces的服务器速度快,更加稳定

Qing1979 说...

我和penglei一样greybox和thickbox都搞不定,如果鱼鱼方便的话帮着研究下呵呵。