Hot!Ajax

Latest News

Gsearch

Litebox教程及实例

Monday, 17 September 2007

litebox是lightbox v2.0的改良版，Litebox使用了moo.fx及prototype.lite，因此你能够扩展Litebox的功能。

Litebox- Same great taste, less calories

litebox是lightbox v2.0的改良版，Litebox使用了moo.fx及prototype.lite，因此你能够扩展Litebox的功能。

预览：

<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta content="www.hotajax.cn" name="author" />
<link media="screen" href="http://www.hotajax.org/download/lightbox/litebox-1.0/css/lightbox.css" type="text/css" rel="stylesheet" />
<link media="screen" href="http://www.hotajax.org/download/lightbox/litebox-1.0/css/style.css" type="text/css" rel="stylesheet" />
<script src="http://www.hotajax.org/download/lightbox/litebox-1.0/js/prototype.lite.js" type="text/javascript"></script>
<script src="http://www.hotajax.org/download/lightbox/litebox-1.0/js/moo.fx.js" type="text/javascript"></script>
<script src="http://www.hotajax.org/download/lightbox/litebox-1.0/js/litebox-1.0.js" type="text/javascript"></script>
<div id="content0">
<h3>多张照片:</h3><a title="孙燕姿1" href="http://www.hotajax.org/download/lightbox/litebox-1.0/images/image-1.jpg" rel="lightbox[example]"><img class="bordered" height="140" alt="Beautiful Horses" src="http://www.hotajax.org/download/lightbox/litebox-1.0/images/thumb-1.jpg" width="99" /></a> <a title="孙燕姿2" href="http://www.hotajax.org/download/lightbox/litebox-1.0/images/image-2.jpg" rel="lightbox[example]"><img class="bordered" height="139" alt="Beautiful Sprouts" src="http://www.hotajax.org/download/lightbox/litebox-1.0/images/thumb-2.jpg" width="93" /></a> <a title="孙燕姿3" href="http://www.hotajax.org/download/lightbox/litebox-1.0/images/image-3.jpg" rel="lightbox[example]"><img class="bordered" height="140" alt="Sup dog?" src="http://www.hotajax.org/download/lightbox/litebox-1.0/images/thumb-3.jpg" width="93" /></a>
<h3>单张照片：</h3><a href="http://www.hotajax.org/download/lightbox/litebox-1.0/images/image-1.jpg" rel="lightbox"><img class="bordered" height="140" alt="孙燕姿" src="http://www.hotajax.org/download/lightbox/litebox-1.0/images/thumb-1.jpg" width="93" /></a> </div>

提示：您可以先修改部分代码再运行,打开窗口后如没看见具体效果请刷新页面

用法：

Litebox能够向下兼容,以下是速成教程，只介绍部分应用。
将以下内容放到<head>部分

<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

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

 <script type="text/javascript" src="js/moo.fx.js"></script>

 <script type="text/javascript" src="js/litebox-1.0.js"></script>
<p> </p>

按如下要求改写链接

<a href="images/image-1.jpg" rel="lightbox[example]" title="Horses">
<img src="images/thumb-1.jpg" width="100" height="40" alt="Beautiful Horses" /></a>

example就是图片的名字

下载：

litebox-1.0.zip

注释：

你可以减小js的大小如果你去掉评论和键盘导航。

Set as favorite

Bookmark

Email This

Hits: 3146

Comments (0) add comment

add comment

Show/Hide comments

Write comment

Show/Hide comment form

< Prev		Next >

Main Menu

Login

link

Casino - Compare casinos and online casino reviews.

PCPChina 先锋网