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

fancybox
fancybox

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

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

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

$('.single img.size-full').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)
    }
  }
})

文章版权归 更好的WordPress主题 所有,未经许可不得转载,责任编辑:admin。

分享到: