Mootools 图片展示插件(lightbox,ImageMenu)收集集合

Mootools 是一个功能强大的 JavaScript 框架，提供了丰富的 UI 组件，其中包括图片展示插件。在本文中，我们将为大家分享两种 Mootools 图片展示插件：lightbox 和 ImageMenu，并提供完整的攻略。

1. Lightbox

Lightbox 是一款非常流行的基于 Mootools 的图片展示插件，它可以在当前页面内展示大图，并实现图片的缩放、旋转等功能。使用 Lightbox 只需要引入 lightbox.js 和 lightbox.css 文件，并在 HTML 中添加相关代码即可。以下是 Lightbox 的使用示例：

示例一

首先，在 HTML 文件中引入 lightbox.js 和 lightbox.css 文件：

<link rel="stylesheet" type="text/css" href="css/lightbox.css">
<script type="text/javascript" src="js/lightbox.js"></script>

然后，HTML 中需要展示的图片加入以下代码：

<a href="images/large-image.jpg" data-lightbox="image-1" data-title="My caption">
  <img src="images/thumb-image.jpg" alt="My image">
</a>

其中，href 属性指向需要展示的大图，data-lightbox 属性指定当前图片的组别，以便与其他图片进行切换，data-title 属性是可选的，用于显示图片的标题。最后，调用以下代码即可启用 Lightbox：

new Lightbox('[data-lightbox]');

示例二

如果需要支持图片缩放和旋转等功能，可以设置 data-options 属性。例如：

<a href="images/large-image.jpg" data-lightbox="image-2" data-title="My caption"
   data-options='{"fitImagesInViewport":false,"showImageNumberLabel":false,"wrapAround":true,"disableScrolling":true}'>
  <img src="images/thumb-image.jpg" alt="My image">
</a>

其中 data-options 属性是一个包含各种参数的 JSON 对象，用于自定义 Lightbox 插件的配置。以上示例中， fitImagesInViewport 属性设置为 false 表示不自动适应视口大小，showImageNumberLabel 属性设置为 false 表示不显示图片序号，wrapAround 属性设置为 true 表示轮播，disableScrolling 属性设置为 true 表示禁止滚动条滑动。最后，同样需要调用以下代码启用 Lightbox：

new Lightbox('[data-lightbox]');

2. ImageMenu

ImageMenu 是另一款使用 Mootools 实现的图片展示插件，它可以实现图片的缩略图切换。使用 ImageMenu 也需要引入相应的 JavaScript 和 CSS 文件，并在 HTML 中添加相关代码。以下是 ImageMenu 的使用示例：

示例一

首先，在 HTML 文件中引入 ImageMenu 的 JavaScript 和 CSS 文件：

<link rel="stylesheet" type="text/css" href="css/ImageMenu.css">
<script type="text/javascript" src="js/ImageMenu.js"></script>

然后，在 HTML 中定义 ImageMenu 所需的 HTML 组件：

<div id="menu">
  <ul>
    <li><img src="images/image1-small.jpg" /></li>
    <li><img src="images/image2-small.jpg" /></li>
    <li><img src="images/image3-small.jpg" /></li>
  </ul>
  <div id="caption"></div>
</div>
<div id="bigImage">
  <img src="images/image1.jpg" />
</div>

其中，id 为 menu 的 div 元素是缩略图展示区，id 为 bigImage 的 div 元素是大图展示区。

然后，在 JavaScript 代码中初始化 ImageMenu：

var menu = new ImageMenu('menu', 'bigImage', {
  'mode': 'horizontal',
  'topDistance': 10,
  'leftDistance': 10,
  'borderSize': 2,
  'openWidth': 220,
  'openHeight': 150,
  'overlayOpacity': 0.7,
  'smoothOpacity': true,
  'opacitySpeed': 4,
  'openOnHover': true,
  'autoHide': false
});

以上代码中，第一个参数为 menu 的 id 值，第二个参数为 bigImage 的 id 值，第三个参数是一个包含各种参数的 JavaScript 对象，用于自定义 ImageMenu 的配置。

示例二

如果需要在缩略图上显示标题和描述文字，可以将每张缩略图所在的 li 元素改为以下形式：

<li>
  <img src="images/image1-small.jpg" width="100" height="100" />
  <span class="title">Image 1</span>
  <span class="description">This is image 1</span>
</li>

并在 JavaScript 中添加如下代码：

menu.addEvent('onSelect', function(item){
  $('caption').set('html', '<h2>' + item.title + '</h2><p>' + item.description + '</p>');
});

以上代码中，onSelect 事件用于捕获当前缩略图元素，title 和 description 分别代表当前缩略图的标题和描述，$('caption') 用于显示标题和描述。

总结

本文介绍了 Mootools 的两款图片展示插件：Lightbox 和 ImageMenu，并提供了详细的使用攻略。Lightbox 可以展示大图并实现缩放、旋转等功能，ImageMenu 则是缩略图切换插件，可以展示标题和描述文字。读者可以根据自身需求选择合适的插件使用。