Как увеличить изображения, как средний
Платформа блогов Medium использует пользовательский эффект масштабирования изображения на их страницах блога. Всякий раз, когда пользователь нажимает на изображение, оно автоматически увеличивает его размер.
Это отличный эффект и, конечно же, уникальный для Medium, но его никогда нельзя было легко скопировать..
Теперь с MediumLightbox сценарий, это проще, чем когда-либо. Этот JS-скрипт легкий и его легко добавить на любой сайт или блог.
Если вы хотите посмотреть, как это работает, вы можете посетить живая демо-страница организовано создателем Давиде Калиньяно.
Он потратил некоторое время на точный переход и собственный анимационный эффект, чтобы создайте зеркальное отображение Medium's image zoom. Вся библиотека написано на чистом JavaScript, так что это не зависит от каких-либо 3й партийные скрипты, такие как jQuery.
Вам нужно знать немного JS, чтобы настроить его, но вам, конечно, не нужно быть экспертом.
Каждое изображение может взять данные- * атрибуты для настройки полноразмерной высоты и ширины, все из которых вытащил динамически из плагина лайтбокса. Код установки очень прост и может целевые изображения сами, или же контейнеры, такие как
Вот фрагмент кода, который вам нужен для запуска плагина:
MediumLightbox ( 'figure.zoom-эффект');
Внутри функции вы будете передать селектор для всех элементов (например,. .зум-эффект учебный класс. Этот класс специально определенный в таблице стилей MediumLightbox, так что лучше использовать это и на своей странице.
И, как только это настроено, все готово!
В области содержимого вашей страницы вы можете обернуть все изображения в
Чтобы скачать копию этого скрипта и начать работу, просто посетите основной репозиторий GitHub. Здесь вы также найдете документация вместе с фрагментами кода Вы можете скопировать, чтобы настроить быстро.
