TechBlogSD - Все для WordPress и WEB разработки
WEB и WordPress инструкции, новости, обзоры тем и плагинов

Grav Featherlight – Применяем прилоадер для галерей изображений

873

Плагин FeatherLight

FeatherLight – это простой плагин для Grav, который добавляет функции лайтбокса благодаря библиотеке jQuery Featherlight.js .

Чтобы лучше понять, как работает Featherlight, вы должны ознакомиться с оригинальной проектной документацией.

Featherlight для Grav

Featherlight для WordPress

Внешний вид плагина Featherlight в админ панели Grav

Настройки для CMS grav

Для того что бы активировать галереи в лайтбоксе необходимо применить настройки плагина как указано на скрине ниже:

Настройки плагина для Grav CMS

Реализация CSS прилоадера для FeatherLight

Анимация загрузчика реализованная полностью на CSS, которая зависит от .featherlight-loading класса, который добавляется во время загрузки контента. Самое приятное, что его можно легко настроить, чтобы отображать, как вам нравится, поскольку он использует только CSS. Вот как это выглядит по умолчанию:

Как выглядит прилоадер галереи featherlight

Чтобы настроить загрузчик, вам просто нужно добавить следующий CSS-код в свой файл CSS стилей:

/** * Featherlight Loader * * Copyright 2015, WP Site Care http://www.wpsitecare.com * MIT Licensed. */ @-webkit-keyframes featherlightLoader { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes featherlightLoader { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .featherlight-loading .featherlight-content { -webkit-animation: featherlightLoader 1s infinite linear; animation: featherlightLoader 1s infinite linear; background: transparent; border: 8px solid #8f8f8f; border-left-color: #fff; border-radius: 80px; width: 80px; height: 80px; min-width: 0; } .featherlight-loading .featherlight-content > * { display: none !important; } .featherlight-loading .featherlight-close, .featherlight-loading .featherlight-inner { display: none; }

Источник записи:

Leave A Reply

Этот веб-сайт использует файлы cookie для улучшения вашего опыта. Мы предполагаем, что вы согласны с этим, но вы можете отказаться, если хотите. ПринимаюПодробнее