Hot!Ajax

Leightbox使用教程及实例

Monday, 17 September 2007

Leightbox是lightbox的修改版，用div代替AJAX calls，ajax不利于搜索引擎的收录，而经修改后的lightbox，是将内容以层的形式插入到网页中从而有利于搜索引擎的收录。

使用方法：

1.在网页的head部分加入以下内容

<!-- CSS --> <link rel="stylesheet" href="css/screen.css" media="screen,projection" type="text/css" />

 


<p><!-- JavaScript -->

<script type="text/javascript" src="scripts/prototype.js"></script>

<script type="text/javascript" src="scripts/lightbox.js"></script></p>

2.改写链接如下面所示

<li><a href="#lightbox1" rel="lightbox1" class="lbOn">Leightbox 1</a></li>
<li><a href="#lightbox2" rel="lightbox2" class="lbOn">Leightbox 2</a></li
<li><a href="#lightbox3" rel="lightbox3" class="lbOn">Leightbox 3</a></li>

3.加入链接所指向的内容 (内容均加入层中)

如本例所示：

<div id="lightbox1" class="leightbox">
<p> <h1>Leightbox 1</h1
Leightbox 1

<p class="foter"> <a href="#" class="lbAction" rel="deactivate">Close</a> </p
</div></p>

4.源文件下载Download Source

5.预览：demo

Set as favorite

Bookmark

Email This

Comments (0) add comment