Foundation は、レスポンシブイメージや、きれいなサムネイル効果と美しいライトボックスを提供します：

サムネイル

アンカーとしてイメージを使用するために、<img> 要素の周りを <a> 要素でラップします。

イメージをサムネイル形式にするため、<a> に .th クラスを追加します。これはまた、ホバーした時に、サムネイルの周りに水色のアウトラインを追加します：

例

結果：

Try it Yourself »

角丸のサムネイル

	レスポンシブイメージデフォルトで、Foundation 内のイメージはレスポンシブです。ブラウザのウィンドウサイズを変更して、上の画像がどのように小型画面に完全に調整されるかを見てください。

角丸のサムネイルにしたいときは、.radius クラスと一緒に .th を追加してくださ：

例

結果：

Try it Yourself »

Clearing Lightbox

Foundation のライトボックスは、イメージギャラリーのように、特定のイメージでページ全体を占めるモーダルです。

clearing lightbox を作るには、<ul> 要素に .clearing-thumbs クラスと data-clearing 属性を追加します。 <ul>の内部には、特定のライトボックスのイメージへのリンクをもつリスト項目を追加します。

注: Clearing Lightboxes には、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>


<script>
$(document).ready(function() {
$(document).foundation();
})
</script>

結果 - ライトボックスの効果を確認するために画像（複数可）をクリックしてください：/p>

Try it Yourself »

ライトボックスの表題テキスト

	<img> 要素は、ライトボックスを開く前に表示されているイメージです。 <a> 内のイメージが、ライトボックスに表示される実際のイメージです。時々、私たちの例のように各イメージに異なるサイズが必要になる場合があります。これは、あなた次第です。

各イメージの表題を追加するには、data-caption 属性を追加します：

例

結果 - 画像をクリックすると表題テキストを表示します：

Try it Yourself »

特定イメージから起動

	チップ: data-caption 属性内には、 data-caption="<h2>Pulpit Rock</h2><p>Located in Norway</p>" のような HTML 要素も追加することができます

複数のイメージを表示するよりも、１つのイメージからイメージギャラリーを開きたいときは、 <ul> に .clearing-feature クラスを追加し、お好みの <li> に .clearing-featured-img クラスを追加します。

例

結果：

Try it Yourself »

Foundation イメージ