<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>lytebox - 中国asp之家</title>
<link rel="stylesheet" href="css/screen.css" type="text/css" media="screen" />
<script type="text/javascript" language="javascript" src="lytebox.js"></script>
<link rel="stylesheet" href="lytebox.css" type="text/css" media="screen" />
<style type="text/css">
<!--
body { margin:0;
padding:0;
}
-->
</style>
</head>
<body>
<h1>lytebox</h1>
<div id="content">
<div class="section clearfix">
<h3>单一图片</h3>
<div class="thumbnail">
<a href="images/image-1.jpg" rel="lytebox"><img src="images/thumb-1.jpg" width="100" height="40" alt="" /></a>
</div>
<div class="thumbnail">
<a href="images/image-2.jpg" rel="lytebox" title="Optional caption."><img src="images/thumb-2.jpg" width="100" height="40" alt="" /></a>
</div>
<h3 style="clear: both;">图片集</h3>
<div class="thumbnail">
<a href="images/image-3.jpg" rel="lytebox[plants]" title="Mouseover image to move forward."><img src="images/thumb-3.jpg" width="100" height="40" alt="Plants: image 1 0f 4 thumb" /></a>
</div>
<div class="thumbnail">
<a href="images/image-4.jpg" rel="lytebox[plants]" title="Alternatively you can press the N key." ><img src="images/thumb-4.jpg" width="100" height="40" alt="Plants: image 2 0f 4 thumb" /></a>
</div>
<div class="thumbnail">
<a href="images/image-5.jpg" rel="lytebox[plants]" title="The script preloads the next image in the set as you're viewing."><img src="images/thumb-5.jpg" width="100" height="40" alt="Plants: image 3 0f 4 thumb" /></a>
</div>
<div class="thumbnail">
<a href="images/image-6.jpg" rel="lytebox[plants]" title="Press X to close"><img src="images/thumb-6.jpg" width="100" height="40" alt="Plants: image 4 0f 4 thumb" /></a>
</div>
<h3 style="clear: both;">自动播放图片集</h3>
<div class="thumbnail">
<a href="images/image-3.jpg" rel="lyteshow[vacation]" title="Mouseover image to move forward."><img src="images/thumb-3.jpg" width="100" height="40" alt="Plants: image 1 0f 4 thumb" /></a>
</div>
<div class="thumbnail">
<a href="images/image-4.jpg" rel="lyteshow[vacation]" title="Alternatively you can press the N key." ><img src="images/thumb-4.jpg" width="100" height="40" alt="Plants: image 2 0f 4 thumb" /></a>
</div>
<div class="thumbnail">
<a href="images/image-5.jpg" rel="lyteshow[vacation]" title="The script preloads the next image in the set as you're viewing."><img src="images/thumb-5.jpg" width="100" height="40" alt="Plants: image 3 0f 4 thumb" /></a>
</div>
<div class="thumbnail">
<a href="images/image-6.jpg" rel="lyteshow[vacation]" title="Press X to close"><img src="images/thumb-6.jpg" width="100" height="40" alt="Plants: image 4 0f 4 thumb" /></a>
</div>
<h3 style="clear: both;">嵌入网页</h3>
<h3 style="clear: both;"><a href="http://www.google.com" rel="lyteframe" title="Search Google"
rev="width: 400px; height: 300px; scrolling: no;">Google Search</a></h3>
<h3 style="clear: both;">嵌入网页组</h3>
<h3 style="clear: both;">
<a href="lightbox.html" rel="lyteframe[catalog]" title="Summer Catalog">lightbox</a>
<a href="slimbox.html" rel="lyteframe[catalog]" title="Winter Catalog">slimbox</a></h3>
</div><!-- end .section -->
<div class="section"></div>
<!-- end .section --><!-- end .section -->
</div>
<!-- end #content -->
</body>
</html>
lightbox实例
5星 · 超过95%的资源 需积分: 3 79 浏览量
2008-10-31
14:32:52
上传
评论
收藏 484KB RAR 举报 
lightbox六种版本集合.rar （81个子文件） 
lightbox六种版本集合 css 
lightbox.css 2KB screen.css 4KB slimbox.css 1KB
nextlabel.gif 354B moobox.css 1KB loading.gif 3KB prevlabel.gif 371B images blank.gif 43B nextlabel.gif 354B loading.gif 3KB prevlabel.gif 371B Thumbs.db 9KB closelabel.gif 979B xstyle.css 2KB closelabel.gif 979B litebox.css 2KB
slimbox.html 2KB xiao.html 2KB lytebox.js 39KB litebox.html 2KB moobox.html 2KB lytebox.html 4KB lightbox.html 2KB images 
pause_blue.png 1KB play_gold.png 1KB blank.gif 43B
image-5.jpg 41KB thumb-1.jpg 3KB prev_grey.gif 748B thumb-2.jpg 3KB image-4.jpg 39KB close_grey.png 2KB close_red.png 1KB play_red.png 1KB prev_blue.gif 748B prev_gold.gif 748B thumb-6.jpg 3KB next_green.gif 732B close_blue.png 2KB close.gif 222B pause_gold.png 1KB prev_red.gif 748B image-2.jpg 65KB prev_green.gif 748B close_gold.png 2KB nextlabel.gif 1KB next_grey.gif 731B loading.gif 3KB next_gold.gif 732B prevlabel.gif 1KB Thumbs.db 95KB play_green.png 1KB pause_green.png 1KB pause_grey.png 1KB image-1.jpg 37KB image-6.jpg 49KB play_grey.png 1KB close_green.png 1KB image-3.jpg 60KB next.gif 305B thumb-5.jpg 2KB next_red.gif 732B play_blue.png 1KB thumb-4.jpg 3KB thumb-3.jpg 3KB prev.gif 307B next_blue.gif 733B closelabel.gif 979B pause_red.png 1KB js moobox.js 7KB prototype.lite.js 3KB slimbox.js 7KB js.js 16KB moo.fx.js 3KB effects.js 31KB scriptaculous.js 2KB litebox-1.0.js 18KB mootools.v1.11.js 43KB lightbox.js 23KB prototype.js 46KB lytebox.css 6KB资源评论
weige07162012-04-26lightbox实现图片相册是个不错的选择- TrueLies2013-05-29效果还行，有待提高
