Foto yayasan
Yayasan menyediakan gambar responsif, Anda dapat membuat thumbnail image popup minum:
Coba »thumbnail
Dalam <img> elemen luar Tambahkan <a> elemen gambar sebagai link anchor.
Dalam <a> menambahkan tag .th gambar kelas sebagai thumbnail. Gerakkan mouse ke atas bingkai biru muda muncul:
 | image responsif Yayasan gambar dalam menanggapi gaya default. Kami dapat mengatur ulang peramban untuk melihat ukuran halaman dalam efek contoh gambar zoom. |
|---|
fillet Foto
Kita bisa .th kelas menambahkan .radius untuk mengatur Thumbnail kelas fillet:
contoh
<Img src = "paris.jpg" alt = "Paris">
</ A>
Coba »
Concise pop
Yayasan dapat dengan mudah dicapai image pop.
Untuk membuat jendela shell di <ul> untuk menambahkan elemen .clearing-thumbs kelas dan data-clearing properti. Dalam <ul> dalam daftar menambahkan gambar.
Catatan: popup image perlu JavaScript. Sehingga perlu diinisialisasi sebelum menggunakan Yayasan JS.
contoh
<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>
<! - Initialize Yayasan JS ->
<Script>
$ (Dokumen) .ready (function () {
$ (Dokumen) .foundation ();
})
</ Script>
Coba »
teks deskripsi gambar
Anda dapat menambahkan data-caption atribut untuk setiap gambar untuk mengatur deskripsi gambar ini:
contoh
<Li> <a href = "class rock600x400.jpg" = "th"> <img Data-caption =" The Pulpit 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"> <img Data-caption =" Northern Lights "src =" lights200x100.jpg "> </ a> </ li>
</ Ul>
Coba »
| Tip: Anda dapat menambahkan data atribut-caption elemen HTML, seperti data-caption = "<h2> Pulpit Rock </ h2> <p> Terletak di Norwegia </ p>" |
|---|
Tampilkan hanya thumbnail
Bila Anda perlu untuk mencapai, thumbnail akan ditampilkan hanya ketika Anda dapat <ul> menggunakan .clearing-feature kelas dan <li> digunakan .clearing-featured-img class.
contoh
<Li> <a href = "class rock600x400.jpg" = "th"> <img Data-caption =" The Pulpit 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 = "kliring fitur -img"> <a href = class "lights600x400.jpg" = "th"> <img Data-caption = "Northern Lights" src = "lights200x100.jpg"> </ a> < / li>
</ Ul>
Coba »