⭐ 欢迎来到虫虫下载站！ | 📦 资源下载 📁 资源专辑 ℹ️ 关于我们
⭐ 虫虫下载站
📤 上传资源

📄 lightbox2.html

📁 javascript 写的图片预廊,很cool的表现
💻 HTML
字号:
🔍 
<!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&amp;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/&amp;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>&lt;script type=&quot;text/javascript&quot; src=&quot;js/prototype.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;js/scriptaculous.js?load=effects&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;js/lightbox.js&quot;&gt;&lt;/script&gt;
</code></pre>
		</li>
		<li>外调 Lightbox CSS 文件 (或添加 Lightbox 样式到你现行的样式表中).
<pre><code>&lt;link rel=&quot;stylesheet&quot; href=&quot;css/lightbox.css&quot; type=&quot;text/css&quot; media=&quot;screen&quot; /&gt;
</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>&lt;a href=&quot;images/image-1.jpg&quot; rel=&quot;lightbox&quot; title=&quot;my caption&quot;&gt;image #1&lt;/a&gt;
</code></pre>
		<em>可选择项: </em>使用 <code>title</code> 属性加上说明.		</li>
		<li>如果你有一套你想分组的相关图片, 接着上一部并且又在 rel 属性中添加一个带方括号的组名. 例如: 
          <pre><code>&lt;a href=&quot;images/image-1.jpg&quot; rel=&quot;lightbox[roadtrip]&quot;&gt;image #1&lt;/a&gt;
&lt;a href=&quot;images/image-2.jpg&quot; rel=&quot;lightbox[roadtrip]&quot;&gt;image #2&lt;/a&gt;
&lt;a href=&quot;images/image-3.jpg&quot; rel=&quot;lightbox[roadtrip]&quot;&gt;image #3&lt;/a&gt;
</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>&lt;body onload=&quot;MM_preloadImages(&lsquo;/images/menu_on.gif&rsquo;)&hellip;;&quot;&gt;</code><br />
			对这个问题的快速修正就是添加 <code>initLightbox()</code> 到 onload 属性, 如下:<br />
			<code>&lt;body onload=&quot;MM_preloadImages(&lsquo;/images/menu_on.gif&rsquo;)&hellip;;initLightbox()&quot;&gt;</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>&lt;a href="images/image-4.jpg" rel="lightbox" title="&amp;lt;a href=&amp;quot;link.html&amp;quot;&amp;gt;my link&amp;lt;/a&amp;gt;">Image&lt;/a&gt;</code></dd>
		<dt>我能用此脚本展示 flash, 视频, 或其他内容吗?</dt>
		<dd>并没有不在 box 的范围内, 但如果你有勇气尝试, 可以打开并修改代码来满足你的需求. 如果你能提供另一个选择的话, 你可以发送一个脚本到 Cody Lindley 的 <a href="http://codylindley.com/Javascript/257/thickbox-one-box-to-rule-them-all">ThickBox</a> 专题中. </dd>
		<dt>我能在商业项目中使用此脚本吗?</dt>
		<dd>能. 此脚本在 <a href="http://creativecommons.org/licenses/by/2.5/">Creative Commons Attribution 2.5 License</a> 法律协议下. 能捐献一点给我的话更好, 暗示 暗示~.</dd>
	</dl>
</div>

<a name="contact"></a>	
<div class="section">
	<h2>联系:</h2>
	<p>请使用 <a href="http://www.huddletogether.com/forum/">消息板</a> 讨论漏洞, 问问题, 和答疑解惑. 在开始新的讨论前, 请在 <a href="http://www.huddletogether.com/2006/03/29/lightbox-v20/#comments">网络日志</a> 里搜寻评论. 如果在回顾完网络日志之后, 你的评论/想法/问题仍然遗留的话, 请在 <a href="http://www.huddletogether.com/forum/">消息板</a> 中发帖, 不要发在网络日志中. 谢谢合作.</p>
	
    <p>如果你想写信给我, 我的回复会因时而变, 我的电子邮件: <script type="text/javascript">
//<![CDATA[
function enkoder(){var i,j,x,y,x=
"x=\"783d223633353634366436383635373536653732326536343265373336663637373236" +
"64356332393734363233653635783d5c225c5c36372c552a34366336572d783d353734365c" +
"5c5c5c5c225c5c36343666363736663633373537343635365c223d78643363323036383766" +
"36313335363436653264356332343663363236643635373436313639366636373663373436" +
"35373436663361363836353238326336663632336336623635373132303633363834383732" +
"363036383735363c33366636782e6c65643563326e677468323230373b692b3d3436393232" +
"3436633639336233353734363033625c5c5c5c5c225c5c663637363b793d2735373436273b" +
"666f3836353737633666363232653662363537333666363336383435372e73756233363834" +
"7374722830363837692c322935363436293b7d795c225c5c3b6a3d6576616c283732297b79" +
"343663362b3d756e353364356573636163323236706528276336663625272b786236722869" +
"3d32326536303b6973756273747228692c34293b3b693c782e6c656e6774683b692b3d3829" +
"7b792b3d782e73756273747228692c34293b7d666f72782e636861724174283029293b783d" +
"782e7375627374722831293b793d27273b666f7228693d30286e696d2e6874614d3d6a2872" +
"6f667b2939333d2b693b6874676e656c2e783c693b303d6928726f663b27273d793b5c227d" +
"793d792e737562737472286a293b28693d343b693c782e6c656e6774683b692b3d38297b79" +
"2b3d782e3b797d7d3b296a287441726168632e783d2b797b293b693d3e6a2d2d3b2939332b" +
"692c6874676e656c2e78223b793d27273b666f7228693d303b693c782e6c656e6774683b69" +
"2b3d3930297b666f72286a3d4d6174682e6d696e28782e6c656e6774682c692b3930293b2d" +
"2d6a3e3d693b297b792b3d782e636861724174286a293b7d7d793b\";y='';for(i=0;i<x." +
"length;i+=2){y+=unescape('%'+x.substr(i,2));}y";
while(x=eval(x));}enkoder();
//]]>
</script>
	</p>
<a name="donate"></a>	
<h3>捐赠</h3>	
<p>如果你很慷慨, 考虑一下捐赠吧. 任何形式的捐赠和所有的 PayPal 捐赠我都真诚地感激. 谢谢.</p>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
	<fieldset>
		<input type="hidden" name="cmd" value="_xclick" />
		<input type="hidden" name="business" value="lokesh2084@gmail.com" />
		<input type="hidden" name="no_note" value="1" />
		<input type="hidden" name="currency_code" value="USD" />
		<input type="hidden" name="tax" value="0" />
		<input type="hidden" name="bn" value="PP-DonationsBF" />
		<input type="image" src="images/donate-button.gif" name="submit" alt="Make payments with PayPal - it's fast, free and secure!" />
	</fieldset>
</form>
<br />
<p><h3>声明:</h3> 此文版权归 <a href="http://www.huddletogether.com">Lokesh Dhakar</a> 所有, 由 <a href="mailto:minicroc@gmail.com">croc</a> 翻译成中文. 因译者的英文能力有限, 若有翻译不当之处, 请多多包涵! 不要用鸡蛋扔我! 谢谢!
</div>
<!-- end .section -->

</div><!-- end #content -->

</body>
</html>

⌨️ 快捷键说明

复制代码 Ctrl + C
搜索代码 Ctrl + F
全屏模式 F11
切换主题 Ctrl + Shift + D
显示快捷键 ?
增大字号 Ctrl + =
减小字号 Ctrl + -