----作为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>
<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::.。
下载文件
0 Responses