typecho 灯箱片fancybox暴力实现代码

寻梦xunm| 453| 收集

1年前

超过683天温馨提示

本文最后更新于2023年01月21日，已超过683天没有更新，若内容或图片失效，请留言反馈。

第一步自行百度搜索fancybox进行下载
搞忘提示了:要使用fancybox需要引入jQuery
第二步引入fancybox.css文件

<link rel="stylesheet" type="text/css" href="<?php $this->options->themeUrl('fancybox.css');?>">

第三步引入fancybox.js文件

<script src="<?php $this->options->themeUrl('fancybox.js'); ?>"></script>

通过function.php暴力实现

//Yoniu：取文章首图
function showThumbnail($widget,$imgnum){
    
    $attach = $widget->attachments(1)->attachment;
    
    $pattern = '|<img[^>]+src=\"([^>\"]+)\"?[^>]*>|is'; 
    $patternMD = '/\!\[.*?\]\((http(s)?:\/\/.*?(jpeg|gif|jpg|png))/i';
    $patternMDfoot = '/\[.*?\]:\s*(http(s)?:\/\/.*?(jpeg|gif|jpg|png))/i';
    //如果文章内有插图，则调用插图
    if (preg_match_all($pattern, $widget->content, $thumbUrl)) { 
        echo '<a href="'.$thumbUrl[1][$imgnum].'" data-fancybox="gallery"><img src="'.$thumbUrl[1][$imgnum].'"></a>';
    }
    //没有就调用第一个图片附件
    else if ($attach && $attach->isImage) {
 echo '<a href="'.$attach->url.'" data-fancybox="gallery"><img src="'.$attach->url.'"></a>';
    } 
    //如果是内联式markdown格式的图片
    else if (preg_match_all($patternMD, $widget->content, $thumbUrl)) {
 echo '<a href="'.$thumbUrl[1][$imgnum].'" data-fancybox="gallery"><img src="'.$thumbUrl[1][$imgnum].'"></a>';
    }
    //如果是脚注式markdown格式的图片
    else if (preg_match_all($patternMDfoot, $widget->content, $thumbUrl)) {
 echo '<a href="'.$thumbUrl[1][$imgnum].'" data-fancybox="gallery"><img src="'.$thumbUrl[1][$imgnum].'"></a>';
    
    }
    //如果真的没有图片，就调用一张随机图片
    else{
      echo '';

    }

}

图片调用方法（请注意传入的值，$this并不是万能的，第一参数必须为对象类型，第二个参数为要调用的数组的键）