Fancybox

                                // https://fancyapps.com/fancybox/3/
// https://fancyapps.com/fancybox/3/docs/
// Использование, в тег ссылки добавить атрибуты: data-fancybox="gallery" data-caption="Title item"

// Руссификация
var ru = {
    CLOSE: "Закрыть",
    NEXT: "Следующий",
    PREV: "Предыдущий",
    MODAL: "Нажмите Esc чтобы закрыть окно",
    ERROR: "Возникла ошибка",
    IMAGE_ERROR: "Изображение не найдено",
    IFRAME_ERROR: "Ошибка при загрезке страницы",
    TOGGLE_ZOOM: "Увеличить",
    TOGGLE_SLIDESHOW: "Запустить автопроигрывание",
    TOGGLE_FULLSCREEN: "На весь экран",
    TOGGLE_THUMBS: "Отобразить/скрыть навигацию"
}
Fancybox.defaults.l10n = ru
    
var fancybox = $('.fancybox')
//var fancybox = $('[data-fancybox]')
if (fancybox.length) {
    // Руссификация
    fancybox.fancybox({
        lang: 'ru',
        i18n: {
            'ru': {
                CLOSE: 'Закрыть',
                NEXT: 'Следующий',
                PREV: 'Предыдущий',
                ERROR: 'Запрошенное содержимое не может быть загружено. <br>Пожалуйста, повторите попытку позже.',
                PLAY_START: 'Запуск слайд-шоу',
                PLAY_STOP: 'Остановить слайд-шоу',
                FULL_SCREEN: 'На весь экран',
                THUMBS: 'Миниатюры',
                DOWNLOAD: 'Скачать',
                SHARE: 'Поделиться',
                ZOOM: 'Приблизить'
            }
        }
    })
}

// Заменить динамически название в Fancybox
fancybox.fancybox({
	caption: 'Title item'
})

// Закрыть окно
$.fancybox.close()
    
    
// Через sass задать основной цвет сайта для Fancybox
.fancybox-progress {
  background: $primary !important;
}
.fancybox-thumbs__list a:before {
  border-color: $primary !important;
}
Список