Emlog非插件实现图片浮层预览 - 七彩资源网

Emlog非插件实现图片浮层预览

作者: 七彩网络

全网最全的网络资源分享网站

手机扫码查看

标签:

特别声明:文章多为网络转载,资源使用一般不提供任何帮助,特殊资源除外,如有侵权请联系!

成品图演示:

QQ浏览器截图20200806193655.png

教程开始:

1.第一步打开网站模板的Footer.php文件底部添加如下代码:

<script type="text/javascript" src="<?php echo TEMPLATE_URL; ?>static/js/lytebox.js"></script>
<link href="<?php echo TEMPLATE_URL; ?>static/css/lytebox.css" type="text/css" rel="stylesheet">

<script type="text/javascript">
$(document).ready(function(){
$("a[href$=jpg],a[href$=png],a[href$=gif],a[href$=jpeg]").attr("rel","lytebox[vacation]");
});
</script>

上图代码中的JS路径和cSS路径请修改为自己的模板路径,例如你想把lytebox.jslytebox.css存储在哪里你就把下面路径改成哪里

<script type="text/javascript" src="<?php echo TEMPLATE_URL; ?>static/js/lytebox.js"></script>
<link href="<?php echo TEMPLATE_URL; ?>static/css/lytebox.css" type="text/css" rel="stylesheet">

上面代码中的<?php echo TEMPLATE_URL; ?>这个代码是获取你网址相对路径获取至模板名称为止,所以您仅需修改static和后面的代码即可!

2.第二步上面代码添加完后在把我打包的两个文件(lytebox.js和lytebox.css)以及里面的图片上传至你的js文件夹内和CSS文件夹内以及img文件里。

3.第三步把lytebox.css里的如下修改为你图片储存的位置

QQ截图20200806194702.png

本教程为本人实际操作的经验结果,源码里的内容均为蓝叶博客成果!地址:http://lanyes.org/web/emlog-lytebox.html/comment-page-2

文件下载

附件:emlog非插件实现图片浮层

文件大小:未检测

更新时间:2020.08.06

本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有,若为付费资源,请在下载后24小时之内自觉删除,若作商业用途,请到原网站购买,由于未及时购买和付费发生的侵权行为,与本站无关。本站发布的内容若侵犯到您的权益,请联系本站删除,我们将及时处理!

分享到:
打赏
未经允许不得转载:

作者: 七彩网络, 转载或复制请以 超链接形式 并注明出处 七彩资源网
原文地址: 《Emlog非插件实现图片浮层预览》 发布于2020-8-6

评论

切换注册

登录

您也可以使用第三方帐号快捷登录

切换登录

注册

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