小程序开发工具_一键生成小程序_小程序可视化编辑工具_小程序码怎么弄出来的_开源小程序
当前位置:建站首页 > 新闻资讯 > 网站优化 >

广东中小企业建站公司-【WordPress教程】给文章页

发表日期:2021-04-28 22:16文章编辑:jianzhan浏览次数: 标签:    

--------

广东中小企业建站公司

-------

FancyBox 简易详细介绍

Fancybox 是一个 JavaScript 库,用于以优雅的方法展现图象,视頻和任何 HTML 內容。它具备您期待的全部作用 触碰启用,响应和彻底可订制。

依靠

jQuery 3+ 是首选,但 fancyBox 可用于 jQuery 1.9.1+ 和 jQuery 2+

适配性

fancyBox 包含对触控手式的适用,乃至适用放缩手式。它十分合适手机上和桌面上访问器。

特性

挪动第一:每一个机器设备上看起来非常好;适用最多见的触控手式-双击鼠标,捏放和捏出来的图象访问; 水光滑动开展导航栏。 多个案例:它能够开启一个方式,而另外一种是依然可见。 迅速和简易安裝:就在两个文档,无需编写 JavaScript 编码一行来完成。 全自动內容鉴别:适用最时兴的网站诸如 YouTube,Vimeo 的和谷歌地形图的开箱。 GPU 加快:硬件配置加快的动漫有更好的主要表现。 响应:设定应用任何 CSS 企业,访问器将进行剩余的內容维度;全部的图型,包含载入标志,仅与 CSS 建立。

Fancybox 3 官方应用实例教程

! 1. Add latest jQuery and fancyBox files

 

script src= ///jquery-3.2.1.min.js /script

 

link rel= stylesheet href= ajax/libs/fancybox/3.2.5/jquery.fancybox.min.css /

script src= ajax/libs/fancybox/3.2.5/jquery.fancybox.min.js /script

 

 

! 2. Create links

 

a data-fancybox= gallery href= big_1.jpg img src= small_1.jpg /a

a data-fancybox= gallery href= big_2.jpg img src= small_2.jpg /a

 

 

! 3. Have fun!

表明:实际上应用方式很简易,就是在文档头(如主题内的 header.php 文档)中引入 jquery.fancybox.min.css 和 jquery.fancybox.min.js 两个文档(能够应用以上编码中的连接,或立即免费下载后提交到所应用主题文档夹内再加上),而 jquery-3.2.1.min.js 文档一般无需理睬,由于大一部分 WordPress 站点都早已引入有 jQuery 库了。

a href= image.jpg data-fancybox data-caption= My caption

img src =“thumbnail.jpg” alt =“My caption”/

/a

掩藏內容:

/*

==================================================

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;

}

 

---------

广东中小企业建站公司

------------
相关新闻