当前位置： 首页 > news >正文

wordpress 中添加图片放大功能

news 文章来源：https://blog.csdn.net/weixin_42005898/article/details/144091389 2025/1/12 8:53:22

功能描述

  1. 使用 Fancybox 实现图片放大和灯箱效果。
  2. 自动为文章内容中的图片添加链接，使其支持 Fancybox。
  3. 修改了 header.php 和 footer.php 以引入必要的 CSS 和 JS 文件。
  4. 在 functions.php 中通过过滤器自动为图片添加 data-fancybox 属性。

最终代码

1. 修改 header.php

在 <head> 标签内添加以下代码：
 

<!-- 图片放大 --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />
2. 修改 footer.php

在关闭的 </body> 标签前添加以下代码：

<!-- 图片放大 --> <script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.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-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; }

配置后效果

  1. 自动链接图片：
    文章中的 <img> 标签会自动嵌套在 <a> 标签中，并添加 data-fancybox 属性，使图片支持 Fancybox 的放大和灯箱功能。

  2. Fancybox 样式和功能：
    放大图片时，带有过渡动画，背景半透明，支持左右导航切换。

  3. 多图支持：
    多张图片会自动分组到同一个灯箱中（data-fancybox="gallery"）。

验证步骤

1. 验证图片自动加链接

发布或编辑一篇文章，确保图片没有手动添加链接。刷新页面后检查 HTML 代码：

  • 图片应该被包裹在 <a> 标签中。
  • 例如： 
    <a href="image-url.jpg" data-fancybox="gallery"> <img src="image-url-thumb.jpg" alt="图片描述"> </a>

2. 检查资源加载

使用浏览器的开发者工具（F12）确认：

  • jquery.fancybox.min.css 和 jquery.fancybox.min.js 文件是否加载成功。
  • 没有 JavaScript 报错。
3. 测试图片效果

点击文章中的图片：

  • 图片会以 Fancybox 弹出显示，背景半透明。
  • 如果有多张图片，可以点击左右箭头切换。

相关文章：

wordpress 中添加图片放大功能

功能描述 使用 Fancybox 实现图片放大和灯箱效果。自动为文章内容中的图片添加链接&#xff0c;使其支持 Fancybox。修改了 header.php 和 footer.php 以引入必要的 CSS 和 JS 文件。在 functions.php 中通过过滤器自动为图片添加 data-fancybox 属性。 最终代码 1. 修改 hea…...

编程日记 2024/11/29 2:10:11

数据结构 （7）线性表的链式存储

前言 线性表是一种基本的数据结构&#xff0c;用于存储线性序列的元素。线性表的存储方式主要有两种&#xff1a;顺序存储和链式存储。链式存储&#xff0c;即链表&#xff0c;是一种非常灵活和高效的存储方式&#xff0c;特别适用于需要频繁插入和删除操作的场景。 链表的基本…...

编程日记 2024/11/29 2:08:09

库的操作.

创建、删除数据库 创建语法&#xff1a; CREATE DATABASE [IF NOT EXISTS] db_name[ ]是可选项&#xff0c;IF NOT EXISTS 是表明如果不存在才能创建数据库 //查看数据库&#xff0c;假设7行 show databases; //创建数据库 --- 本质在Linux创建一个目录 create database databa…...

编程日记 2024/11/29 2:06:07

Vue进阶之Vue CLI服务—@vue/cli-service Vuex

Vue CLI服务—vue/cli-service & Vuex vue/cli-service初识bin/vue-cli-service.js代码执行解读 Vuexgenerator/index.jsstore/index.js插件化的能力怎么引入呢&#xff1f; vue/cli-service 初识 第一块是上一个讲述的cli是把我们代码的配置项&#xff0c;各种各样的插件…...

编程日记 2024/11/29 2:05:01

导入100道注会cpa题的方法，导入试题，自己刷题

一、问题描述 复习备考的小伙伴们&#xff0c;往往希望能够利用零碎的时间和手上的试题&#xff0c;来复习和备考 用一个能够导入自己试题的刷题工具&#xff0c;既能加强练习又能利用好零碎时间&#xff0c;是一个不错的解决方案 目前市面上刷题工具存下这些问题 1、要收费…...

编程日记 2024/11/29 1:58:53

数据库操作、锁特性

1. DML、DDL和DQL是数据库操作语言的三种主要类型 1.1 DML&#xff08;Data Manipulation Language&#xff09;数据操纵语言 DML是用于检索、插入、更新和删除数据库中数据的SQL语句。 主要的DML语句包括&#xff1a; SELECT&#xff1a;用于查询数据库中的数据。 INSERT&a…...

