Foundation Imágenes

Foundation proporciona imágenes responsivas, que pueden crear miniaturas y ventanas emergentes de imágenes:

Pruébalo »

Miniatura

En<img>Agregar fuera del elemento<a>El elemento utiliza la imagen como un enlace ancla.

En<a>Agregar en la etiqueta.thLa clase establece la imagen como miniatura. Al pasar el ratón por encima se mostrará un borde azul claro:

Ejemplo

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

Pruébalo »
Note Imágenes responsivas

En Foundation, las imágenes son responsivas por defecto. Podemos redimensionar el navegador en la página de ejemplo para ver el efecto de escalado de las imágenes.

Imágenes redondeadas

Podemos.thagregar a la clase.radiusclase para configurar la miniatura redondeada:

Ejemplo

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

Pruébalo »

Ventana emergente sencilla

Foundation puede implementar fácilmente ventanas emergentes de imágenes.

Para crear una ventana emergente, puedes <ul>agregar en el elemento.clearing-thumbsla clase ydata-clearingatributo. En<ul>agregar la lista de imágenes dentro.

Nota:Las ventanas emergentes de imágenes requieren JavaScript. Por lo tanto, antes de usarlas, debe inicializar Foundation JS.

Ejemplo

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

Pruébalo »

Descripción de texto de la imagen

Puede agregardata-captionel atributo a cada imagen para configurar la descripción de la imagen:

Ejemplo

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

Pruébalo »
Note Consejo:Puede agregar elementos HTML en el atributo data-caption, como data-caption="<h2>Pulpit Rock</h2><p>Located in Norway</p>"

Mostrar solo una miniatura

Cuando necesite mostrar solo una miniatura, puede <ul>usar en.clearing-featurela clase y en<li>usar en.clearing-featured-imgla clase.

Ejemplo

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

Pruébalo »
Otras extensiones