Foundation provides responsive images to create thumbnails and picture pop-up windows:
尝试一下 » In In 响应式图片 Pictures in Foundation are responsive by default. We can resize the browser on the instance page to see the image zooming effect. We can do it in Foundation can easily implement picture pop-up windows. To create a pop-up window, you can use the 注意: Picture pop-up window requires JavaScript. So you need to initialize Foundation JS before using it. Can be added 提示： You can add HTML elements to the data-caption attribute, such as data-caption= “< H2 > Pulpit Rock < / H2 > < p > Located in Norway < / p >” When you need to show only one thumbnail, you can use the 8.12.1. Thumbnail image ¶
<img>
Add outside the element
<a>
Element uses the picture as an anchor link.
<a>
Add to label
.th
Moving the mouse over it will display a light blue frame:Example ¶
<a href="paris.jpg" class="th">
<img src="paris.jpg" alt="Paris">
</a>
8.12.2. Rounded corner picture ¶
.th
Class addition
.radius
Class to set fillet thumbnails:Example ¶
<a href="paris.jpg" class="th radius">
<img src="paris.jpg" alt="Paris">
</a>
8.12.3. A simple pop-up window ¶
<ul>
Add on the element
.clearing-thumbs
Class and
data-clearing
Property. In
<ul>
Add a list of pictures within.Example ¶
<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>
8.12.4. Picture text description ¶
data-caption
Property to each picture to set the description of the picture:Example ¶
<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>
8.12.5. Show only one thumbnail ¶
<ul>
For use in
.clearing-feature
Class and in the
<li>
For use in
.clearing-featured-img
Class.Example ¶
<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>