Fundação Fotos
Fundação oferece uma imagens que respondem, você pode criar uma imagem em miniatura popups beber:
tente »miniaturas
Em <img> elementos fora Adicionar <a> imagem elemento como um link de âncora.
Em <a> adicionar tags .th imagem classe como miniaturas. Mova o rato para o topo de uma luz moldura azul aparece:
 | imagem Responsive Fundação de imagem em resposta ao estilo padrão. Podemos redefinir seu navegador para visualizar o tamanho da página no efeito exemplo imagem zoom. |
|---|
filé Fotos
Podemos .th classe acrescenta .radius para definir a miniatura classe filé:
Exemplos
<Img src = "paris.jpg" alt = "Paris">
</ A>
tente »
pop concisa
Fundação pode ser facilmente alcançado imagem pop.
Para criar uma janela do shell no <ul> para adicionar o elemento .clearing-thumbs classe e data-clearing propriedades. Na <ul> na lista de adicionar fotos.
Nota: Os popups imagem precisa ter o JavaScript. Por isso, precisa ser inicializado antes de usar Foundation JS.
Exemplos
<Li> <a href = "class = rock600x400.jpg" "th"> <img src =" rock200x100.jpg "> </ a> </ li>
<Li> <a href = "class = skies600x400.jpg" "th"> <img src =" skies200x100.jpg "> </ a> </ li>
<Li> <a href = "class = lights600x400.jpg" "th"> <img src =" lights200x100.jpg "> </ a> </ li>
</ Ul>
<! - Inicializar Fundação JS ->
<Script>
$ (Document) .ready (function () {
$ (Documento) .foundation ();
})
</ Script>
tente »
descrição texto da imagem
Você pode adicionar data-caption atributo para cada imagem para definir a descrição da imagem:
Exemplos
<Li> <a href = "class = rock600x400.jpg" "th"> <-caption dados img =" O púlpito Rock "src =" rock200x100.jpg "> </ a> </ li>
<Li> <a href = "class = skies600x400.jpg" "th"> <img data-caption =" Sunrise Skies "src =" skies200x100.jpg "> </ a> </ li>
<Li> <a href = "class = lights600x400.jpg" "th"> <-caption dados img =" Northern Lights "src =" lights200x100.jpg "> </ a> </ li>
</ Ul>
tente »
| Dica: Você pode adicionar atributo-caption dados em elementos HTML, tais como a captação de dados = "<h2> Pulpit Rock </ h2> <p> Localizado na Noruega </ p>" |
|---|
Mostrar apenas uma miniatura
Quando você precisa para alcançar, uma miniatura é exibida somente quando você pode <ul> usar .clearing-feature aulas e <li> uso .clearing-featured-img classe.
Exemplos
<Li> <a href = "class = rock600x400.jpg" "th"> <-caption dados img =" O púlpito Rock "src =" rock200x100.jpg "> </ a> </ li>
<Li> <a href = "class = skies600x400.jpg" "th"> <img data-caption =" Sunrise Skies "src =" skies200x100.jpg "> </ a> </ li>
<LI class = "caracterizou-clearing -img"> <a href = "lights600x400.jpg" class = "th"> <img data-caption = "Northern Lights" src = "lights200x100.jpg"> </ a> < / li>
</ Ul>
tente »