Напевно на багатьох сайтах ви бачили такий функціонал як масштабування зображень, особливо це люблять робити в інтернет магазинах. Це дозволяє користувачеві максимально детально розглянути цікавить його товар. У цій статті ми розглянемо один з jQuery плагінів, який вирішує цю задачу.
Зовсім недавно мені довелося користуватися таким рішенням в своїй роботі. Є безліч скриптів присвячених цій темі, але мені сподобався плагін під назвою loupe. Це рішення дуже зручно, так як підключення його і настройка займає всього пару хвилин.
Для початку нам, як завжди необхідно підключити бібліотеку і сам плагін.
Далі ми наносимо розмітку, з якої будемо працювати. Тут у нас є два варіанти. Ми можемо безпосередньо працювати із зображенням або укласти його на заслання і працювати вже з нею.
У першому варіанті для того, щоб масштабування працювало правильно нам необхідно вказати атрибути width і height з меншими розмірами зображення.
У другому прикладі в дорозі картинки ми вказуємо зображення, на яке буде застосовуватися ефект лупи, а в дорозі посилання - зображення яке буде показуватися при наведенні.
Після того як ми помістили розмітку на сторінку залишилося викликати сам плагін.
Ось і все, після всіх цих дій приємний ефект масштабування буде отримано.
Останні, що можна відзначити про цей скрипт, так це те, що у нього є кілька своїх налаштувань. За допомогою їх ви зможете змінювати розміри самої лупи і вказати клас для діва, який використовується в якості лупи.
Сподіваюся, вам сподобався jQuery плагін loupe, і ви оцінили його зручність.