Лучшее руководство по Фонд фотографии в 2024 году. В этом руководстве вы можете изучить Миниатюры,Сопряжение фотографии,Сжатый поп,текстовое описание изображения,Показать только эскиз,
Фонд фотографии
Фонд предоставляет отзывчивым изображения, вы можете создать миниатюрное изображение всплывающие окна пить:
Попробуйте »Миниатюры
В <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>
Попробуйте »