BB’s Blog:本博近期关注 中国移动、电影、电视、手机软件.
lightbox JS for MT

lightbox JS 这个JS作用是将图片在Blog上更美观的呈现。你可以点击下列图片查看效果:
1.jpg 2.jpg 3.jpg 4.jpg

不过这个JS比较大,我并没有将代码直接放入首页源码中,所以大家查看效果的时候需要等缓存完毕,要不点击图片会直接弹出窗口。很适合喜欢摄影的博友使用。

安装使用方法:
1、 下载该JS

2、在页面中加入该JS包中的文件识别代码

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

3、使用时,在相应显示图片的文章中加入rel="lightbox"

例如:

<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>
多张图片顺序播放如下:
<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>

如果你在上传图片的时候,不想一次一次的去手动添加rel="lightbox"的话,你可以对MT的lib/MT/App/CMS.pm 文件作以下的修改

<a href="$url" rel="lightbox">
<img alt="$fname" src="$thumb" width="$thumb_width" height="$thumb_height" /></a>

上面红色的地方是追加的文字。这样在你上传图片的时候就会自动的添加上rel="lightbox"。

本文信息

» 跟踪本文: 手机WAP
» 发表日期:2007年03月14日 2:08 PM
» 分类: 部件 Parts
» 作者:bb
» 本文链接:http://bblog.biz/movabletype/_parts/lightbox_js.htmlEDIT
» 本文引用地址:本文不允许引用
» 本站留言支持:html标签、coCommentgravatar
» 书签:Add to 365KeyAdd to del.icio.us百度搜藏Add to Yahoo
» 现有评论:-、现有引用:-
» 评论审核:直接点击“我要回复”评论文章,需要管理员验证后才能显示,感谢你的回复.

评论(-)

本文不允许评论

引用(-)

本文不允许引用

我要回复

昵称:   记住我的用户信息:
邮件:   Subscribe to This Entry:
主页:
Very Happy Smile Sad Surprised Shocked Confused Cool Laughing Mad Razz Embarassed Crying or Very Sad Evil or Very Mad Twisted Evil Rolling Eyes Wink
Short Cuts
Search my Blog
Subscribe This Entry
  • Enter your Email address:
Archives
Vote
评价本文:
Category Entries