Foundation Fotos
Stiftung bietet eine ansprechende Bilder, können Sie ein Miniaturbild Popups trinken zu erstellen:
Versuchen »thumbnails
In <img> Elemente außerhalb hinzufügen <a> Element Bild als Anker - Link.
In <a> Stichworte hinzufügen .th Klasse Bild als Thumbnails. Bewegen Sie die Maus an die Spitze eines hellblauen Rahmen erscheint:
Beispiele
<Img src = "paris.jpg" alt = "Paris">
</ A>
Versuchen »
 | Responsive Bild Image Foundation in Reaktion auf den Standardstil. Wir können Ihren Browser so einstellen, die Seitengröße im Beispielbild Zoom-Effekt zu sehen. |
|---|
Fillet Fotos
Wir können .th Klasse fügt .radius das Filet Klasse Thumbnail einzustellen:
Beispiele
<Img src = "paris.jpg" alt = "Paris">
</ A>
Versuchen »
Concise pop
Stiftung kann leicht Bild Pop erreicht werden.
Um ein Shell - Fenster in erstellen <ul> , um das Element hinzuzufügen .clearing-thumbs - Klasse und data-clearing - Eigenschaften. In der <ul> in der Liste der Bilder hinzufügen.
Hinweis: Das Bild Popups JavaScript benötigen. So muss es vor der Verwendung Foundation JS initialisiert werden.
Beispiele
<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>
<! - Initialisieren Foundation JS ->
<Script>
$ (Dokument) .ready (function () {
$ (Dokument) .foundation ();
})
</ Script>
Versuchen »
Bildtext Beschreibung
Sie können hinzufügen , data-caption auf jedem Bild Attribut der Beschreibung des Bild zu setzen:
Beispiele
<Li> <a href = "rock600x400.jpg" class = "th"> <img Daten caption =" Preikestolen "src =" rock200x100.jpg "> </ a> </ li>
<Li> <a href = "skies600x400.jpg" class = "th"> <img Daten caption =" Sunrise Skies "src =" skies200x100.jpg "> </ a> </ li>
<Li> <a href = "lights600x400.jpg" class = "th"> <img Daten caption =" Northern Lights "src =" lights200x100.jpg "> </ a> </ li>
</ Ul>
Versuchen »
| Tipp: Sie können in HTML - Elemente, wie zum Beispiel Daten caption = "<h2> Daten-caption Attribut hinzufügen Preikestolen </ h2> <p> In Norwegen </ p>" |
|---|
Nur ein Thumbnail
Wenn Sie erreichen müssen, wird eine Miniaturansicht nur angezeigt , wenn Sie <ul> verwenden .clearing-feature - Klassen und <li> Verwendung .clearing-featured-img - Klasse.
Beispiele
<Li> <a href = "rock600x400.jpg" class = "th"> <img Daten caption =" Preikestolen "src =" rock200x100.jpg "> </ a> </ li>
<Li> <a href = "skies600x400.jpg" class = "th"> <img Daten caption =" Sunrise Skies "src =" skies200x100.jpg "> </ a> </ li>
<Li class = "Clearing funktions -img"> <a href = "lights600x400.jpg" class = "th"> <img Daten caption = "Northern Lights" src = "lights200x100.jpg"> </ a> < / li>
</ Ul>
Versuchen »