wordpress集成灯箱插件fancybox3

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

<link rel="stylesheet" type="text/css" href="jquery.fancybox.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="jquery.fancybox.min.js"></script>

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

<a href="image_1.jpg" data-fancybox="gallery" data-caption="Caption #1">
	<a data-fancybox="gallery" href="thumbnail_1.jpg"title="wordpress 集成灯箱插件 fancybox3" ><img class="aligncenter size-full wp-image" src="thumbnail_1.jpg" alt="wordpress 集成灯箱插件 fancybox3" /></a>
</a>

<a href="image_2.jpg" data-fancybox="gallery" data-caption="Caption #2">
	<a data-fancybox="gallery" href="thumbnail_2.jpg"title="wordpress 集成灯箱插件 fancybox3" ><img class="aligncenter size-full wp-image" src="thumbnail_2.jpg" alt="wordpress 集成灯箱插件 fancybox3" /></a>
</a>

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

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

add_filter('the_content', 'fancybox');
function fancybox ($content){
    global $post;
    $pattern = "/<a(.*?)href=('|\")([^>]*).(bmp|gif|jpeg|jpg|png|swf)('|\")(.*?)>(.*?)<\/a>/i";
    $replacement = '<a$1href=$2$3.$4$5 data-fancybox="images" $6>$7</a>';
    $content = preg_replace($pattern, $replacement, $content);
    return $content;
}

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

$.fancybox.open('<div class="message"><h2>Hello!</h2><p>You are awesome!</p></div>');

还能够展示 iframe 页面

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

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

<a data-fancybox data-width="640" data-height="360" href="video.mp4">
    Direct link to MP4 video
</a>

<a data-fancybox href="#myVideo">
    HTML5 video element
</a>

<video width="640" height="320" controls id="myVideo" style="display:none;">
    <source src="https://www.html5rocks.com/en/tutorials/video/basics/Chrome_ImF.mp4" type="video/mp4">
    <source src="https://www.html5rocks.com/en/tutorials/video/basics/Chrome_ImF.webm" type="video/webm">
    <source src="https://www.html5rocks.com/en/tutorials/video/basics/Chrome_ImF.ogv" type="video/ogg">
    Your browser doesn't support HTML5 video tag.
</video>

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