一、缩略图（Thumbnails）
在 <img> 元素外包裹 <a> 标签，并为 <a> 添加 .th 类，即可将图片设置为缩略图。鼠标悬停时会显示浅蓝色外框。
<ul class="clearing-thumbs" data-clearing>
<li>
<a href="http://img4.imgtn.bdimg.com/it/u=1783748897,2435976635&fm=26&gp=0.jpg" class="th">
<img src="http://img4.imgtn.bdimg.com/it/u=1783748897,2435976635&fm=26&gp=0.jpg">
</a>
</li>
<li>
<a href="http://img5.imgtn.bdimg.com/it/u=1490181267,4236288114&fm=26&gp=0.jpg" class="th">
<img src="http://img5.imgtn.bdimg.com/it/u=1490181267,4236288114&fm=26&gp=0.jpg">
</a>
</li>
<li>
<a href="http://img1.imgtn.bdimg.com/it/u=3666601293,3039364040&fm=26&gp=0.jpg" class="th">
<img src="http://img1.imgtn.bdimg.com/it/u=3666601293,3039364040&fm=26&gp=0.jpg">
</a>
</li>
</ul>Code language: HTML, XML (xml)二、圆角缩略图
在 .th 类基础上添加 .radius 类，即可为缩略图添加圆角效果：
<a href="http://img4.imgtn.bdimg.com/it/u=1783748897,2435976635&fm=26&gp=0.jpg" class="th radius">
<img src="http://img4.imgtn.bdimg.com/it/u=1783748897,2435976635&fm=26&gp=0.jpg">
</a>Code language: JavaScript (javascript)三、图片弹窗（Clearing Lightbox）
Foundation 的清除灯箱（Clearing）功能允许点击缩略图后弹出大图查看，并支持左右切换。
3.1 基础弹窗
使用 .clearing-thumbs 类配合 data-clearing 属性即可启用灯箱功能：
<ul class="clearing-thumbs" data-clearing>
<li>
<a href="http://img4.imgtn.bdimg.com/it/u=1783748897,2435976635&fm=26&gp=0.jpg" class="th">
<img src="http://img4.imgtn.bdimg.com/it/u=1783748897,2435976635&fm=26&gp=0.jpg">
</a>
</li>
<li>
<a href="http://img5.imgtn.bdimg.com/it/u=1490181267,4236288114&fm=26&gp=0.jpg" class="th">
<img src="http://img5.imgtn.bdimg.com/it/u=1490181267,4236288114&fm=26&gp=0.jpg">
</a>
</li>
<li>
<a href="http://img1.imgtn.bdimg.com/it/u=3666601293,3039364040&fm=26&gp=0.jpg" class="th">
<img src="http://img1.imgtn.bdimg.com/it/u=3666601293,3039364040&fm=26&gp=0.jpg">
</a>
</li>
</ul>Code language: HTML, XML (xml)点击缩略图后，图片会以灯箱形式弹出，可通过左右箭头切换图片。
3.2 带图片描述
为 <img> 添加 data-caption 属性，弹窗时会在图片下方显示描述文字：
<ul class="clearing-thumbs" data-clearing>
<li>
<a href="http://img4.imgtn.bdimg.com/it/u=1783748897,2435976635&fm=26&gp=0.jpg" class="th radius">
<img src="http://img4.imgtn.bdimg.com/it/u=1783748897,2435976635&fm=26&gp=0.jpg" width="200" data-caption="划船">
</a>
</li>
<li>
<a href="http://img5.imgtn.bdimg.com/it/u=1490181267,4236288114&fm=26&gp=0.jpg" class="th radius">
<img src="http://img5.imgtn.bdimg.com/it/u=1490181267,4236288114&fm=26&gp=0.jpg" width="200" data-caption="小河">
</a>
</li>
<li>
<a href="http://img1.imgtn.bdimg.com/it/u=3666601293,3039364040&fm=26&gp=0.jpg" class="th radius">
<img src="http://img1.imgtn.bdimg.com/it/u=3666601293,3039364040&fm=26&gp=0.jpg" width="200" data-caption="山林">
</a>
</li>
</ul>Code language: HTML, XML (xml)弹窗后，图片下方会显示对应的描述文字（如”划船”、”小河”、”山林”），并支持左右切换浏览。
四、完整可运行示例
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Foundation 图片组件示例</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="foundation-5.5.3/css/foundation.css" rel="stylesheet" />
<script src="foundation-5.5.3/js/vendor/jquery.js"></script>
<script src="foundation-5.5.3/js/foundation.min.js"></script>
<script src="foundation-5.5.3/js/vendor/modernizr.js"></script>
<script>
$(document).ready(function () {
$(document).foundation();
})
</script>
<style>
ul.clearing-thumbs li {
margin-bottom: 15px;
}
</style>
</head>
<body>
<div class="row">
<div class="medium-12 columns">
<h3>基础缩略图</h3>
<ul class="clearing-thumbs" data-clearing>
<li>
<a href="http://img4.imgtn.bdimg.com/it/u=1783748897,2435976635&fm=26&gp=0.jpg" class="th">
<img src="http://img4.imgtn.bdimg.com/it/u=1783748897,2435976635&fm=26&gp=0.jpg" width="200">
</a>
</li>
<li>
<a href="http://img5.imgtn.bdimg.com/it/u=1490181267,4236288114&fm=26&gp=0.jpg" class="th">
<img src="http://img5.imgtn.bdimg.com/it/u=1490181267,4236288114&fm=26&gp=0.jpg" width="200">
</a>
</li>
<li>
<a href="http://img1.imgtn.bdimg.com/it/u=3666601293,3039364040&fm=26&gp=0.jpg" class="th">
<img src="http://img1.imgtn.bdimg.com/it/u=3666601293,3039364040&fm=26&gp=0.jpg" width="200">
</a>
</li>
</ul>
<hr />
<h3>圆角缩略图</h3>
<a href="http://img4.imgtn.bdimg.com/it/u=1783748897,2435976635&fm=26&gp=0.jpg" class="th radius">
<img src="http://img4.imgtn.bdimg.com/it/u=1783748897,2435976635&fm=26&gp=0.jpg" width="200">
</a>
<hr />
<h3>图片弹窗（带描述）</h3>
<ul class="clearing-thumbs" data-clearing>
<li>
<a href="http://img4.imgtn.bdimg.com/it/u=1783748897,2435976635&fm=26&gp=0.jpg" class="th radius">
<img src="http://img4.imgtn.bdimg.com/it/u=1783748897,2435976635&fm=26&gp=0.jpg" width="200" data-caption="划船">
</a>
</li>
<li>
<a href="http://img5.imgtn.bdimg.com/it/u=1490181267,4236288114&fm=26&gp=0.jpg" class="th radius">
<img src="http://img5.imgtn.bdimg.com/it/u=1490181267,4236288114&fm=26&gp=0.jpg" width="200" data-caption="小河">
</a>
</li>
<li>
<a href="http://img1.imgtn.bdimg.com/it/u=3666601293,3039364040&fm=26&gp=0.jpg" class="th radius">
<img src="http://img1.imgtn.bdimg.com/it/u=3666601293,3039364040&fm=26&gp=0.jpg" width="200" data-caption="山林">
</a>
</li>
</ul>
</div>
</div>
</body>
</html>Code language: HTML, XML (xml)五、使用要点小结
| 功能 | 实现方式 |
|---|---|
| 缩略图 | <a class="th"> 包裹 <img> |
| 圆角缩略图 | .th.radius |
| 图片弹窗（灯箱） | <ul class="clearing-thumbs" data-clearing> 包裹缩略图 |
| 左右切换 | 弹窗后自动支持，依赖 data-clearing |
| 图片描述 | <img> 添加 data-caption="描述文字" |
| 初始化 | 需调用 $(document).foundation() |
Previous: Foundation 面板（Panel）
Next: 下拉菜单（Dropdown