非插件将WordPress插入文章中的相册(Gallery)变成幻灯

WordPress插入的相册是默认以横竖排列,即:列表。如果将相册(Gallery)变成幻灯,非插件的方式呢?

非插件将WordPress插入文章中的相册(Gallery)变成幻灯后的截图
非插件将WordPress插入文章中的相册(Gallery)变成幻灯后的截图

引入幻灯组件:

要用到幻灯组件:swiper,在主题的functions.php加入:

wp_enqueue_style('swiper-style', 'https://cdn.jsdelivr.net/npm/[email protected]/dist/css/swiper.min.css', array(), null, 'all');
wp_enqueue_script('swiper-script', 'https://cdn.jsdelivr.net/npm/[email protected]/dist/js/swiper.min.js', array('jquery'), null, true);

幻灯代码拼接:

if ($(".single .gallery").length > 0) {
    $(".single .gallery").each(function() {
        var container = '<div class="swiper-container"><div class="swiper-wrapper">';
        $(this).find("img").each(function() {
            var url = $(this).attr("src");
            var alt = $(this).attr("alt");
            var item = '<div class="swiper-slide"><a href="' + url + '" data-lightbox="' + alt + '" data-title="' + alt + '"><img src="' + url + '"></a></div>';
            container += item;
        });
        container += '</div><div class="swiper-pagination"></div><div class="swiper-button-next"></div><div class="swiper-button-prev"></div></div>';
        $(".gallery").before(container);
        lightbox.option({
            'showImageNumberLabel': false,
        })
    });

    var swiper = new Swiper('.post-content .swiper-container', {
        pagination: {
            el: '.swiper-pagination',
            type: 'fraction',
        },
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        loop: true,
        centeredSlides: true,
    });
}

注意:

这里我还用了WordPress非插件方式实现图片lightbox效果这个方法,所以在拼接:

var item = '<div class="swiper-slide"><a href="' + url + '" data-lightbox="' + alt + '" data-title="' + alt + '"><img src="' + url + '"></a></div>';

的时候,多出了 data-lightboxdata-title参数,你也可以根据自己需求去拼接。

还有幻灯的css,就自己写了吧。

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注