为wordpress添加fancyBox灯箱功能

以下是千篇一律的常规使用方法:

FancyBox提供了一种简洁优雅的方式去为图片、网页和多媒体添加灯箱功能。

特点
1、允许我们用鼠标和键盘上的四个方向键切换图片
2、可以根据当前窗口大小自动调整弹出框的大小,当我们改变浏览器窗口大小时,将会看到弹出框自动缩放了
3、支持缩略图和按钮帮助导航
4、弹出框支持显示多种类型的内容(图片,html,视频……)

如何使用
首先下载插件,解压然后复制文件到你的网站/项目文件夹中。在 中加载文件。确保你已经加载了 jQuery:

<head>
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
     <link rel="stylesheet" href="/fancybox/jquery.fancybox.css" type="text/css" media="screen" />
     <script type="text/javascript" src="/fancybox/jquery.fancybox.pack.js"></script>
</head>

创建你自己的链接,加上 fancybox 样式名,如果你想显示一个标题,那就给该链接加上一个 title 属性。

<a href="large_image.jpg" title="Sample title"><img src="small_image.jpg" /></a>

如果你有一组相关的图片,你得额外加上一个 rel(或 data-fancybox-group) 属性,给其赋一个组名:

<a href="large_1.jpg" rel="gallery" title="Sample title 1"><img src="small_1.jpg" /></a>
<a href="large_2.jpg" rel="gallery" title="Sample title 1"><img src="small_2.jpg" /></a>

用如下脚本初始化:

<script>
   $(document).ready(function() {
      $('.fancybox').fancybox();
  });
</script>

你也可以给初始化脚本加上一些可选项来扩展默认的配置,比如:

<script>
  $(document).ready(function() {
    $('.fancybox').fancybox({
      padding : 0,
      openEffect  : 'elastic'
    });
  });
</script>

提示: 自动分组然后将 fancyBox 应用到所有图片上:

$("a[href$='.jpg'],a[href$='.jpeg'],a[href$='.png'],a[href$='.gif']").attr('rel', 'gallery').fancybox();

脚本用到了匹配的元素的 href 属性来取得内容的位置,以及找出你想要展示的内容类型。
你可以通过添加样式名(fancybox.image, fancybox.iframe, 等等)或者 data-fancybox-type 属性来直接指定类型:

//Ajax:
<a href="/example.html">Example</a>
//or
<a href="/example.html" data-fancybox-type="ajax">Example</a>
//Iframe:
<a href="example.html">Example</a>
//Inline (will display an element with `id="example"`)
<a href="#example">Example</a>
//SWF:
<a href="example.swf">Example</a>
//Image:
<a href="example.jpg">Example</a>

注意,ajax 请求会受到 同源策略 的影响。如果 fancyBox 不能获得内容类型,它将会根据 href 属性值来猜测,如果不成功就会静默退出(这和以前的版本是不一样的,如果猜测不成功就会展示一个错误信息)。

没错,我们今天说的是 如何让wordpress用上fancyBox灯箱功能

在wordpress文件头(如主题内的 header.php 文件)中引入下面三个文件(可以使用下面代码中的链接,或者直接下载后上传到所使用主题文件夹内按路径添加),注意:jquery-3.2.1.min.js建议也要引入的,有些主题jQuery库和这个有冲突,就会造成无法使用灯箱效果。

<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.min.js"></script>

然后在主题的functions.php里写入:

/*
==================================================
fancybox图片灯箱效果
==================================================
*/
add_filter('the_content', 'fancybox1');
add_filter('the_content', 'fancybox2');
function fancybox1($content){ 
    global $post;
    $pattern = "/<img(.*?)src=('|\")([^>]*).(bmp|gif|jpeg|jpg|png|swf)('|\")(.*?)>/i";
    $replacement = '<a$1href=$2$3.$4$5 data-fancybox="images"><img$1src=$2$3.$4$5$6></a>';
    $content = preg_replace($pattern, $replacement, $content);
    return $content;
}
function fancybox2($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;
}

可以看见,上面代码中不带超链接的图片和带超链接的图片都能使用灯箱效果,如果你不需要不带超链接禁止灯箱效果,删除fancybox1相关内容即可。

强制刷新后即可,点击网站上的图片看看效果吧,至此,fancyBox灯箱功能介绍完毕,尽情使用吧!

共有 0 条评论

You must be logged in to post a comment.

Top