插件官网：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集成灯箱插件fancybox3