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