foundation images


Foundation provides responsive images, which can create thumbnails and image pop-ups:


Thumbnails

at<img> Add the <a> element outside the ; element to use the image as an anchor link.

Add the .th class in the <a> tag to set the image as a thumbnail. Move the mouse over it and a light blue frame will be displayed:

Instance

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body>

<div style="padding:20px">
  <h2>缩略图</h2>
  <p>在 <code><a></code> 标签中添加 <code>.th</code> 类将图片设置为缩略图。 鼠标移动到上面会显示一个浅蓝色外框:</p>
  <p><strong>注意:</strong>  Foundation 中图片默认是响应式的。重置窗口大小可以查看效果。</p>       
  <a href="paris.jpg" target="_blank" class="th">
    <img src="paris.jpg" alt="Paris" width="400" height="300">
  </a>
</div>

</body>
</html>

Run Instance»

Click" Run instance" button to view the online instance

Note#Responsive image
Images in Foundation are responsive by default. We can reset the browser size on the instance page to see the image scaling effect.

Rounded corner picture

We can add the

.radius class to the .th class Set the rounded thumbnail:

Instance

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body>

<div style="padding:20px">
  <h2>Thumbnail</h2>
   <p>在 <code><a></code> 标签中添加 <code>.th</code> 类将图片设置为缩略图。 鼠标移动到上面会显示一个浅蓝色外框。</p>
  <p>我们可以在 .th 类添加 .radius 类来设置圆角缩略图:</p>       
  <a href="paris.jpg" target="_blank" class="th radius">
    <img src="paris.jpg" alt="Paris" width="400" height="300">
  </a>
</div>

</body>
</html>

Run Instance»Click the "Run Instance" button to view the online instance


Simple pop-up window

Foundation can easily implement picture pop-up windows.

To create a pop-up window, add the

.clearing-thumbs class and data-clearing attribute to the <ul> element. Add a list of images within <ul>.

Note: Image pop-ups require JavaScript. So you need to initialize Foundation JS before using it.

Instance

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body>
  
<div style="padding:20px">
  <h2>简洁的弹窗</h2>
  <p>要创建一个弹窗可以在 <code> <ul></code> 元素上添加 <code>.clearing-thumbs</code> 类及 <code>data-clearing</code> 属性。在 <code><ul></code> 内添加图片列表。</p>
   <p>在新窗口打开查看效果更好,打开新窗口 <a target="_blank" href="tryfoundation_lightbox.htm">点击这里</a>。</p>
  <ul class="clearing-thumbs" data-clearing>
    <li><a href="rock600x400.jpg"><img src="rock200x100.jpg" width="200" height="100"></a></li>
    <li><a href="skies600x400.jpg"><img src="skies200x100.jpg" width="200" height="100"></a></li>
    <li><a href="lights600x400.jpg"><img src="lights200x100.jpg" width="200" height="100"></a></li>
  </ul>
</div>

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

</body>
</html>

Run Instance»Click the "Run Instance" button to view the online instance


Image text description

You can add the

data-caption attribute to each image to set the image description

Example

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body>
  
<div style="padding:20px">
  <h2>Lightbox Captions</h2>
  <p>可以添加 <code>data-caption</code> 属性到每个图片来设置图片的描述。</p>
  
  <p>在新窗口打开查看效果更好,打开新窗口 <a target="_blank" href="tryfoundation_lightbox_caption.htm">点击这里</a>。</p>
  <ul class="clearing-thumbs" data-clearing>
    <li><a href="rock600x400.jpg" class="th"><img data-caption="The Pulpit Rock" src="rock200x100.jpg" width="200" height="100"></a></li>
    <li><a href="skies600x400.jpg" class="th"><img data-caption="Sunrise Skies" src="skies200x100.jpg" width="200" height="100"></a></li>
    <li><a href="lights600x400.jpg" class="th"><img data-caption="Northern Lights" src="lights200x100.jpg" width="200" height="100"></a></li>
  </ul>
</div>

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

</body>
</html>

Run Instance»Click the "Run Instance" button to view the online instance

##Tip:

Display only one thumbnail image

When you need to display only one thumbnail image, you can use .clearing- in <ul> feature class and use the .clearing-featured-img class in <li>.

Instance

源代码:

<!DOCTYPE html>

<html>

<head>

  <title>Foundation 实例</title>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">

  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>

  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>

  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>

</head>

<body>

  

<div style="padding:20px">

  <h2>弹窗特点</h2>

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

  <p>在新窗口打开查看效果更好,打开新窗口 <a target="_blank" href="tryfoundation_lightbox_feature.htm">点击这里</a>。</p>

  <ul class="clearing-thumbs clearing-feature" data-clearing>

    <li><a href="rock600x400.jpg" class="th"><img data-caption="The Pulpit Rock" src="rock200x100.jpg" width="200" height="100"></a></li>

    <li><a href="skies600x400.jpg" class="th"><img data-caption="Sunrise Skies" src="skies200x100.jpg" width="200" height="100"></a></li>

    <li class="clearing-featured-img"><a href="lights600x400.jpg" class="th"><img data-caption="Northern Lights" src="lights200x100.jpg" width="200" height="100"></a></li>

  </ul>

</div>



<!-- 初始化 Foundation JS -->

<script>

$(document).ready(function() {

    $(document).foundation();

})

</script>


</body>

</html>

测试结果:
尝试一下 - © php.cn

Run instance »

Click the "Run instance" button to view the online instance

Note You can add HTML elements in the data-caption attribute, such as data-caption="<h2>Pulpit Rock</h2><p>Located in Norway< ;/p>"