Як зробити попередній перегляд зображень на javascript
Всім привіт! Іноді на сайті потрібно зробити функціонал, який дозволить збільшувати зображення при наведенні на них мишки. але в той же час це повинно працювати швидко і без залежностей. Як це зробити, ми і розглянемо в цій статті.
Для вирішення нашої задачі нам знадобиться проста бібліотека під назвою SimpleZoom. у якій багато плюсів. Ось деякі з них:
- Легко підключити на будь-який сайт
- Не додає додаткових стилів
- Бібліотека сама вибирає підходяще місце для збільшеного зображення
- Немає модальних вікон, що покращує UX
- Прекрасно працює з мобільними пристроями
- Зменшено до розміру менше 1Кб і стиснута
- немає залежностей
На даний момент це найкраще рішення, якщо вам не потрібно нічого зайвого, яке я зустрічав.
Щоб подивитися на роботу бібліотеки, перейдіть в розділ демонстрації.
Щоб встановити бібліотеку, вам потрібно її скачати. Для цього ви можете використовувати Bower:
bower install simplezoom.js
npm install --save simplezoom.js
Після того, як ви скачаєте бібліотеку, підключіть її наступним чином:
висновок
А у мене на цьому все. Дякую за увагу!
Запропонуйте цю статтю друзям:
Якщо Вам сподобався сайт, то розмістіть посилання на нього (у себе на сайті, на форумі, в контакті):
Вона виглядає ось так: