LightboxJS--很好的像册代码资源-CSDN文库

共28个文件

jpg：12个

gif：8个

js：4个

需积分: 9 27 浏览量 2009-01-03 14:35:49 上传评论收藏 379KB RAR 举报

Lightbox JS是一款经典的JavaScript库，专门用于创建优雅的图片弹出展示效果，它将图片以半透明背景下的全屏模式显示，提供了一种沉浸式的浏览体验。这个库因其简洁、高效和兼容性广而受到广大Web开发者的青睐。在本文中，我们将深入探讨Lightbox JS的核心特性、工作原理以及如何在项目中集成和自定义它。一、Lightbox JS的核心特性 1. **轻量级**: Lightbox JS 的代码体积小巧，加载速度快，不会对网站性能造成太大负担。 2. **跨浏览器兼容**：Lightbox JS 兼容多种主流浏览器，包括IE8及以上版本，Firefox，Chrome，Safari和Opera等。 3. **响应式设计**：随着移动设备的普及，Lightbox JS 支持响应式布局，能在不同屏幕尺寸的设备上提供良好的用户体验。 4. **图片预加载**：Lightbox JS 在用户点击图片前会预先加载下一张图片，确保平滑的过渡效果。 5. **键盘导航**：支持使用键盘的左右箭头进行图片的切换，提高交互性。 6. **可定制化**：允许开发者通过CSS和JavaScript进行样式和功能的调整，以适应不同的设计需求。二、Lightbox JS的工作原理当用户点击网页中的图片链接时，Lightbox JS会拦截这个点击事件，然后动态生成一个新的HTML结构，包括一个遮罩层（通常为半透明黑色背景）和一个包含图片的容器。图片会在遮罩层上方以全屏或接近全屏的方式显示，同时提供关闭按钮、图片标题和导航箭头等元素。图片的缩放、平移等动画效果是通过CSS3或JavaScript实现的，提供流畅的视觉体验。三、集成与使用 1. **下载与引入**：你需要从官方网站或GitHub仓库下载Lightbox JS的最新版本，然后将js和css文件引入到你的HTML文档中。 2. **HTML 结构**：在HTML中，为每张需要开启Lightbox效果的图片添加特定的类名，例如`rel="lightbox"`。 3. **初始化**：在页面加载完成后，通过JavaScript调用`lightbox.init()`来初始化Lightbox JS。四、自定义与扩展 1. **CSS 自定义**：通过修改提供的CSS文件，可以调整Lightbox的外观，如颜色、大小、边距等。 2. **JavaScript 配置**：Lightbox JS 提供了一些配置选项，如`changeOpacity`和`overlayOpacity`，可以根据需要调整这些参数。 3. **插件与API**：虽然Lightbox JS本身功能相对简单，但开发者可以通过扩展它的API或与其他库结合使用，实现更多功能，如视频播放、轮播等。五、示例代码下面是一个简单的HTML结构示例，展示了如何将Lightbox JS应用到图片上： ```html <!DOCTYPE html> <html lang="zh"> <head> <link rel="stylesheet" href="path/to/lightbox.css"> </head> <body> <a href="path/to/large-image.jpg" data-lightbox="example-set" data-title="图片标题"> <img src="path/to/thumbnail.jpg" alt="图片描述"> </a> <script src="path/to/jquery.js"></script> <script src="path/to/lightbox.js"></script> <script> $(document).ready(function() { lightbox.init(); }); </script> </body> </html> ``` 通过以上介绍，你应该对Lightbox JS有了更深入的理解，它不仅是一个实用的图片弹出展示工具，也是Web开发中一个灵活且强大的组件，能够帮助你轻松创建出美观的图片画廊效果。在实际项目中，你可以根据需要进行适当的调整和扩展，使其更好地融入你的网站设计。

资源推荐

资源详情

资源评论

收起资源包目录

.rar （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

effects.js 31KB

scriptaculous.js 2KB

lightbox.js 20KB

prototype.js 46KB

lightbox2.html 11KB

<!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> <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> <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> <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>  <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> <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>并没有

评论收藏

内容反馈