wordpress开发 - 添加fancybox画廊支持

一些主题因为考虑不周,没有画廊功能,点击图片后就到图片地址去了,这样的话,看图片就不方便,那么这次的wordpress开发教程就教大家如何给wordpress主题添加fancybox画廊支持,方便访客查看网站图片

有一些主题因为考虑不周,没有画廊功能,点击图片后就到图片地址去了,这样的话,看图片就不方便,那么这次的wordpress开发教程就教大家如何给wordpress主题添加fancybox画廊支持,方便访客查看网站图片。

footer.php文件的</body>前添加以下代码:

<script src=”https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js”></script>
<link href=”https://cdn.bootcss.com/fancybox/3.5.7/jquery.fancybox.css” rel=”stylesheet”>
<script src=”https://cdn.bootcss.com/fancybox/3.5.7/jquery.fancybox.js”></script>
<script>
var siteTitle = $(“title”).html();//获取标题
$(“.entry-content img”).each(function () {//选取正文的图片
var alt = this.alt;
var src = this.src;
if (!alt) {
$(this).attr(“alt”, siteTitle);
}
//结构重写
$(this).wrap(“<a href='” + src + “‘ class=’fancybox-buttons’ data-fancybox-group=’button’ title='” + alt + “‘></a>”);
});
//fancybox开始 参数参考 http://fancyapps.com/fancybox/3/
$(‘.fancybox-buttons’).fancybox();
</script>

这里只是给一个参考,入门的作用,还有更多精彩的wordpress开发操作需要各位开发者自己去发现,关于Fancybox可以看看这篇介绍:

wordpress开发 - 添加fancybox画廊支持-Npcink
wordpress开发 - 添加fancybox画廊支持-Npcink

Fancybox - 用于显示图像,视频等的jQuery灯箱脚本

JavaScript灯箱库,用于呈现各种类型的媒体。 响应式,触控式和可自定义。
2020-03-25
WP开发

WordPress开发 - 怎么在评论区添加电话和微信等表单功能?

2020-3-25 16:34:46

WP开发

wordpress开发 - 如何自定义QQ移动端分享的主标题、副标题、缩略图?

2020-3-27 17:31:15

⚠️
Npcink上的部份代码及教程来源于互联网,仅供网友学习交流,未经Npcink作者或上传书面授权,请勿作他用。
若您的权利被侵害,请联系站长 QQ: 1355471563 或 点击右侧 私信:Muze 反馈,我们将尽快处理。
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
有新消息 消息中心
搜索