免费外贸网站模板下载,旅游网站界面设计,郑州做软件开发的公司,做房地产销售的基础知识功能描述
使用 Fancybox 实现图片放大和灯箱效果。自动为文章内容中的图片添加链接#xff0c;使其支持 Fancybox。修改了 header.php 和 footer.php 以引入必要的 CSS 和 JS 文件。在 functions.php 中通过过滤器自动为图片添加 data-fancybox 属性。 最终代码
1. 修改 hea…功能描述
使用 Fancybox 实现图片放大和灯箱效果。自动为文章内容中的图片添加链接使其支持 Fancybox。修改了 header.php 和 footer.php 以引入必要的 CSS 和 JS 文件。在 functions.php 中通过过滤器自动为图片添加 data-fancybox 属性。 最终代码
1. 修改 header.php
在 head 标签内添加以下代码
!-- 图片放大 -- link relstylesheet hrefhttps://cdn.jsdelivr.net/gh/fancyapps/fancybox3.5.7/dist/jquery.fancybox.min.css /2. 修改 footer.php
在关闭的 /body 标签前添加以下代码
!-- 图片放大 -- script srchttps://cdn.jsdelivr.net/gh/fancyapps/fancybox3.5.7/dist/jquery.fancybox.min.js/script 3. 修改 functions.php
在 functions.php 中添加以下代码
/** 图片灯箱自动为图片添加链接 **/ add_filter(the_content, fancybox); function fancybox($content){ // 匹配图片并为其添加 Fancybox 的 data 属性 $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-fancyboxgalleryimg$1src$2$3.$4$5$6/a, a$1href$2$3.$4$5 data-fancyboximages$6$7/a ); $content preg_replace($pattern, $replacement, $content); return $content; } 配置后效果 自动链接图片 文章中的 img 标签会自动嵌套在 a 标签中并添加 data-fancybox 属性使图片支持 Fancybox 的放大和灯箱功能。 Fancybox 样式和功能 放大图片时带有过渡动画背景半透明支持左右导航切换。 多图支持 多张图片会自动分组到同一个灯箱中data-fancyboxgallery。 验证步骤
1. 验证图片自动加链接
发布或编辑一篇文章确保图片没有手动添加链接。刷新页面后检查 HTML 代码
图片应该被包裹在 a 标签中。例如 a hrefimage-url.jpg data-fancyboxgallery img srcimage-url-thumb.jpg alt图片描述 /a
2. 检查资源加载
使用浏览器的开发者工具F12确认
jquery.fancybox.min.css 和 jquery.fancybox.min.js 文件是否加载成功。没有 JavaScript 报错。
3. 测试图片效果
点击文章中的图片
图片会以 Fancybox 弹出显示背景半透明。如果有多张图片可以点击左右箭头切换。
