Lightbox Demo ImagesLightbox Demo ImagesLightbox Demo ImagesLightbox Demo Images

     
----作为Web2.0领军的博客看图当然要有自己的特殊方式,Lightbox这个小东西已经火的不能再火,它以类似WINDOWS关机时的方式现实图片,给人强烈的冲击,对传达图片意义起到很好作用,并且支持多图浏览,不愧为代码时代的尤物。今天页鼓捣出来展示一下,望各位捧场。
注:lightbox效果需要等待页面加载完成之后才可以正常使用,至于如何判断页面加载是否完成,请参看浏览器状态栏指示!
----下面来谈这个插件的使用:


1、首先下载附件,将释放出来的lightbox文件夹上传到plugin目录。
2、在blog参数设置中"区域额外代码"中加入如下代码
<script type="text/javascript" src="plugin/lightbox/js/prototype.js"></script><script type="text/javascript" src="plugin/lightbox/js/scriptaculous.js?load=effects"></script><script type="text/javascript" src="plugin/lightbox/js/lightbox.js"></script><link rel="stylesheet" href="plugin/lightbox/css/lightbox.css" type="text/css" media="screen" />

3、在插入图片的时候用html代码插入,并且在链接中加入rel="lightbox"
如:
<a href="attachment/image-2.jpg" rel="lightbox" title="Lightbox Demo Images"><img src="attachment/test1.jpg" alt="Lightbox Demo Images" border="0"/></a>

4、如果使用一组图片,则在链接中加入的代码为:rel="lightbox[图组的名字]"
如:
<a href="attachment/image-2.jpg" rel="lightbox[roadtrip]" title="Lightbox Demo Images"><img src="attachment/test1.jpg" alt="Lightbox Demo Images" border="0"/></a>

<a href="attachment/image-3.jpg" rel="lightbox[roadtrip]" title="Lightbox Demo Images"><img src="attachment/test2.jpg" alt="Lightbox Demo Images" border="0"/></a>

<a href="attachment/image-4.jpg" rel="lightbox[roadtrip]" title="Lightbox Demo Images"><img src="attachment/test3.jpg" alt="Lightbox Demo Images" border="0"/></a>

<a href="attachment/image-5.jpg" rel="lightbox[roadtrip]" title="Lightbox Demo Images"><img src="attachment/test4.jpg" alt="Lightbox Demo Images" border="0"/></a>
     
----特别感谢及相关内容来源.::Westy.Hc's Blog::.
下载文件
这个文件只能在登入之后下载。请先 注册登入
Extra Info
This entry comes from 本站原创.It has been read for 4615 times.You may Leave a comment or 引用(0) this entry.
0 Responses
发表评论
昵称

网址

电邮

打开HTML 打开UBB 表情 打开表情 隐藏 记住我 [注册]