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
In recent years, Geographic Information Systems (GIS) have undergone rapid development in both theoretical and practical dimensions. GIS has been widely applied for modeling and decision-making support across various fields such as urban management, regional planning, and environmental remediation, establishing geographic information as a vital component of the information era. The introduction of the “Digital Earth” concept has further accelerated the advancement of GIS, which serves as its technical foundation. Concurrently, scholars have been dedicated to theoretical research in areas like spatial cognition, spatial data uncertainty, and the formalization of spatial relationships. This reflects the dual nature of GIS as both an applied technology and an academic discipline, with the two aspects forming a mutually reinforcing cycle of progress. 8.12.1. Thumbnail image ¶
Add outside the element
Element uses the picture as an anchor link. 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 ¶
Add on the element
.clearing-thumbs Class and data-clearing Property. In Add a list of pictures within.
Example ¶
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">
<li><a href="skies600x400.jpg" class="th"><img data-caption="Sunrise
Skies" src="skies200x100.jpg">
<li><a href="lights600x400.jpg" class="th"><img data-caption="Northern
Lights" src="lights200x100.jpg">
ul>
8.12.5. Show only one thumbnail ¶
For use in
.clearing-feature Class and in the 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">
<li><a href="skies600x400.jpg" class="th"><img data-caption="Sunrise
Skies" src="skies200x100.jpg">
<li class="clearing-featured-img"><a href="lights600x400.jpg"
class="th"><img data-caption="Northern Lights"
src="lights200x100.jpg">a>li>
ul>
Principles, Technologies, and Methods of Geographic Information Systems
102