Fundacja Zdjęcia
Fundacja zapewnia Responsive obrazy, można stworzyć miniaturę okna wyskakujące picia:
Spróbuj »Miniatury
W <img> Elementy outside Dodaj <a> obrazu jako elementu linku kotwicy.
W <a> dodawać tagi .th klasy obraz jako miniatury. Przesuń kursor myszy do górnej części pojawia jasnoniebieski ramki:
 | responsive obrazu Fundacja Obraz w odpowiedzi na domyślnym stylu. Możemy ustawić przeglądarkę, aby zobaczyć rozmiar strony w efekcie przykład zoom. |
|---|
filet Zdjęcia
Możemy .th klasy dodaje .radius ustawić miniaturę klasy Filet:
Przykłady
<Img src = "paris.jpg" alt = "Paris">
</ A>
Spróbuj »
zwięzłe pop
Fundacja można łatwo osiągnąć obrazu pop.
Aby utworzyć okno powłoki w <ul> , aby dodać element .clearing-thumbs klasy i data-clearing właściwości. W <ul> na liście dodania swojego zdjęcia.
Uwaga: wyskakujące okienka obrazu trzeba JavaScript. Więc to musi być zainicjowany przed użyciem Foundation JS.
Przykłady
<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>
<! - Inicjowanie Fundacja JS ->
<Script>
$ (Document) .ready (function () {
$ (Document) .foundation ();
})
</ Script>
Spróbuj »
Obraz opis tekst
Możesz dodać data-caption atrybut do każdego obrazu, aby ustawić opis obrazu w:
Przykłady
<Li> <a href = "rock600x400.jpg" class = "th"> <img danych caption =" Pulpit Rock "src =" rock200x100.jpg "> </ a> </ li>
<Li> <a href = "skies600x400.jpg" class = "th"> <img danych caption =" Sunrise Skies "src =" skies200x100.jpg "> </ a> </ li>
<Li> <a href = "lights600x400.jpg" class = "th"> <img danych caption =" Northern Lights "src =" lights200x100.jpg "> </ a> </ li>
</ Ul>
Spróbuj »
| Wskazówka: Można dodać atrybut danych z napisami w elementach HTML, takich jak data-caption = "<h2> Pulpit Rock </ h2> <p> W mieście Norwegii </ p>" |
|---|
Pokaż tylko miniaturki
Kiedy trzeba osiągnąć, miniatura jest wyświetlany tylko wtedy, gdy można <ul> używać .clearing-feature klas i <li> Zastosowanie .clearing-featured-img klasy.
Przykłady
<Li> <a href = "rock600x400.jpg" class = "th"> <img danych caption =" Pulpit Rock "src =" rock200x100.jpg "> </ a> </ li>
<Li> <a href = "skies600x400.jpg" class = "th"> <img danych caption =" Sunrise Skies "src =" skies200x100.jpg "> </ a> </ li>
<Li class = "Usuwanie funkcjonalny -img"> <a href = "lights600x400.jpg" class = "th"> <img danych caption = "Northern Lights" src = "lights200x100.jpg"> </ a> < / li>
</ Ul>
Spróbuj »