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/sw[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-lightbox
、data-title
参数,你也可以根据自己需求去拼接。
还有幻灯的css,就自己写了吧。