Як зробити попередній перегляд зображень на jаvascript.
Всім привіт! Іноді на сайті потрібно зробити функціонал, який дозволить збільшувати зображення при наведенні на них мишки, але в той же час це повинно працювати швидко і без залежностей. Як це зробити, ми і розглянемо в цій статті.
опис
Для вирішення нашої задачі нам знадобиться проста бібліотека під назвою SimpleZoom, у якій багато плюсів. Ось деякі з них:
- Легко підключити на будь-який сайт
- Не додає додаткових стилів
- Бібліотека сама вибирає підходяще місце для збільшеного зображення
- Немає модальних вікон, що покращує UX
- Прекрасно працює з мобільними пристроями
- Зменшено до розміру менше 1Кб і стиснута
- немає залежностей
На даний момент це найкраще рішення, якщо вам не потрібно нічого зайвого, яке я зустрічав.
Щоб подивитися на роботу бібліотеки, перейдіть в розділ демонстрації.
установка
Щоб встановити бібліотеку, вам потрібно її скачати. Для цього ви можете використовувати Bower:
bower install simplezoom.js
або npm:
npm install --save simplezoom.js
Після того, як ви скачаєте бібліотеку, підключіть її наступним чином:
І це все!
висновок
Отже, сьогодні ми розглянули, як зробити попередній зображення на jаvascript. Якщо ви хочете дізнатися ще більше про бібліотеки і про те, як писати їх самостійно, то зверніть увагу на відеокурс jаvascript, jQuery і Ajax з Нулі до Гуру.
А у мене на цьому все. Дякую за увагу!
- Як встановити іконки завантаження на чистому css.
- Як передбачити подальші дії користувача на jаvascript.
- Як зробити 3d модель об`єкта на jаvascript.
- Як зробити область малювання на jаvascript.
- Як зробити анімовану кнопку меню на scss.
- Як зробити привабливий чекліст з перегортанням свайпамі.
- Як анімувати фавіконки на сайті.
- Як зробити поля з плаваючими мітками на jаvascript.
- Як візуалізувати графіки і зробити їх інтерактивними на jаvascript.
- Як визначити силу натискання на пристрій.
- Як відстежувати позицію мишки на jаvascript.
- Як створити кнопку поділитися.
- Як зробити відображення процесу в заголовку сторінки на jаvascript.
- Якісна галерея з підтримкою свайпов.
- Ефект плавного перегортання на jаvascript.
- Jquery lightgallery - плагін для створення галерей.
- Анімації модальних вікон на jаvascript.
- Scripty2 - jаvascript бібліотека для приголомшливих анімацій.
- Бібліотека shine.js. Робимо динамічні тіні.
- jаvascript бібліотека is.js.
- Перетворення коду з es6 в es5.