首页 分享🥳,网络相关 🧐

FancyBox是一款优秀的弹出框Jquery插件,FancyBox提供了一种简洁优雅的方式去为图片、网页和多媒体添加灯箱功能。

最近给我的情侣网站美化时,发现主题没有灯箱功能,图片没法点开查看,于是就找到了下面的教程。实测可用。
效果如下图:
Screenshot_20210929_172230.jpg

1、引用 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>

2、修改post.php

打开post.php,将

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

修改为:

<?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;
?>

3、初始化FancyBox

把下面js添加到 footer.php 文件的前

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


大功告成!


本教程转载自“运行狗”





上一篇:云闪付app,注册领取百元新人福利 + 就业创业补贴!
下一篇:对于新手机IQOO NEO5的体验
文章评论