Как сделать предпросмотр изображений на javascript.
Всем привет! Иногда на сайте нужно сделать функционал, который позволит увеличивать изображения при наведении на них мышки, но в то же время это должно работать быстро и без зависимостей. Как это сделать, мы и рассмотрим в этой статье.
Описание
Для решения нашей задачи нам понадобится простая библиотека под названием SimpleZoom, у которой много плюсов. Вот некоторые из них:
- Легко подключить на любой сайт
- Не добавляет дополнительных стилей
- Библиотека сама выбирает подходящее место для увеличенного изображения
- Нет модальных окон, что улучшает UX
- Прекрасно работает с мобильными устройствами
- Уменьшена до размера менее 1Кб и сжата
- Нет зависимостей
На данный момент это лучшее решение, если вам не нужно ничего лишнего, которое я встречал.
Чтобы посмотреть на работу библиотеки, перейдите в раздел демонстрации.
Установка
Чтобы установить библиотеку, вам нужно ее скачать. Для этого вы можете использовать Bower:
bower install simplezoom.js
Или npm:
npm install --save simplezoom.js
После того, как вы скачаете библиотеку, подключите ее следующим образом:
<script src="simplezoom.js"></script>
И это все!
Заключение
Итак, сегодня мы рассмотрели, как сделать предпросмотр изображения на javascript. Если вы хотите узнать еще больше про библиотеки и про то, как писать их самостоятельно, то обратите внимание на видеокурс JavaScript, jQuery и Ajax с Нуля до Гуру.
А у меня на этом все. Спасибо за внимание!
-
Создано 10.06.2016 22:33:42
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.