^ 回到顶部
  • 人生没有定律,每个人都有自己的节奏
  • 本站wordpress建站教程均通过实践后发布,希望对你有帮助
  • 希望你的坚持,都是因为热爱,而不是因为不甘心
  • 5年wordpress建站经验,5星服务品质
  • 那些不愿意让你吃亏的人,才是真正值得你深交的人,也是值得你付出时间的人
  • 阿里云1核2g仅需102元/年,今日10点开抢

wordpress集成灯箱插件fancybox3

阿里云双12限时特惠

插件官网: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,你值得试一试。

让小雨知道,这篇文章帮到了你
扫码关注微信公众号zs40086(微搜片)随时随地微信看片,抢先福利电影等你来

热门推荐

如有疑问,请前往问答中心反馈!

反馈