乐于分享
好资源不私藏

DUX主题添加文章图片点击弹窗预览效果 实用代码

DUX主题默认是没有这个效果的,于是就自己添加了这个效果,理论上支持所有WordPress主题。

在 header.php 添加以下css代码:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />

 

在 footer.php 添加以下js代码:

<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>

 

在 functions.php 添加以下代码

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

 

本地化:

如果想本地化的话,下载文章末尾的链接解压出css以及js文件。

然后css就上传到主题的css文件夹内。

js就上传到js文件夹内,然后引用,自行修改引用路径。

 

下载地址:

 

https://9izy.lanzoui.com/b00tzdfqj      密码:g8s9

 

预览效果:

 

未经允许不得转载:9i资源网 » DUX主题添加文章图片点击弹窗预览效果
支付宝扫码打赏 微信打赏

如果文章对您有帮助,欢迎移至上方按钮打赏...

评论 抢沙发

评论前必须登录!

立即登录   注册

×
订阅图标按钮