Як збільшити зображення, як середній
Платформа блогів Medium використовує a користувальницький ефект масштабування зображення на сторінках свого блогу. Щоразу, коли користувач натискає на зображення, він автоматично збільшує його розмір.
Це великий ефект і, безумовно, унікальний для Medium, але ніколи не було те, що можна було б легко скопіювати.
Тепер, з MediumLightbox сценарій, це легше, ніж будь-коли. Цей сценарій JS є легким і легким для додавання на будь-який веб-сайт або блог.
Якщо ви хочете побачити, як це працює, ви можете відвідати демонстраційну сторінку організований автором Davide Calignano.
Він витратив деякий час прибиваючи вниз точний перехід та користувальницький ефект анімації створити дзеркальне відображення масштабу зображення Medium. Вся бібліотека написана на чистому JavaScript, так що не покладатися на будь-який 3ст партійні сценарії, такі як jQuery.
Ви повинні знати трохи JS, щоб встановити його, але ви, звичайно, не повинні бути експертом.
Кожне зображення може приймати data- * атрибути для встановлення повнорозмірної висоти та ширини, всі з яких є витягується динамічно з плагіна lightbox. Код установки дуже простий, і він може націлюйте самі зображення, або контейнери типу
Ось один фрагмент коду, необхідний для запуску плагіна:
MediumLightbox ('figure.zoom-effect'); Усередині функції ви пройти селектор для всіх елементів (напр. .ефект масштабування клас. Цей клас є конкретно визначені у таблиці стилів MediumLightbox, тому краще також використовувати цю сторінку на своїй сторінці.
І, як тільки це буде зроблено, ви все готові!
У області вмісту сторінки можна обернути всі зображення в
Щоб завантажити копію цього сценарію та розпочати роботу, відвідайте головний репозитарій GitHub. Тут ви також знайдете документацію, а також фрагменти коду можна скопіювати, щоб швидко налаштуватися.
