现在说说如何添加leightbox效果
leightbox是用js实现的一种点击链接弹出窗口的效果,类似于常见的lightbox效果,不过后者只能用于图片,而leightbox则可用于弹出文字窗口,这里有一个示例,可以看到效果。下面简要说说实现过程
- 下载leightbox程序包(文件来源于http://www.eight.nl/files/leightbox/);
- 解压,将其中css和scripts两个文件夹上传至blog根目录(上传前最好先将css目录中screen.css文件中.leightbox 前的内容全部删除,否则会影响原有页面效果);
- 更改blogger模板,在<head></head>中添加 <link rel="stylesheet" href="css/screen.css" media="screen,projection" type="text/css" /> <script type="text/javascript" src="scripts/prototype.js"></script> <script type="text/javascript" src="scripts/lightbox.js"></script>
- 重新发布blog,再写文章时应用<a href="#lightbox1" rel="lightbox1" class="lbOn"></a>包含需要点击的链接,用<div id="lightbox1" class="leightbox"></div>包含需在弹出窗口中显示的内容。注意:在同一页面中需要将lightbox1的后缀设置为不同值,譬如leightbox2,另外在<div id="lightbox1" class="leightbox"></div>中应包含<a href="#" class="lbAction" rel="deactivate">Close</a>否则弹出窗口将无法关闭。
My Tasks/Projects
Projects I Involved
New Task
My Jottings & Pics
Events I Attend
My Opportunities