Typecho Wiki
每一个作品都值得被记录

Typecho 博客文章图片添加灯箱效果

Typecho维基君开发日志 • 526次浏览 • 发布 2023-01-22 • 更新 2023-01-22
极致加速的V2Ray 助您畅享全球网络 & 搬瓦工VPS优惠码BWHNCXNVXV

给你的Typecho博客文章图片添加灯箱效果
FancyBox是一款优秀的弹出框Jquery插件,FancyBox提供了一种简洁优雅的方式去为图片、网页和多媒体添加灯箱功能。此教程为大家介绍 FancyBox在Typecho主题上的应用

引用 FancyBox插件
把下面内容添加到主题目录下header.php 中 前面

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> <!--如果主题已经引用了jQuery库,可以忽略这条-->
<link rel="stylesheet" href="https://cdn.staticfile.org/fancybox/3.5.2/jquery.fancybox.min.css">
<script src="https://cdn.staticfile.org/fancybox/3.5.2/jquery.fancybox.min.js"></script>

修改主题目录下post.php

<?php $this->content(); ?>

或者是

<?php parseContent($this); ?>

主要是输出文章的
改为

<?php
    $pattern = '/\<img.*?src\="(.*?)"[^>]*>/i';
    $replacement = '<a href="$1" data-fancybox="gallery" /><img src="$1" alt="'.$this->title.'" title="点击放大图片"></a>';
    $content = preg_replace($pattern, $replacement, $this->content);
    echo $content;
?>

如果测试ok就不用下面的了,能节约就节约
初始化FancyBox
把下面js添加到 footer.php 文件的前

<script type="text/javascript">
    $(document).ready(function () {
        $( ".fancybox").fancybox();
    });
</script>

本文检索关键词:FancyBox插件,图片添加灯箱
厂商投放

【腾讯云】爆款2核2G云服务器首年40元 首购最高获赠300元京东卡

腾讯云双十一采购节,云服务器多种机型限时抢购,2核2G首年40元,4核8G首年211元,专业技术7*24小时在线服务,腾讯云为企业和个人提供快捷,安全,稳定的云服务!

广告
添加新评论 »