搜索到
4
篇与
的结果
-
让访客可以在 Typecho 评论贴图（Typecho 评论插图功能实现） 在 Typecho 评论的内容中，如果用 <img src="图片地址" />的语法，将被 Typecho 自带的过滤器删除，所以评论后看不到贴图。接触贴图限制我们需要手动打开限制，这个一般推荐在themeInit函数里强制设置，这样对用户来说就无需额外操作。修改functions.phpfunction themeInit($archive) { $options = Helper::options(); //允许图片标签 $options->commentsHTMLTagAllowed .= '<img class="" src="" data-src="" alt="" style=""/>'; }这样我们就可以在评论区通过 <img src="图片地址" />的语法来贴图了。支持使用短代码格式贴图使用短代码的格式贴图 [img src="图片地址"]好处是有别的html过滤器也不怕图片被过滤掉了。处理评论内用需要用到钩子，往functions.php加入以下代码。Typecho_Plugin::factory('Widget_Abstract_Comments')->contentEx = ['CommensHelper', 'parse']; class CommensHelper { public static function parse(string $content, $archive, ?string $lastResult) :string { if ($lastResult) $content = $lastResult; // 判断是不是在文章页 $isSingle = Typecho_Widget::widget('Widget_Archive')->is('single'); if ($isSingle) { $content = preg_replace_callback('/\[img=?\]*(.*?)(\[\/img)?\]/ism', function ($matches) { return sprintf('', Typecho_Common::safeUrl($matches[1])); }, $content); } else { $content = preg_replace('/\[img=?\]*(.*?)(\[\/img)?\]/ism', _t("[图片]"), $content); } return $content; } }评论框增加一个按钮用于插入图片修改comments.php，在合适位置加入以下代码：<a id="insert-image" href="javascript:void(0)" data-textarea="textarea[name='text']" data-prompt-text="请输入图片链接">插入图片</a> <script> let el = document.getElementById('insert-image'); el.addEventListener('click', (event) => comment_image.apply(el, [event, document.querySelector(el.dataset.textarea)]), false); function comment_image(event, textarea) { var URL = prompt(this.getAttribute("data-prompt-text") || ""); if (URL) { replaceSelectedText(textarea, '[img]' + URL + '[/img]'); } return false; } function getInputSelection(el) { var start = 0, end = 0, normalizedValue, range, textInputRange, len, endRange; if (typeof el.selectionStart == "number" && typeof el.selectionEnd == "number") { start = el.selectionStart; end = el.selectionEnd; } else { range = document.selection.createRange(); if (range && range.parentElement() == el) { len = el.value.length; normalizedValue = el.value.replace(/\r\n/g, "\n"); // Create a working TextRange that lives only in the input textInputRange = el.createTextRange(); textInputRange.moveToBookmark(range.getBookmark()); // Check if the start and end of the selection are at the very end // of the input, since moveStart/moveEnd doesn't return what we want // in those cases endRange = el.createTextRange(); endRange.collapse(false); if (textInputRange.compareEndPoints("StartToEnd", endRange) > -1) { start = end = len; } else { start = -textInputRange.moveStart("character", -len); start += normalizedValue.slice(0, start).split("\n").length - 1; if (textInputRange.compareEndPoints("EndToEnd", endRange) > -1) { end = len; } else { end = -textInputRange.moveEnd("character", -len); end += normalizedValue.slice(0, end).split("\n").length - 1; } } } } return { start: start, end: end }; } function replaceSelectedText(el, text) { var sel = getInputSelection(el), val = el.value; el.value = val.slice(0, sel.start) + text + val.slice(sel.end); } </script>JS代码积分下载：
-
利用PHP输出文件夹下所有文件名称 有时候批量上传到服务器一些图片，然后需要贴出图片url，数量少还可以手动，但图片数量很多的时候，有点太费力气，正好群友昨晚问及，写几段代码就能轻松搞定，问题有二，1是图片是有序图片，例如从1.jpg-299.jpg，2是图片无序，例如http://scriptsz.com/images/eghj.jpg http://scriptsz.com/images/ehhj.jpg http://scriptsz.com/images/evhj.jpg下面分别用两端代码说明,用到了循环中的for和while1，针对有序：<?php for($i=1;$i<=100;$i++){ //其中100是生成到结束的数字 echo 'http://xxx.cc/'.$i.'.jpg<br>'; //替换域名和文件扩展名称 } ?>2，针对无序：<? $dir = "dirname"; //如果是文件所在目录，则填写/www/wwwroot/domain.com/ ，如果是文件所在目录下的子目录，直接填写子目录名称 if (is_dir($dir)) { if ($dh = opendir($dir)) { while (($file = readdir($dh)) !== false) { if($file!='.' & $file!='..') { echo "http://xxx.cc/da/$file.jpg <br>"; } } closedir($dh); } } ?>保存到服务器，然后打开文件即可获取到想要的内容，如果是粘贴到论坛也可以预先将BBcode加进去。 -
使用CSS3实现鼠标移到图片上图片放大 在现在的网页设计中，鼠标移到图片上图片放大的效果常常被用到，这个效果多应用于文章列表里。我一开始以为是用JQuery来实现的，后来才知道原来是用CSS3来实现的。虽然用JQuery也能实现同样的效果，但用CSS3来实现会更加简单和方便。本文将介绍如何用CSS3来实现这个功能。请把鼠标移到图片上看到效果是：鼠标移到图片上时，图片会自动放大。CSS3实现方法如下：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #div1{ width: 200px; height: 138px; border: #000 solid 1px; margin: 50px auto; overflow: hidden; } #div1 img{ cursor: pointer; transition: all 0.6s; } #div1 img:hover{ transform: scale(1.4); } </style> </head> <body> <div id="div1"> <img src="demo.jpg" /> </div> </body> </html>代码分析：1、首先知道DIV和IMG的层次关系，IMG是在某DIV里面，图片放大后不应该超出DIV的盒子。2、设置DIV的 overflow: hidden; 属性，作用是图片变大后超过DIV区域的部分会自动隐藏。3、设置 transition: all 0.6s; 属性和 transform: scale(1.4); 属性，其中 transition: all 0.6s; 是变化速度，数值越小速度越快，而 transform: scale(1.4); 是变化范围， scale(1.4) 是放大1.4倍的意思。实例二：图片放大不受限于DIV盒子如果想图片放大后完全显示，而不是只显示DIV里的区域，那么我们只需把div的 overflow 属性去掉即可，不能设为 auto ，否则div出现滚动条。效果演示如下：请把鼠标移到图片上html代码如下<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #div1{ width: 200px; height: 138px; border: #000 solid 0px; margin: 50px auto; /* overflow: hidden; */ } #div1 img{ cursor: pointer; transition: all 0.6s; } #div1 img:hover{ transform: scale(1.4); } </style> </head> <body> <div id="div1"> <img src="demo.jpg" /> </div> </body> </html>代码分析：把div的 overflow 属性去掉，其他代码不变。
-
Typecho 使用 fslightbox 给图片添加暗箱效果 以前我是很喜欢使用FancyBox来提供暗箱效果的，但是FancyBox是纯收费插件。fslightbox同样是收费插件，但是免费部分我们已经够用了。效果fslightbox_demo.png教程下面开始教程~引用 fslightbox[attach]1317[/attach]把下面内容添加到header.php中的</head>前面 <script src="fslightbox.min.js"></script> 修改post.php打开post.php 将 <?php $this->content(); ?> 修改成<?php $pattern = '/\<img.*?src\=\"(.*?)\"[^>]*>/i'; $replacement = '<a href="$1" data-fslightbox="gallery"><img src="$1" alt="'.$this->title.'" title="点击放大图片" /></a>'; $content = preg_replace($pattern, $replacement, $this->content); echo $content; ?>pjax/ajax 只需要在重载的时候添加一行代码 refreshFsLightbox(); 完美解决问题。最后对，就是这么简单
