inuasparwil.ru

Як зробити попередній перегляд зображень на jаvascript.

Всім привіт! Іноді на сайті потрібно зробити функціонал, який дозволить збільшувати зображення при наведенні на них мишки, але в той же час це повинно працювати швидко і без залежностей. Як це зробити, ми і розглянемо в цій статті.

опис

Для вирішення нашої задачі нам знадобиться проста бібліотека під назвою SimpleZoom, у якій багато плюсів. Ось деякі з них:

  • Легко підключити на будь-який сайт
  • Не додає додаткових стилів
  • Бібліотека сама вибирає підходяще місце для збільшеного зображення
  • Немає модальних вікон, що покращує UX
  • Прекрасно працює з мобільними пристроями
  • Зменшено до розміру менше 1Кб і стиснута
  • немає залежностей

На даний момент це найкраще рішення, якщо вам не потрібно нічого зайвого, яке я зустрічав.




Щоб подивитися на роботу бібліотеки, перейдіть в розділ демонстрації.

установка

Щоб встановити бібліотеку, вам потрібно її скачати. Для цього ви можете використовувати Bower:

bower install simplezoom.js


або npm:

npm install --save simplezoom.js

Після того, як ви скачаєте бібліотеку, підключіть її наступним чином:

І це все!

висновок

Отже, сьогодні ми розглянули, як зробити попередній зображення на jаvascript. Якщо ви хочете дізнатися ще більше про бібліотеки і про те, як писати їх самостійно, то зверніть увагу на відеокурс jаvascript, jQuery і Ajax з Нулі до Гуру.

А у мене на цьому все. Дякую за увагу!

Поділися в соціальних мережах:

Схожі
Як зробити поля з плаваючими мітками на jаvascript.Як зробити поля з плаваючими мітками на jаvascript.
Красиві модальні вікна на jаvascript.Красиві модальні вікна на jаvascript.
Як анімувати фавіконки на сайті.Як анімувати фавіконки на сайті.
Scripty2 - jаvascript бібліотека для приголомшливих анімацій.Scripty2 - jаvascript бібліотека для приголомшливих анімацій.
Якісна галерея з підтримкою свайпов.Якісна галерея з підтримкою свайпов.
Як встановити іконки завантаження на чистому css.Як встановити іконки завантаження на чистому css.
Анімації модальних вікон на jаvascript.Анімації модальних вікон на jаvascript.
Як передбачити подальші дії користувача на jаvascript.Як передбачити подальші дії користувача на jаvascript.
Ефект плавного перегортання на jаvascript.Ефект плавного перегортання на jаvascript.
Як визначити силу натискання на пристрій.Як визначити силу натискання на пристрій.
» » Як зробити попередній перегляд зображень на jаvascript.