파운데이션 이미지


Foundation은 축소판 및 이미지 팝업을 생성할 수 있는 반응형 이미지를 제공합니다.

Thumbnails

<img> 요소 외부에 <a><를 추가하세요. /code > 요소는 이미지를 앵커 링크로 사용합니다. <img> 元素外添加 <a> 元素将图片作为一个锚链接。

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

实例

<!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>

运行实例 »

点击 "运行实例" 按钮查看在线实例

Note响应式图片

Foundation 中图片默认是响应式的。我们可以在实例页面重置浏览器大小来查看图片缩放效果。

圆角图片

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

实例

<!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>

运行实例 »

点击 "运行实例" 按钮查看在线实例

简洁的弹窗

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

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

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

实例

<!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>

运行实例 »

点击 "运行实例" 按钮查看在线实例

图片文本描述

可以添加 data-caption

이미지를 썸네일로 설정하려면 <a> 태그에 .th 클래스를 추가하세요. 그 위로 마우스를 이동하면 연한 파란색 프레임이 표시됩니다.

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>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>

실행 중인 인스턴스»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요
Foundation의 이미지는 기본적으로 반응형입니다. 인스턴스 페이지에서 브라우저 크기를 재설정하여 이미지 크기 조정 효과를 확인할 수 있습니다.
Note반응형 이미지
🎜🎜🎜🎜🎜둥근 모서리 그림🎜🎜 .th 클래스에 .radius 클래스를 추가하여 둥근 모서리 썸네일을 설정할 수 있습니다: 🎜🎜🎜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
🎜 🎜🎜인스턴스 실행»🎜🎜"인스턴스 실행" 버튼을 클릭하면 온라인 인스턴스를 볼 수 있습니다🎜🎜🎜🎜간결한 팝업창🎜🎜재단에서는 그림 팝업창을 쉽게 구현할 수 있습니다. 🎜🎜팝업 창을 만들려면
    에 .clearing-thumbs 클래스와 data-clearing 속성을 ​​추가하세요. 요소. <ul> 내에 이미지 목록을 추가하세요. 🎜🎜🎜참고:🎜 이미지 팝업에는 JavaScript가 필요합니다. 따라서 Foundation JS를 사용하기 전에 초기화해야 합니다. 🎜🎜🎜Instance🎜🎜rrreee🎜🎜🎜인스턴스 실행»🎜🎜온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.🎜🎜🎜🎜이미지 텍스트 설명🎜🎜<코드>데이터 캡션을 추가할 수 있습니다. 각 이미지에 대한 속성 이미지 설명을 설정하려면🎜🎜🎜Instance🎜🎜rrreee🎜🎜🎜인스턴스 실행»🎜🎜온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜팁: 🎜 data-caption 속성을 사용할 수 있습니다. data-caption="<h2>Pulpit Rock</h2><p>Located in 노르웨이</p>"🎜🎜🎜🎜과 같은 HTML 요소를 추가하세요.

    하나의 썸네일만 표시

    하나의 썸네일 표시만 구현해야 하는 경우 <ul> 中使用 .clearing-feature 类并在<li> 中使用 .clearing-featured-img 클래스에서 구현할 수 있습니다.

    Instance

    rrreee

    인스턴스 실행 »

    온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요