Фонд фотографии
Фонд предоставляет отзывчивым изображения, вы можете создать миниатюрное изображение всплывающие окна пить:
Попробуйте »Миниатюры
В <img> элементы вне Добавить <a> элемент изображения в качестве ссылки якоря.
В <a> добавить теги .th класс картинка в виде миниатюр. Подведите указатель мыши к верхней части появляется светло-синяя рамка:
примеров
<Img SRC = "paris.jpg" Alt = "Париж">
</ A>
Попробуйте »
 | Отзывчивый изображение Фонд изображения в ответ на стиль по умолчанию. Мы можем изменить свой браузер для просмотра размер страницы в эффекте пример масштабирования изображения. |
|---|
Сопряжение фотографии
Мы можем .th класс добавляет .radius установить класс филе Эскиз:
примеров
<Img SRC = "paris.jpg" Alt = "Париж">
</ A>
Попробуйте »
Сжатый поп
Фонд может быть легко достигнуто поп изображения.
Чтобы создать окно оболочки в <ul> , чтобы добавить элемент .clearing-thumbs класса и data-clearing свойств. В <ul> в списке добавлять фотографии.
Примечание: всплывающие окна изображения нужно JavaScript. Поэтому необходимо инициализировать перед использованием Foundation JS.
примеров
<Li> <a HREF = "rock600x400.jpg" класс = "th"> <IMG SRC =" rock200x100.jpg "> </ а> </ li>
<Li> <a HREF = "skies600x400.jpg" класс = "th"> <IMG SRC =" skies200x100.jpg "> </ а> </ li>
<Li> <a HREF = "lights600x400.jpg" класс = "th"> <IMG SRC =" lights200x100.jpg "> </ а> </ li>
</ UL>
<! - Initialize Foundation JS ->
<Script>
$ (Документ) .ready (функция () {
$ (Документ) .foundation ();
})
</ Script>
Попробуйте »
текстовое описание изображения
Вы можете добавить data-caption атрибут для каждого изображения , чтобы установить описание этой картинки:
примеров
<Li> <a HREF = "rock600x400.jpg" класс = "th"> <IMG данных заголовок =" Прекестулен "SRC =" rock200x100.jpg "> </ а> </ li>
<Li> <a HREF = "skies600x400.jpg" класс = "th"> <IMG данных заголовок =" Восход Skies "SRC =" skies200x100.jpg "> </ а> </ li>
<Li> <a HREF = "lights600x400.jpg" класс = "th"> <IMG данных заголовок =" Северное сияние "SRC =" lights200x100.jpg "> </ а> </ li>
</ UL>
Попробуйте »
| Совет: Вы можете добавить атрибут данных заголовка в HTML - элементов, таких как данные титрами = "<h2> Прекестулен </ h2> <p> Расположенный в Норвегии </ p>" |
|---|
Показать только эскиз
Когда вам нужно достичь, эскиз отображается только тогда , когда вы можете <ul> использовать .clearing-feature классов и <li> Использование .clearing-featured-img класса.
примеров
<Li> <a HREF = "rock600x400.jpg" класс = "th"> <IMG данных заголовок =" Прекестулен "SRC =" rock200x100.jpg "> </ а> </ li>
<Li> <a HREF = "skies600x400.jpg" класс = "th"> <IMG данных заголовок =" Восход Skies "SRC =" skies200x100.jpg "> </ а> </ li>
<Li класс = "клиринг-признакам -img"> <a HREF = "lights600x400.jpg" класс = "th"> <IMG данных заголовок = "Северное сияние" SRC = "lights200x100.jpg"> </ а> < / li>
</ UL>
Попробуйте »