Foundation 圖片
Foundation 提供了響應式的圖片，可以創建縮略圖喝圖片彈窗：
嘗試一下 ?
縮略圖
在 <img> 元素外添加 <a> 元素將圖片作為一個錨鏈接。
在 <a> 標簽中添加 .th 類將圖片設置為縮略圖。 鼠標移動到上面會顯示一個淺藍色外框:
實例
<a href="paris.jpg" class="th">
<img src="paris.jpg" alt="Paris">
</a>
嘗試一下 ? | 響應式圖片
Foundation 中圖片默認是響應式的。我們可以在實例頁面重置瀏覽器大小來查看圖片縮放效果。 |
|---|
圓角圖片
我們可以在 .th 類添加 .radius 類來設置圓角縮略圖：
實例
<a href="paris.jpg" class="th radius">
<img src="paris.jpg" alt="Paris">
</a>
嘗試一下 ?
簡潔的彈窗
Foundation 可以很容易實現圖片彈窗。
要創建一個彈窗可以在 <ul> 元素上添加 .clearing-thumbs 類及 data-clearing 屬性。在 <ul> 內添加圖片列表。
注意: 圖片彈窗需要 JavaScript。所以使用它前需要初始化 Foundation JS。
實例
<ul class="clearing-thumbs" data-clearing>
<li><a href="rock600x400.jpg" class="th"><img src="rock200x100.jpg"></a></li>
<li><a href="skies600x400.jpg" class="th"><img src="skies200x100.jpg"></a></li>
<li><a href="lights600x400.jpg" class="th"><img src="lights200x100.jpg"></a></li>
</ul>
<!-- Initialize Foundation JS -->
<script>
$(document).ready(function() {
$(document).foundation();
})
</script>
嘗試一下 ?
圖片文本描述
可以添加 data-caption 屬性到每個圖片來設置圖片的描述:
實例
<ul class="clearing-thumbs" data-clearing>
<li><a href="rock600x400.jpg" class="th"><img data-caption="The Pulpit Rock" src="rock200x100.jpg"></a></li>
<li><a href="skies600x400.jpg" class="th"><img data-caption="Sunrise Skies" src="skies200x100.jpg"></a></li>
<li><a href="lights600x400.jpg" class="th"><img data-caption="Northern Lights" src="lights200x100.jpg"></a></li>
</ul>
嘗試一下 ? | 提示： 你可以在 data-caption 屬性中添加 HTML 元素，如 data-caption="<h2>Pulpit Rock</h2><p>Located in Norway</p>" |
|---|
只顯示一張縮略圖
當你需要實現只顯示一張縮略圖時你可以在 <ul> 中使用 .clearing-feature 類并在<li> 中使用 .clearing-featured-img 類。
實例
<ul class="clearing-thumbs clearing-feature" data-clearing>
<li><a href="rock600x400.jpg" class="th"><img data-caption="The Pulpit Rock" src="rock200x100.jpg"></a></li>
<li><a href="skies600x400.jpg" class="th"><img data-caption="Sunrise Skies" src="skies200x100.jpg"></a></li>
<li class="clearing-featured-img"><a href="lights600x400.jpg" class="th"><img data-caption="Northern Lights" src="lights200x100.jpg"></a></li>
</ul>
嘗試一下 ?