编程日记 2024/11/29 1:56:51

学习笔记039——SpringBoot整合Redis

文章目录 1、Redis 基本操作Redis 默认有 16 个数据库&#xff0c;使用的是第 0 个&#xff0c;切换数据库添加数据/修改数据查询数据批量添加批量查询删除数据查询所有的 key清除当前数据库清除所有数据库查看 key 是否存在设置有效期查看有效期 2、Redis 数据类型String追加字…...

编程日记 2024/11/29 1:53:47

（笔记）简单了解ZYNQ

1、zynq首先是一个片上操作系统&#xff08;Soc&#xff09;&#xff0c;结合了arm&#xff08;PS&#xff09;和fpga&#xff08;PL&#xff09;两部分组成 Zynq系统主要由两部分组成&#xff1a;PS&#xff08;Processing System&#xff09;和PL&#xff08;Programmable L…...

编程日记 2024/11/29 1:52:45

大众点评小程序mtgsig1.2算法

测试效果&#xff1a; var e function _typeof(o) {return "function" typeof Symbol && "symbol" typeof Symbol.iterator? function (o) {return typeof o;}: function (o) {return o && "function" typeof Symbol &…...

编程日记 2024/11/29 1:49:42

七牛云AIGC内容安全方案助力企业合规创新

随着人工智能生成内容(AIGC)技术的飞速发展,内容审核的难度也随之急剧上升。在传统审核场景中,涉及色情、政治、恐怖主义等内容的标准相对清晰明确,但在AIGC的应用场景中,这些界限变得模糊且难以界定。用户可能通过交互性引导AI生成违规内容,为审核工作带来了前所未有的不可预测…...

编程日记 2024/11/29 1:45:38

.net的winfrom程序 窗体透明打开窗体时出现在屏幕右上角

窗体透明&#xff0c; 将Form的属性Opacity&#xff0c;由默认的100% 调整到 80%&#xff0c;这个数字越小越透明(尽量别低于50%&#xff0c;不信你试试看)&#xff01; 打开窗体时出现在屏幕右上角 //构造函数 public frmCalendarList() {InitializeComponent();//打开窗体&…...

编程日记 2024/11/29 1:43:35

基于YOLOv8深度学习的智慧课堂教师上课行为检测系统研究与实现(PyQt5界面+数据集+训练代码)

随着人工智能技术的迅猛发展&#xff0c;智能课堂行为分析逐渐成为提高教学质量和提升教学效率的关键工具之一。在现代教学环境中&#xff0c;能够实时了解教师的课堂表现和行为&#xff0c;对于促进互动式教学和个性化辅导具有重要意义。传统的课堂行为分析依赖于人工观测&…...

编程日记 2024/11/29 1:42:34

使用 Tkinter 创建一个简单的 GUI 应用程序来合并视频和音频文件

使用 Tkinter 创建一个简单的 GUI 应用程序来合并视频和音频文件 Python 是一门强大的编程语言&#xff0c;它不仅可以用于数据处理、自动化脚本&#xff0c;还可以用于创建图形用户界面 (GUI) 应用程序。在本教程中&#xff0c;我们将使用 Python 的标准库模块 tkinter 创建一…...

编程日记 2024/11/29 1:41:32

【C++笔记】模板进阶

前言 各位读者朋友们大家好&#xff01;上一期我们讲了stack、queue以及仿函数。先前我们讲过模板的初阶内容&#xff0c;这一期我们来更深入的学习一下模板。 一. 非类型模板参数 1.1 非类型模板参数 模板参数分为类型形参和类类型形参&#xff1a; 类型形参&#xff1a;…...

编程日记 2024/11/29 1:39:29

Soul App创始人张璐团队亮相GITEX GLOBAL 2024，展示多模态AI的交互创新

随着全球AI领域的竞争加剧,越来越多的科技巨头和创新企业纷纷致力于多模态AI的开发。2024年10月14日至18日,GITEX GLOBAL海湾信息技术博览会在迪拜举行,吸引了超过6700家全球科技巨头和创新公司参与,展示了智能互联、人工智能等领域的新成果。 此次展会中,Soul App创始人张璐团…...

编程日记 2024/11/29 1:38:28

ffmpeg.wasm 在浏览器运行ffmpeg操作视频

利用ffmpeg.wasm&#xff0c;可以在浏览器里运行ffmpeg,实现对音视频的操作 参考链接&#xff1a; https://blog.csdn.net/jchsgwbr/article/details/143252044 https://gitee.com/CXBalCai/ffmpeg-template 其他参考 https://github.com/ffmpegwasm/ffmpeg.wasm https://b…...

