WordPress 添加图片灯箱效果

2021-04-25 2230点热度 0条评论

写文章越来越多的使用图片,但博客自带的图片效果太差,相当影响阅读体验。

抽空给博客加了一个效果。。

添加JS CSS引用

为了来的快,直接在JsDriver中搜索lightBox,找到了第一个方案@fancyapps/fancybox,本着简单快速的想法,越快搞完越好。。

打开博客主题的Function.php文件吗,插入代码。

add_action('wp_enqueue_scripts', 'load_fancybox_resource', 99);
function load_fancybox_resource() {
    wp_register_script( 'fancybox_script', 'https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js', array( 'jquery' ), '3.5.7', true);
    wp_register_style('fancybox_style', 'https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css', null, '3.5.7', 'all');

    wp_enqueue_script( 'fancybox_script' );
    wp_enqueue_style('fancybox_style');
}

增加样式

大家都晓得Wordpress是使用了Jquery的,这里就直接点,(不想改文章,更不想改代码)

如果没有自定义的css文件引入主题,参考上面的样式引入即可。

jQuery('.wp-block-image img, .wp-block-gallery img').each(function (index, element) {
    var $parent = $(element).parent().is('a');
    if ($parent) {
        $(element).parent().attr('data-fancybox', 'gallery');
    } else {
        $(element).wrap('<a>').parent().attr({ href: element.src, 'data-fancybox': 'gallery' });
    }
});


jQuery('.content figure').addClass('aligncenter')

Jalena

原创内容,转载请注明出处! 部分内容来自网络,请遵守法律适用!

文章评论