Foundation pictures


May 04, 2021 11:00 Foundation5


Table of contents


Foundation pictures

Foundation provides responsive pictures that you can create thumbnails to drink picture bounce windows:

Foundation pictures


Try it out . . .

Thumbnails

Add the element outside the <a> element to treat the picture as an anchor link. <img>

Add a .th <a> the label to set the picture as a thumbnail. Moving the mouse over shows a light blue box:

Instance

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

Try it out . . .
Foundation pictures Responsive picture

Pictures in Foundation are responsive by default. We can reset the browser size on the instance page to see how the picture zooms.

Rounded picture

We can .th .radius class to set the fillet thumbnail:

Instance

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

Try it out . . .

Simple marble window

Foundations make it easy to implement picture e-windows.

To create a bounce window, you can <ul> the .clearing-thumbs class and data-clearing element. Add <ul> the .

Note: The picture e-window requires JavaScript. So you need to initialize Foundation JS before you can use it.

Instance

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

尝试一下 »
Foundation pictures Tip: You can add HTML elements to the data-caption property, such as data-caption.""""""

Only one thumbnail is displayed

You can use the <ul> class and .clearing-featured-img <li> class when you need to implement only one thumbnail. .clearing-feature

实例

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

尝试一下 »