Fundación Fotos
Fundación ofrece a las imágenes sensibles, puede crear una imagen en miniatura beben ventanas emergentes:
Trate »miniaturas
En <img> elementos fuera Añadir <a> elemento de imagen como un vínculo de anclaje.
En <a> añadir etiquetas .th foto de la clase como miniaturas. Mueva el ratón a la parte superior de un marco azul aparece la luz:
 | imagen sensible Fundación de imagen en respuesta al estilo predeterminado. Podemos configurar su navegador para ver el tamaño de página en el efecto de zoom de imagen ejemplo. |
|---|
Fotos de filete
Podemos .th clase añade .radius para definir la miniatura clase de filete:
Ejemplos
<Img src = "paris.jpg" alt = "Paris">
</ A>
Trate »
pop concisa
Fundación puede lograrse fácilmente estallido de la imagen.
Para crear una ventana de shell en <ul> para agregar el elemento .clearing-thumbs clase y data-clearing propiedades. En el <ul> en la lista de agregar imágenes.
Nota: Las ventanas emergentes de imagen necesitan JavaScript. Por lo que debe ser inicializado antes de usar Fundación JS.
Ejemplos
<Li> <a href = "clase rock600x400.jpg" = "th"> <img src =" rock200x100.jpg "> </ a> </ li>
<Li> <a href = "clase skies600x400.jpg" = "th"> <img src =" skies200x100.jpg "> </ a> </ li>
<Li> <a href = "clase lights600x400.jpg" = "th"> <img src =" lights200x100.jpg "> </ a> </ li>
</ Ul>
<! - Inicializar Fundación JS ->
<Script>
$ (Document) ready (function () {
$ (Document) .foundation ();
})
</ Script>
Trate »
Descripción texto de la imagen
Puede agregar data-caption atributo a cada imagen para definir la descripción de la imagen:
Ejemplos
<Li> <a href = "clase rock600x400.jpg" = "th"> <img datos-caption =" "src =" El Pulpito rock200x100.jpg "> </ a> </ li>
<Li> <a href = "clase skies600x400.jpg" = "th"> <img datos-caption =" "src =" Sunrise cielos skies200x100.jpg "> </ a> </ li>
<Li> <a href = "clase lights600x400.jpg" = "th"> <img datos-caption =" Luces del Norte "src =" lights200x100.jpg "> </ a> </ li>
</ Ul>
Trate »
| Consejo: Puede añadir el atributo de título de datos en los elementos HTML, como los datos-caption = "<h2> Pulpito </ h2> <p> Situado en Noruega </ p>" |
|---|
Mostrar solo una imagen en miniatura
Cuando usted necesita para lograr, en una miniatura se muestra sólo cuando se puede <ul> usar .clearing-feature clases y <li> su uso .clearing-featured-img clase.
Ejemplos
<Li> <a href = "clase rock600x400.jpg" = "th"> <img datos-caption =" "src =" El Pulpito rock200x100.jpg "> </ a> </ li>
<Li> <a href = "clase skies600x400.jpg" = "th"> <img datos-caption =" "src =" Sunrise cielos skies200x100.jpg "> </ a> </ li>
<Li class = "facilitación ofrecido -img"> <a href = "lights600x400.jpg" class = "th"> <img datos-caption = "Luces del Norte" src = "lights200x100.jpg"> </ a> < / li>
</ Ul>
Trate »