编程日记 2024/11/29 1:35:25

用Python爬虫“偷窥”1688商品详情：一场数据的奇妙冒险

引言&#xff1a;数据的宝藏 在这个信息爆炸的时代&#xff0c;数据就像是一座座等待挖掘的宝藏。而对于我们这些电商界的探险家来说&#xff0c;1688上的商品详情就是那些闪闪发光的金子。今天&#xff0c;我们将化身为数据的海盗&#xff0c;用Python这把锋利的剑&#xff0…...

编程日记 2024/11/29 1:27:19

CentOS上如何离线批量自动化部署zabbix 7.0版本客户端

CentOS上如何离线批量自动化部署zabbix 7.0版本客户端 管理的服务器大部分都是CentOS操作系统&#xff0c;版本主要是CentOS 7。因为监控服务器需要&#xff0c;要在前两天搭建的Zabbix 7.0系统上把这些CentOS 7系统都监控起来。因为服务器数量众多&#xff0c;而且有些服务器…...

编程日记 2024/11/29 1:22:13

【开源项目】ChinaAddressCrawler 中国行政区划数据（1980-2023年）采集及转换（Java版），含SQL格式及JSON格式

ChinaAddressCrawler 开源项目地址&#xff1a;https://gitee.com/li_yu_jiang/ChinaAddressCrawler 来源于国家民政部的数据只包括省级&#xff08;省/直辖市/自治区/特别行政区&#xff09;、地级&#xff08;地级市/地区/自治州/盟&#xff09;、县级&#xff08;县/市辖区…...

编程日记 2024/11/29 1:21:10

React中事件处理和合成事件：理解与使用

&#x1f90d; 前端开发工程师、技术日更博主、已过CET6 &#x1f368; 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 &#x1f560; 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 &#x1f35a; 蓝桥云课签约作者、上架课程《Vue.js 和 E…...

编程日记 2024/11/29 1:20:09

Local Changes不展示，DevEco Studio的git窗口中没有Local Changes

DevEco Studio的git窗口中&#xff0c;没有Local Changes&#xff0c;怎么设置可以调出&#xff1f; 进入File-->Settings-->Version Control&#xff0c;将Use non-modal commit interface前的勾选框取消勾选&#xff0c;点击OK即可在打开git窗口&#xff0c;就可以看到…...

编程日记 2024/11/29 1:17:06

大数据笔记

第一章、大数据概述 人类的行为及产生的事件的一种记录称之为数据。 1、大数据时代的特征&#xff0c;并结合生活实例谈谈带来的影响。 &#xff08;一&#xff09;特征 1、Volume 规模性&#xff1a;数据量大。 2、Velocity高速性&#xff1a;处理速度快。数据的生成和响…...

编程日记 2024/11/29 1:14:03

【Linux网络编程】TCP套接字

TCP与UDP的区别&#xff1a; udp是无连接的、面向数据报&#xff08;通信时以数据报为单位传输&#xff09;的传输层通信协议&#xff0c;其中每个数据报都是独立的&#xff0c;通信之前不需要建立连接&#xff0c;bind绑定套接字后直接可以进行通信。 tcp是面向连接的、基于字…...

编程日记 2024/11/29 1:05:55

在Manjaro Gnome桌面的基础上安装Budgie桌面环境

在Manjaro上安装Budgie桌面环境 Budgie是Solus团队开发的一种简单而优雅的桌面环境。 Budgie是由Solus项目主要开发的流行桌面环境&#xff0c;与GNOME堆栈紧密集成。它提供了简单而优雅的用户体验&#xff0c;并且可用于大多数发行版&#xff0c;如Arch、Debian、Manjaro等。…...

编程日记 2024/11/29 1:04:54

vscode可以编译通过c++项目，但头文件有红色波浪线的问题

1、打开 VSCode 的设置&#xff0c;可以通过快捷键 Ctrl Shift P 打开命令面板&#xff0c;然后搜索并选择 “C/C: Edit Configurations (JSON)” 命令&#xff0c;这将在 .vscode 文件夹中创建或修改 c_cpp_properties.json 文件 {"configurations": [{"name…...

编程日记 2024/11/29 1:02:50

前后端中Json数据的简单处理

很多时候因为数据库中不想创建中间表去存一些数据&#xff0c;所以在一个实体表中用一个json字段去存储并处理这些数据。本人倾向在前端js部分直接处理json数据&#xff0c;后端只做存储&#xff0c;不做处理。 前端在获取表单的时候解析 toEdit(row) {this.editForm { ...ro…...

