Fondation Photos
Fondation offre une des images sensibles, vous pouvez créer une image miniature popups boire:
Essayez »Miniatures
Dans <img> éléments à l' extérieur Ajouter <a> image de l' élément comme un lien d'ancrage.
Dans <a> ajouter des tags .th photo de classe sous forme de vignettes. Déplacez la souris vers le haut d'un cadre bleu clair apparaît:
 | Image Responsive Image Foundation en réponse au style par défaut. Nous pouvons réinitialiser votre navigateur pour afficher la taille de la page dans l'effet par exemple l'image de zoom. |
|---|
Photos fillet
Nous pouvons .th classe ajoute .radius pour définir la miniature de classe de congé:
Exemples
<Img src = "paris.jpg" alt = "Paris">
</ A>
Essayez »
pop Concise
Fondation peut être facilement atteint image pop.
Pour créer une fenêtre de shell <ul> pour ajouter l'élément .clearing-thumbs classe et data-clearing de data-clearing des propriétés. Dans le <ul> dans la liste des ajouter des images.
Remarque: Les popups d'image doivent JavaScript. il doit donc être initialisé avant d'utiliser la Fondation JS.
Exemples
<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>
<! - Initialisation Fondation JS ->
<Script>
$ (Document) .ready (function () {
$ (Document) .foundation ();
})
</ Script>
Essayez »
Image description textuelle
Vous pouvez ajouter des data-caption attribut à chaque image pour définir la description de l'image:
Exemples
<Li> <a href = "class = rock600x400.jpg" "th"> <img data-caption =" "src =" Le Pulpit Rock rock200x100.jpg "> </ a> </ li>
<Li> <a href = "class = skies600x400.jpg" "th"> <img data-caption =" "src =" Sunrise Skies skies200x100.jpg "> </ a> </ li>
<Li> <a href = "class = lights600x400.jpg" "th"> <img data-caption =" Northern Lights "src =" lights200x100.jpg "> </ a> </ li>
</ Ul>
Essayez »
| Astuce: Vous pouvez ajouter l' attribut data-légende dans les éléments HTML, tels que les données-caption = "<h2> Pulpit Rock </ h2> <p> Situé en Norvège </ p>" |
|---|
Afficher seulement une vignette
Lorsque vous avez besoin pour atteindre, une vignette est affichée uniquement lorsque vous pouvez <ul> utiliser .clearing-feature cours et <li> utilisation .clearing-featured-img classe.
Exemples
<Li> <a href = "class = rock600x400.jpg" "th"> <img data-caption =" "src =" Le Pulpit Rock rock200x100.jpg "> </ a> </ li>
<Li> <a href = "class = skies600x400.jpg" "th"> <img data-caption =" "src =" Sunrise Skies skies200x100.jpg "> </ a> </ li>
<Li class = "clearing-vedette -img"> <a href = "lights600x400.jpg" class = "th"> <img data-caption = "Northern Lights" src = "lights200x100.jpg"> </ a> < / li>
</ Ul>
Essayez »