Поддержка Плагины Плагин модального окна изображений

  • Каким плагином можно воспользоваться для создания модальных окон из изображений на сайте. Пытался сделать вручную но неудачно.

    • Тема изменена 6 месяцев, 1 неделя назад пользователем intman1958.

    Страница, с которой нужна помощь: [войдите, чтобы увидеть ссылку]

Просмотр 6 ответов — с 1 по 6 (всего 6)
  • А почему неудачно, все легко. Вот библиотека jQuery например https://fancyapps.com/fancybox/ там все написано как пользоваться

    Сначала подключаем скрипт и стиль в functions.php, я через CDN покажу, вот так:

    /**
     * Подключение библиотеки Fancybox 3 jQuery (версия 5.0.28).
     *
     * Эта функция подключает скрипт и стиль Fancybox 3 к WordPress.
     * Дополнительная информация: https://fancyapps.com/fancybox/getting-started/
     */
    function air_enqueue_fancybox_scripts() {
        // Подключение скрипта
        wp_enqueue_script(
            'air-fancybox-script',
            'https://cdn.jsdelivr.net/npm/@fancyapps/fancybox/dist/jquery.fancybox.min.js',
            array('jquery'), // зависимость от jQuery
            '5.0.28', // версия скрипта
            true // (footer)
        );
    
        // Подключение стилей
        wp_enqueue_style(
            'air-fancybox-style',
            'https://cdn.jsdelivr.net/npm/@fancyapps/fancybox/dist/jquery.fancybox.min.css',
            array(), // нет зависимостей
            '5.0.28' // версия
        );
    }
    
    // Запуск функции при загрузке скриптов
    add_action('wp_enqueue_scripts', 'air_enqueue_fancybox_scripts');

    Далее вам остается инициализировать скрипт по необходимым селекторам, вы можете конкретизировать селекторы которые вам необходимы. Так же, вы можете провести инициализацию в js файлах вашей темы, я же подвесил это на wp_footer:

    /**
     * Инициализация скрипта Fancybox в wp_footer.
     */
    function air_initialize_fancybox_script() {
        ?>
        <script>
            document.addEventListener('DOMContentLoaded', function () {
                Fancybox.bind(
                    'a[href*=".jpg"],a[href*=".jpeg"],a[href*=".png"],a[href*=".gif"]',
                    {
                        groupAll: true,
                        // параметры
                    }
                );
            });
        </script>
        <?php
    }
    
    // используем wp_footer для вывода скрипта
    add_action('wp_footer', 'air_initialize_fancybox_script', 999);

    И все, все картинки на сайте теперь должны всплывать. Кроме всего прочего вы в модальных окнах можете открывать контент, различные pdf, формы обратной связи, видео, все что угодно…

    Если не хотите заморачиваться, можете использовать плагин, та же самая библиотека https://wordpress.org/plugins/w3dev-fancybox/ или в разделе плагинов по запросу «Fancybox 3» найдите необходимый. Если я вам помог отметьте тему в качестве решенной

    Кстати, забыл сказать, вот тут посмотрите https://wphub.space/newsletter/wpletter-10-11-2023/ в 6.4 вроде добавили лайтбокс

    Dan Zakirov , спасибо. Плагин этот, как и другие, из серии Fancybox не работает на моем сайте. С остальным постараюсь разобраться .

    Путь неправильный выше, надо исправить почему-то у меня копировалось с @5.0.28, уберите это из ссылки и все заработает

    Исправили… вы попробуйте снова, я путь до CDN неправильно указал

    Можно и без плагинов. Посмотрите этот вариант . В строчку разметки вставляете адрес изображения и все работает.

    <a href="#win1" class="btn">Открыть окно 1</a>
    • Ответ изменён 5 месяцев, 2 недели назад пользователем intman1958.
Просмотр 6 ответов — с 1 по 6 (всего 6)