Простий lightbox для сайту на jquery

Вітаю друзі, я вже давно чогось не додавав по темі «збільшення картинок» або, як прийнято називати ефект - lightbox. Рішень зараз в інтернеті можна знайти просто масу, і кожне по-своєму може бути застосовано, так як вони були написані для конкретних завдань. Сьогодні я ж хочу виділити один jQuery плагін із загальної маси, названий simplezoom. Переклад назви, якого - просте збільшення, що відповідає самому скрипту.

Отже, давайте підключимо скрипти і розберемося, як додати до себе на сайт lightbox simplezoom:

Далі треба викликати, новий метод simplezoom (), робити ми це будемо після завантаження сторінки:

Тепер що стосується HTML розмітки:

У плагіна є ряд своїх налаштувань, які ми розглянемо нижче (в дужках я буду вказувати значення за замовчуванням):

  • classie - це властивість відповідає за додатковий клас додається до обгортці lightbox ( «»);
  • offset - тут можна вказати мінімальне відстані від зображення до кордонів екрану браузера (40);
  • scrollclose - включення / вимикання режиму закриття lightbox при прокручуванні (true);
  • imgclass - тут вказується елемент, в якому плагін буде шукати шлях до зображення ( «img»);
  • duration - швидкість анімації;
  • modalTmpl - в цій властивості можна вказати власний HTML шаблон для виведення картинки в режимі lightbox;
  • loaderTmpl - тут вказується HTML Лоудер;
  • onModalInit () - метод, який спрацьовує якщо користувач натискає на зображення;
  • onModalClosed () - метод, що спрацьовує при закритті lightbox;
  • onImageLoaded () - метод спрацьовує при успішному відкритті великий версії зображення;
  • onImageError () - цей метод спрацьовує при невдалому завантаженні зображення.

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

Чи потрібен менеджер завдань

Простий lightbox для сайту на jquery

WooCommerce title

І ще 30 CSS ефектів при наведенні

Здрастуйте дорогі Новомосковсктелі! Настав час поповнити колекцію сайту ще 30-ма красивими CSS ефектами при наведенні курсору на зображення. Дана тема воістину дуже обширна і ми не втомлюємося поповнювати нашу бібліотеку все новими і новими ефектами.