Foundation 图片

前言

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

1、缩略图

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

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

• 实例

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

• 效果 🔗

  

2、圆角图片

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

• 实例

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

• 效果 🔗

  

3、简洁的弹窗

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

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

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

• 实例

  <ul class="clearing-thumbs" data-clearing>
      <li><a href="https://demo.qianchia.com/media/image/demo/rock600x400.jpg">
          <img src="https://demo.qianchia.com/media/image/demo/rock200x100.jpg" width="200" height="100" />
      </a></li>
      
      <li><a href="https://demo.qianchia.com/media/image/demo/skies600x400.jpg">
          <img src="https://demo.qianchia.com/media/image/demo/skies200x100.jpg" width="200" height="100" />
      </a></li>
      
      <li><a href="https://demo.qianchia.com/media/image/demo/lights600x400.jpg">
          <img src="https://demo.qianchia.com/media/image/demo/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>":

• 实例

  <ul class="clearing-thumbs" data-clearing>
      <li><a href="https://demo.qianchia.com/media/image/demo/rock600x400.jpg">
          <img data-caption="The Pulpit Rock" src="https://demo.qianchia.com/media/image/demo/rock200x100.jpg" width="200" height="100" />
      </a></li>
      
      <li><a href="https://demo.qianchia.com/media/image/demo/skies600x400.jpg">
          <img data-caption="Sunrise Skies" src="https://demo.qianchia.com/media/image/demo/skies200x100.jpg" width="200" height="100" />
      </a></li>
      
      <li><a href="https://demo.qianchia.com/media/image/demo/lights600x400.jpg">
          <img data-caption="Northern Lights" src="https://demo.qianchia.com/media/image/demo/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 类。

• 实例

  <ul class="clearing-thumbs clearing-feature" data-clearing>
      <li><a href="https://demo.qianchia.com/media/image/demo/rock600x400.jpg">
          <img data-caption="The Pulpit Rock" src="https://demo.qianchia.com/media/image/demo/rock200x100.jpg" width="200" height="100" />
      </a></li>
      
      <li><a href="https://demo.qianchia.com/media/image/demo/skies600x400.jpg">
          <img data-caption="Sunrise Skies" src="https://demo.qianchia.com/media/image/demo/skies200x100.jpg" width="200" height="100" />
      </a></li>
      
      <li class="clearing-featured-img"><a href="https://demo.qianchia.com/media/image/demo/lights600x400.jpg">
          <img data-caption="Northern Lights" src="https://demo.qianchia.com/media/image/demo/lights200x100.jpg" width="200" height="100" />
      </a></li>
  </ul>
  
  <!-- 初始化 Foundation JS -->
  <script>
       $(document).ready(function () {
          $(document).foundation();
       })
  </script>

• 效果 🔗