编程日记 2024/11/29 1:01:49

Java爬虫：深入解析商品详情的利器

在数字化时代&#xff0c;信息的获取与处理能力成为了企业竞争力的关键。特别是在电商领域&#xff0c;商品详情的获取与分析对于市场趋势的把握、竞争对手的分析以及消费者行为的研究至关重要。Java作为一种成熟且功能强大的编程语言&#xff0c;其在爬虫技术中的应用尤为广泛…...

编程日记 2024/11/29 1:00:47

新型大语言模型的预训练与后训练范式，阿里Qwen

前言&#xff1a;大型语言模型&#xff08;LLMs&#xff09;的发展历程可以说是非常长&#xff0c;从早期的GPT模型一路走到了今天这些复杂的、公开权重的大型语言模型。最初&#xff0c;LLM的训练过程只关注预训练&#xff0c;但后来逐步扩展到了包括预训练和后训练在内的完整…...

编程日记 2024/11/29 0:57:41

深入理解 Dubbo 如何动态感知服务下线

在现代分布式系统中&#xff0c;服务的上下线管理是非常重要的功能&#xff0c;尤其是服务动态扩展与缩减的需求日益频繁。在这种环境中&#xff0c;如何确保消费者能够实时感知到服务的状态变化&#xff0c;减少因服务失效导致的调用失败&#xff0c;直接影响系统的可用性和用…...

编程日记 2024/11/29 0:53:36

VSCode 下载 安装

VSCode【下载】【安装】【汉化】【配置C环境&#xff08;超快&#xff09;】&#xff08;Windows环境&#xff09;-CSDN博客 Download Visual Studio Code - Mac, Linux, Windowshttps://code.visualstudio.com/Downloadhttps://code.visualstudio.com/Download 注意&#xff0…...

编程日记 2024/11/29 0:47:30

网站内页做排名/自动点击器软件

摘要自簡單來說就是可以將一個 or 多個應用包裝成一個服務&#xff0c;並透過 chart 的形式發佈&#xff0c;讓大家可以方便在 k8s 上安裝特定的服務。幾個元件的名詞Tiller server: 用來與API server溝通&#xff0c;使用chart在k8s cluster上建立服務Helm client: 則是用來操…...

编程日记 2025/1/12 7:13:12

一个人做网站好累/个人怎么做互联网推广平台

编程的人是幸福的。 常常听到有人说&#xff0c; 编程的人是苦逼的&#xff0c; 其实仔细想想&#xff0c; 并不如此。 编程有碍于找 MM &#xff1f; 如果是这样&#xff0c; 为什么有的人凭借装机技能可以获得MM的青睐呢&#xff1f; 有的人能够靠写简单的C语言作业找到GF呢&…...

编程日记 2025/1/12 7:02:01

南京市建设厅网站/宁波seo快速排名

Reachability是苹果官方给的检查网络状态的库,想必每个基于网络的应用都会用它来检查网络状态吧,当然笔者也不例外.可是正当自信满满的我&#xff0c;用这个库用的不亦乐乎的时候,突然发现我写的基于网络的程序工作的不是那么流畅了,尤其是仔细检查以后确定是因为用了Reachabil…...

编程日记 2025/1/12 5:23:13

河南商丘疫情最新政策/seo是什么意思 为什么要做seo

Symantec Endpoint Protection v11.0.5002.333 简体中文企业版 【现象描述】&#xff1a;为了内网安全&#xff0c;内网可以上外网的一台服务器上面部署了网络版symantec杀毒软件&#xff0c;版本是 v11.0.5002.333 简体中文企业版&#xff1b;由它生成的客户端&#xff0c;分发…...

编程日记 2025/1/12 5:04:02

南京做电商网站的公司/软文素材

原文: Comparing Virtual Machines vs Docker Containers 译者: Fundebug 为了保证可读性&#xff0c;本文采用意译而非直译。另外&#xff0c;本文版权归原作者所有&#xff0c;翻译仅用于学习。 首先&#xff0c;大家需要明确一点&#xff0c;Docker容器不是虚拟机。 2014年&…...

编程日记 2025/1/12 0:44:50

网站收藏本站的功能/软文营销是什么

通过一学期对C语言的学习&#xff0c;我感觉学习C语言是有一定难度却又是非常有趣的科目。也是很有帮助的&#xff0c;特别是对将要面对的计算机二级考试。 这段时间的学习我知道了C语言的基本特点有以下几点&#xff1a;1&#xff0e;语言简洁&#xff0c;使用灵活方便。2&…...

编程日记 2025/1/12 0:20:35