WordPress如何添加fancybox lightbox?

fancybox是图片幻灯效果组件,点击图片会弹出窗口让用户在全屏查看图片。

fancybox
fancybox

WordPress加入fancybox需要做一些主题修改。functions.php增加:

if( is_single() ){
    wp_enqueue_script('fancybox-script', 'https://cdn.jsdelivr.net/gh/fancyapps/[email protected]/dist/jquery.fancybox.min.js', array('jquery'), null, true);
    wp_enqueue_style('fancybox-style', 'https://cdn.jsdelivr.net/gh/fancyapps/[email protected]/dist/jquery.fancybox.min.css', array(), null, 'all');
}

在主题相关的JS中文件加入:

$('.single img[class^=size]').each(function () {
  if ($(this).parent().is('a')) {
    $(this).parent('a').attr('data-fancybox', 'images')
    const caption = $(this).parent('a').siblings('.wp-caption-text').text()
    if (caption) {
      $(this).parent('a').attr('data-caption', caption)
    }
  }
})

发表回复

您的电子邮箱地址不会被公开。