Foundation 图片

前言

  • Foundation 中图片默认是响应式的,可以创建缩略图和图片弹窗。

1、缩略图

  • <img> 元素外添加 <a> 元素将图片作为一个锚链接。

  • <a> 标签中添加 .th 类将图片设置为缩略图。鼠标移动到上面会显示一个浅蓝色外框:

  • 实例

    1
    2
    3
    <a class="th" href="https://demo.qianchia.com/media/image/demo11.png" target="_blank">
    <img src="https://demo.qianchia.com/media/image/demo11.png" alt="Paris" width="400" height="300" />
    </a>
  • 效果 🔗

2、圆角图片

  • 可以在 .th 类添加 .radius 类来设置圆角缩略图:

  • 实例

    1
    2
    3
    <a class="th radius" href="https://demo.qianchia.com/media/image/demo11.png" target="_blank">
    <img src="https://demo.qianchia.com/media/image/demo11.png" alt="Paris" width="400" height="300" />
    </a>
  • 效果 🔗

3、简洁的弹窗

  • Foundation 可以很容易实现图片弹窗。

  • 要创建一个弹窗可以在 <ul> 元素上添加 .clearing-thumbs 类及 data-clearing 属性。在 <ul> 内添加图片列表。

  • 图片弹窗需要 JavaScript。所以使用它前需要初始化 Foundation JS。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    <ul class="clearing-thumbs" data-clearing>
    <li><a href="https://demo.qianchia.com/media/image/rock600x400.jpg">
    <img src="https://demo.qianchia.com/media/image/rock200x100.jpg" width="200" height="100" />
    </a></li>

    <li><a href="https://demo.qianchia.com/media/image/skies600x400.jpg">
    <img src="https://demo.qianchia.com/media/image/skies200x100.jpg" width="200" height="100" />
    </a></li>

    <li><a href="https://demo.qianchia.com/media/image/lights600x400.jpg">
    <img src="https://demo.qianchia.com/media/image/lights200x100.jpg" width="200" height="100" />
    </a></li>
    </ul>

    <!-- 初始化 Foundation JS -->
    <script>
    $(document).ready(function () {
    $(document).foundation();
    })
    </script>
  • 效果 🔗

      

4、图片文本描述

  • 可以添加 data-caption 属性到每个图片来设置图片的描述,可以在 data-caption 属性中添加 HTML 元素,如 data-caption="<h2>Pulpit Rock</h2><p>Located in Norway</p>":

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    <ul class="clearing-thumbs" data-clearing>
    <li><a href="https://demo.qianchia.com/media/image/rock600x400.jpg">
    <img data-caption="The Pulpit Rock" src="https://demo.qianchia.com/media/image/rock200x100.jpg" width="200" height="100" />
    </a></li>

    <li><a href="https://demo.qianchia.com/media/image/skies600x400.jpg">
    <img data-caption="Sunrise Skies" src="https://demo.qianchia.com/media/image/skies200x100.jpg" width="200" height="100" />
    </a></li>

    <li><a href="https://demo.qianchia.com/media/image/lights600x400.jpg">
    <img data-caption="Northern Lights" src="https://demo.qianchia.com/media/image/lights200x100.jpg" width="200" height="100" />
    </a></li>
    </ul>

    <!-- 初始化 Foundation JS -->
    <script>
    $(document).ready(function () {
    $(document).foundation();
    })
    </script>
  • 效果 🔗

5、只显示一张缩略图

  • 当需要实现只显示一张缩略图时可以在 <ul> 中使用 .clearing-feature 类并在 <li> 中使用 .clearing-featured-img 类。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    <ul class="clearing-thumbs clearing-feature" data-clearing>
    <li><a href="https://demo.qianchia.com/media/image/rock600x400.jpg">
    <img data-caption="The Pulpit Rock" src="https://demo.qianchia.com/media/image/rock200x100.jpg" width="200" height="100" />
    </a></li>

    <li><a href="https://demo.qianchia.com/media/image/skies600x400.jpg">
    <img data-caption="Sunrise Skies" src="https://demo.qianchia.com/media/image/skies200x100.jpg" width="200" height="100" />
    </a></li>

    <li class="clearing-featured-img"><a href="https://demo.qianchia.com/media/image/lights600x400.jpg">
    <img data-caption="Northern Lights" src="https://demo.qianchia.com/media/image/lights200x100.jpg" width="200" height="100" />
    </a></li>
    </ul>

    <!-- 初始化 Foundation JS -->
    <script>
    $(document).ready(function () {
    $(document).foundation();
    })
    </script>
  • 效果 🔗

      

文章目录
  1. 1. 前言
  2. 2. 1、缩略图
  3. 3. 2、圆角图片
  4. 4. 3、简洁的弹窗
  5. 5. 4、图片文本描述
  6. 6. 5、只显示一张缩略图
隐藏目录