wordpress集成灯箱插件fancybox3

Author: 陌小雨Date: 2020-09-02View: 0

插件官网：fancybox3官网，wordpress需要集成的话首先需要引入js\cs

然后按照插件格式要求拼接html代码：

你可以按照上面的赋予data-fancybox一个值来进行打组图片

可以使用下面代码对wordpress新旧文章进行格式化输出

add_filter('the_content', 'fancybox');
function fancybox ($content){
    global $post;
    $pattern = "/]*).(bmp|gif|jpeg|jpg|png|swf)('|\")(.*?)>(.*?)<\/a>/i";
    $replacement = '$7';
    $content = preg_replace($pattern, $replacement, $content);
    return $content;
}

fancybox3还可实现简单的弹窗，可支持html

$.fancybox.open('Hello!
You are awesome!');

还能够展示iframe页面

 $.fancybox.open({
    src  : 'https://baidu.com',
    type : 'iframe',
    opts : {
      afterShow : function( instance, current ) {
        console.info( 'done!' );
      }
    }
  });

还支持视频弹窗，有两种方法


    Direct link to MP4 video



    HTML5 video element

反正是很强大，小雨在实战中经常用到这个灯箱插件fancybox，你值得试一试。

上一篇： wordpress短代码实现分类文章ajax筛选

下一篇： wordpress强制用户第一次登录时修改密码

返回列表页>