Всем привет! Сегодня я хотел бы рассказать о javascript — библиотеке Holder.js. Она нужна для генерации изображений — заглушек.
Практически везде, где нужно посмотреть конечный результат без заполнения страницы контентом. Наглядный пример — человек делает макет сайта. Чтобы ему посмотреть результат, надо заполнить макет текстом и изображениями. В первом случае используют текст — рыбу (например, Lorem Ipsum). Во втором случае, нам нужен генератор изображений — заглушек. Мы также можем использовать онлайн — сервисы (Placehold или Dummy Image), или, специальные javascript — библиотеки, типа Holder.js.
Переходим на страницу загрузки, нажимаем кнопку " Download Holder.js" и распаковываем файл holder.js на сайт. Теперь нам надо подключить скрипт. Для этого в коде пишем следущее:
Чтобы проверить что всё работает правильно, поставим первую «заглушку». Делается это так:
То есть, если мы хотим получить изображение шириной в 200 пикселей, а высотой в 350, пишем следующее:
Скриншот того, что получится
Кстати, размер можно указывать в процентах.
Вместе со скриптом вы получаете 6 тем: sky, vine, lava, gray, industrial и social. Чтобы их использовать, напишите её название после слеша:
А можно не использовать темы и задать цвета вручную:
Так мы получим чёрный текст на белом фоне (#FFF — цвет фона, #000 — цвет текста).
А теперь, давайте изменим текст:
На этом возможности данной библиотеки заканчиваются. Ссылка на пример.
Где это можно использовать?
Практически везде, где нужно посмотреть конечный результат без заполнения страницы контентом. Наглядный пример — человек делает макет сайта. Чтобы ему посмотреть результат, надо заполнить макет текстом и изображениями. В первом случае используют текст — рыбу (например, Lorem Ipsum). Во втором случае, нам нужен генератор изображений — заглушек. Мы также можем использовать онлайн — сервисы (Placehold или Dummy Image), или, специальные javascript — библиотеки, типа Holder.js.
Использование на странице
Переходим на страницу загрузки, нажимаем кнопку " Download Holder.js" и распаковываем файл holder.js на сайт. Теперь нам надо подключить скрипт. Для этого в коде пишем следущее:
<script src="Ссылка на файл holder.js"></script>
Чтобы проверить что всё работает правильно, поставим первую «заглушку». Делается это так:
<img src="holder.js/ШИРИНАxВЫСОТА">
То есть, если мы хотим получить изображение шириной в 200 пикселей, а высотой в 350, пишем следующее:
<img src="holder.js/200x350">
Скриншот того, что получится
Кстати, размер можно указывать в процентах.
Кастомизация заглушки
Вместе со скриптом вы получаете 6 тем: sky, vine, lava, gray, industrial и social. Чтобы их использовать, напишите её название после слеша:
<img src="holder.js/200x350/НАЗВАНИЕ ТЕМЫ">
А можно не использовать темы и задать цвета вручную:
<img src="holder.js/200x350/#FFF:#000">
Так мы получим чёрный текст на белом фоне (#FFF — цвет фона, #000 — цвет текста).
А теперь, давайте изменим текст:
<img src="holder.js/200x350/#FFF:#000/text:ВАШ ТЕКСТ">
На этом возможности данной библиотеки заканчиваются. Ссылка на пример.