Foundation pictures
May 04, 2021 Foundation5
Table of contents
Foundation pictures
Foundation provides responsive pictures that you can create thumbnails to drink picture bounce windows:
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
< img src= "paris.jpg" alt= "Paris" >
< /a >
Try it out . . .
|
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
< 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
< 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
属性到每个图片来设置图片的描述:
实例
< 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 >
尝试一下 »
|
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
实例
< 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 >
尝试一下 »