<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>Lightbox JS v2.0</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<meta http-equiv="content-language" content="en" />
<meta name="description" lang="en" content="Lightbox JS v2.0 is a simple, unobtrusive script used to overlay images on the current page. It's a snap to setup and works on all modern browsers." />
<meta name="keywords" content="lightbox, lightbox2, lightbox v2.0, lightbox js, lokesh, dhakar" />
<link rel="shortcut icon" type="image/ico" href="/images/favicon.gif" />
<link rel="stylesheet" href="css/screen.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js?load=effects" type="text/javascript"></script>
<script src="js/lightbox.js" type="text/javascript"></script>
</head>
<body>
<div id="topborder"></div>
<div id="sidebar">
<h1><a href="http://www.huddletogether.com/projects/lightbox2/">Lightbox JS <em>v2.0</em></a></h1>
<p><a href="http://www.huddletogether.com">by Lokesh Dhakar</a> 译: <a href="mailto:minicroc@gmail.com">croc</a></p>
<p><a href="http://www.huddletogether.com/projects/lightbox2/">点此查看原文</a></p>
<ul id="nav">
<li><a href="#overview">概要</a></li>
<li><a href="#example">例子</a></li>
<li><a href="#how">如何使用</a></li>
<li><a href="#download">下载</a></li>
<li><a href="#support">支持</a></li>
<li><a href="#contact">联系</a></li>
</ul>
<!-- <div>
<a href="http://digg.com/submit?phase=2&url=http://www.huddletogether.com/projects/lightbox2/"><img src="/images/digg.gif" width="16" height="16" alt="Digg icon" /></a>
<a href="http://del.icio.us/post?url=http://www.huddletogether.com/projects/lightbox2/&title=Lightbox%20JS%20v2.0"><img src="/images/delicious.gif" width="16" height="16" alt="Delicious icon" /></a>
</div>-->
</div>
<div id="content">
<a name="overview"></a>
<div class="section first">
<h2>概要</h2>
<p class="lead">Lightbox JS 是一个简单而又谦恭的用来把图片覆盖在当前页面上的脚本. 它能被快速安装并且运作于所有流行的浏览器.</p>
<h3>最新更新 Version 2.0</h3>
<ul>
<li><strong>图片集:</strong> 分组相关的图片并且能轻松的导航它们</li>
<li><strong>视觉特效</strong>: 奇特的自适应调整</li>
<li><strong>向后兼容</strong>: yes!</li>
</ul>
</div><!-- end .section -->
<a name="example"></a>
<div class="section clearfix">
<h2>例子</h2>
<h3>单一图片</h3>
<div class="thumbnail">
<a href="images/image-1.jpg" rel="lightbox"><img src="images/thumb-1.jpg" width="100" height="40" alt="" /></a>
</div>
<div class="thumbnail">
<a href="images/image-2.jpg" rel="lightbox" 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="lightbox[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="lightbox[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="lightbox[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="lightbox[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>
</div><!-- end .section -->
<a name="how"></a>
<div class="section">
<h2>如何使用:</h2>
<h3>步骤 1 - 安装 </h3>
<ol>
<li>Lightbox v2.0 使用 Prototype 框架和 Scriptaculous 效果库. 你将需要外调这三个 Javascript 文件在你的 header.
<pre><code><script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
</code></pre>
</li>
<li>外调 Lightbox CSS 文件 (或添加 Lightbox 样式到你现行的样式表中).
<pre><code><link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
</code></pre>
</li>
<li>检查 CSS 并确定调用的 <code>prev.gif</code> 和 <code>next.gif</code> 文件在正确的位置. 同样要确定调用的 <code>loading.gif</code> 和 <code>close.gif</code> 文件及 <code>lightbox.js</code> 文件在正确的位置.</li>
</ol>
<h3>步骤 2 - 激活</h3>
<ol>
<li>添加 <code>rel="lightbox"</code> 属性到任何一个链接标签去激活lightbox. 例如:
<pre><code><a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>
</code></pre>
<em>可选择项: </em>使用 <code>title</code> 属性加上说明. </li>
<li>如果你有一套你想分组的相关图片, 接着上一部并且又在 rel 属性中添加一个带方括号的组名. 例如:
<pre><code><a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>
<a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a>
<a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>
</code></pre>
没有限定每个页面的图片组数量和每个图片组图片的数量. 疯了！</li>
</ol>
</div>
<!-- end .section -->
<a name="download"></a>
<div class="section">
<h2>下载:</h2>
<ul class="download">
<li><a href="lightbox2.02.zip"><img src="images/download-icon.gif" width="22" height="22" alt="download Lightbox JS" /> <strong>Lightbox JS <em>v2.02</em></strong></a></li>
</ul>
<h3>修改日志</h3>
<ul>
<li><strong>v2.02</strong> - 修正了由多行说明导致的布局问题. 添加了用键盘来导航.</li>
<li><strong>v2.01</strong> - 修正了在IE6中的居中问题(任何的 DOCTYPE). 使自适应调整变得更流畅.</li>
</ul>
</div><!-- end .section -->
<a name="support"></a>
<div class="section">
<h2>支持:</h2>
<dl>
<dt>完全不工作. 图片在新窗口中打开. 出什么问题了?</dt>
<dd>这一般是由 JS 脚本的冲突导致的. 检查 body 标签并寻找 onload 属性. 例如:<br />
<code><body onload="MM_preloadImages(‘/images/menu_on.gif’)…;"></code><br />
对这个问题的快速修正就是添加 <code>initLightbox()</code> 到 onload 属性, 如下:<br />
<code><body onload="MM_preloadImages(‘/images/menu_on.gif’)…;initLightbox()"></code><br /></dd>
<dt>如果我在页面加载完之前点击图片, 它不工作.</dt>
<dd>脚本只有在页面完全加载完毕才能激活.</dd>
<dt>Flash 元素通过叠加出现.</dt>
<dd>参考 netasceta 的 <a href="http://www.huddletogether.com/2006/01/10/lightbox-js-update/#comment-924">评论</a>.</dd>
<dt>有图像地图的话脚本不工作.</dt>
<dd>参考 Jason Buechler 的 <a href="http://www.huddletogether.com/2006/01/10/lightbox-js-update/#comment-756">评论</a>.</dd>
<dt>背影不延伸并覆盖整个浏览器的窗口.</dt>
<dd>从 body 标签中删除默认的 margin 和 padding. 添加 <code>body{ margin: 0; padding: 0; }</code> 到你的样式表.</dd>
<dt>我能在说明中插入链接吗?</dt>
<dd>能, 但是你必须转换引号, 大于号和小于号到html的相等实体. 例如:<br />
<code><a href="images/image-4.jpg" rel="lightbox" title="&lt;a href=&quot;link.html&quot;&gt;my link&lt;/a&gt;">Image</a></code></dd>
<dt>我能用此脚本展示 flash, 视频, 或其他内容吗?</dt>
<dd>并没有
jquery 弹出层+屏蔽背景页面的图片显示功能
4星 · 超过85%的资源 需积分: 0 79 浏览量
2008-11-06
13:31:43
上传
评论
收藏 379KB ZIP 举报 
lightbox2.02.zip （28个子文件） 
css 
lightbox.css 2KB screen.css 4KB images 
blank.gif 43B
image-5.jpg 41KB thumb-1.jpg 3KB thumb-2.jpg 3KB image-4.jpg 39KB thumb-6.jpg 3KB image-2.jpg 65KB nextlabel.gif 354B loading.gif 3KB prevlabel.gif 371B Thumbs.db 54KB image-1.jpg 37KB image-6.jpg 49KB donate-button.gif 723B image-3.jpg 60KB bullet.gif 49B thumb-5.jpg 2KB thumb-4.jpg 3KB thumb-3.jpg 3KB closelabel.gif 979B download-icon.gif 1KB js effects.js 31KB scriptaculous.js 2KB lightbox.js 20KB prototype.js 46KB
lightbox2.html 11KB资源评论
liliangjava2015-03-05相当不错的东西 效果很绚丽
GW7862288362012-12-17相当不错的东西 效果很绚丽
