Foundation 圖片

Foundation 提供了響應(yīng)式的圖片，可以創(chuàng)建縮略圖喝圖片彈窗：

實(shí)例預(yù)覽 ?

縮略圖

在 <img> 元素外添加 <a> 元素將圖片作為一個(gè)錨鏈接。

在 <a> 標(biāo)簽中添加 .th 類將圖片設(shè)置為縮略圖。 鼠標(biāo)移動(dòng)到上面會(huì)顯示一個(gè)淺藍(lán)色外框:

實(shí)例

<a?href="paris.jpg"?class="th">
??<img?src="paris.jpg"?alt="Paris">
</a>

實(shí)例預(yù)覽 ?

Note響應(yīng)式圖片

Foundation 中圖片默認(rèn)是響應(yīng)式的。我們可以在實(shí)例頁(yè)面重置瀏覽器大小來(lái)查看圖片縮放效果。

圓角圖片

我們可以在 .th 類添加 .radius 類來(lái)設(shè)置圓角縮略圖：

實(shí)例

<a?href="paris.jpg"?class="th?radius">
??<img?src="paris.jpg"?alt="Paris">
</a>

實(shí)例預(yù)覽 ?

簡(jiǎn)潔的彈窗

Foundation 可以很容易實(shí)現(xiàn)圖片彈窗。

要?jiǎng)?chuàng)建一個(gè)彈窗可以在 <ul> 元素上添加 .clearing-thumbs 類及 data-clearing 屬性。在 <ul> 內(nèi)添加圖片列表。

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

實(shí)例

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

實(shí)例預(yù)覽 ?

圖片文本描述

可以添加 data-caption 屬性到每個(gè)圖片來(lái)設(shè)置圖片的描述:

實(shí)例

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

實(shí)例預(yù)覽 ?

Note提示： 你可以在 data-caption 屬性中添加 HTML 元素，如 data-caption="<h2>Pulpit Rock</h2><p>Located in Norway</p>"

只顯示一張縮略圖

當(dāng)你需要實(shí)現(xiàn)只顯示一張縮略圖時(shí)你可以在 <ul> 中使用 .clearing-feature 類并在<li> 中使用 .clearing-featured-img 類。

實(shí)例

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

實(shí)例預(yù)覽 ?