起因
再看Halyul博客时发现了LightGallery这个有趣的东西,然后我一想,添加到首页的特色图片看起来应该不错,然后就开始了为其3天的折腾 请务必将从官网下载下来的LightGallery中的
/demo/js
文件夹与 /lib
文件夹放到博客根目录下
0X01
按照网上的帮助文档代码应该是这个样子的
<div class="demo-gallery">
<ul id="lightgallery" class="list-unstyled row">
<li data-responsive="#图片链接" data-src="#图片链接" data-sub-html="#介绍部分">
<a href="">
<img class="img-responsive" src="#图片链接">
</a>
</li>
</ul>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('#lightgallery').lightGallery();
});
</script>
<script src="//cdn.jsdelivr.net/picturefill/2.3.1/picturefill.min.js">
<script src="js/lightgallery.js"></script>
<script src="js/lg-fullscreen.js"></script>
<script src="js/lg-thumbnail.js"></script>
<script src="js/lg-video.js"></script>
<script src="js/lg-autoplay.js"></script>
<script src="js/lg-zoom.js"></script>
<script src="js/lg-hash.js"></script>
<script src="js/lg-pager.js"></script>
<script src="../lib/jquery.mousewheel.min.js"></script>
那么应该先在主题目录中的index.php找到文章循环,然而循环呢???说好的循环呢,后来发现里头有这一行
get_template_part('content', get_post_format());
会不会在content.php文件里?
0X02
好吧,确实是在content.php文件,如果是这样的话找到图片的class标签,然后就可以了,在
F12
中,我找到了class标签就是kratos-entry-thumb-new
然后在div中只有这样一行<?php kratos_blog_thumbnail_new() ?>
这估计是在functions.php
里的kratos_blog_thumbnail_new()
函数,在这个函数的代码在 functions.php
代码如下
function kratos_blog_thumbnail_new() {
global $post;
$img_id = get_post_thumbnail_id();
$img_url = wp_get_attachment_image_src($img_id,'kratos-entry-thumb');
$img_url = $img_url[0];
if ( has_post_thumbnail() ) {
echo '<a href=""><img src="'.$img_url.'" /></a>';
} else {
$content = $post->post_content;
$img_preg = "/<img (.*?) src=\"(.+?)\".*?>/";
preg_match($img_preg,$content,$img_src);
$img_count=count($img_src)-1;
$img_val = $img_src[$img_count];
if(!empty($img_val)){
echo '<a href="<?php the_permalink() ?>"><img src="'.$img_val.' "class="img-responsive"/></a>';
} else {
echo '<a href="<?php the_permalink() ?>"><img src="'. kratos_option('default_image') .'" /></a>';
}
}
}
第一个if应该是在判断是否有特色图片,我这么点云服务器空间,特色图片又不能用外链,谁用啊,第二个应该是文章中有没有图片这个是要加的,最后都不符合的就该是使用Kratos主题设置你的图片了,最后两个都得加特效那么就将这个函数改为如下。
function kratos_blog_thumbnail_new() {
global $post;
$img_id = get_post_thumbnail_id();
$img_url = wp_get_attachment_image_src($img_id,'kratos-entry-thumb');
$img_url = $img_url[0];
if ( has_post_thumbnail() ) {
echo '<a href=""><img src="'.$img_url.'" /></a>';
} else {
$content = $post->post_content;
$img_preg = "/<img (.*?) src=\"(.+?)\".*?>/";
preg_match($img_preg,$content,$img_src);
$img_count=count($img_src)-1;
$img_val = $img_src[$img_count];
if(!empty($img_val)){
echo '<li data-responsive="'.$img_val.'" data-src="'.$img_val.'" ><a href=""><img src="'.$img_val.' "class="img-responsive"/></a></li>';
} else {
echo '<li data-responsive="'. kratos_option('default_image') .'" data-src="'. kratos_option('default_image') .'" ><a href=""><img src="'. kratos_option('default_image') .'" /></a></li>';
}
}
}
0X03
接下来是完成JS代码的添加,我对JS代码毛都不知啊,没办法,解决一点是一点。 先把图片后面的JS进行添加,这样的话,就该将content.php里从39行一直到下一个div标签中的代码改成这样
<?php } if($listlayout == 'new_layout'){ ?>
<div class="kratos-entry-border-new clearfix">
<div class="kratos-entry-thumb-new">
<div class="demo-gallery" id="lightgallery<?php the_ID(); ?>">
<?php kratos_blog_thumbnail_new() ?>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('#lightgallery').lightGallery();
});
</script>
<script src="https://cdn.jsdelivr.net/picturefill/2.3.1/picturefill.min.js"></script>
<script src="/js/lightgallery.js"></script>
<script src="/js/lg-fullscreen.js"></script>
<script src="/js/lg-thumbnail.js"></script>
<script src="/js/lg-video.js"></script>
<script src="/js/lg-autoplay.js"></script>
<script src="/js/lg-zoom.js"></script>
<script src="/js/lg-hash.js"></script>
<script src="/js/lg-pager.js"></script>
<script src="../lib/jquery.mousewheel.min.js"></script>
如果你的网站提示jQuery not found
或类似错误,请在header.php
中添加
<script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.js"></script>
然后将css文件引用,同样在header.php
中添加如下代码
<link href="https://cdn.bootcss.com/lightgallery/1.3.9/css/lightgallery.css" rel="stylesheet">
0X04
你以为就这么完了?,不可能,可能我还要去问追梦人吗
F12
中发生如下错误
Uncaught TypeError: $(...).lightGallery is not a function
at HTMLDocument.<anonymous> ((index):344)
at mightThrow (jquery.js:3570)
at process (jquery.js:3638)
什么鬼???(黑人问号脸.jpg) 在本地发现不能多次加载$('#lightgallery').lightGallery();
,这样一来就只能加载形如$('#lightgallery'+数字).lightGallery();
的办法了,并且div中id也得变成 lightgallery+数字
,数字不能重复,如果这样的话,通过毫秒也无法避免重复的可能性,想一下,wordpress不是有Post ID吗?这玩意是唯一的啊,这样一来只需往lightgallery后面加上<?php the_ID(); ?>
就行了
0X05
然而问题依旧没有解决,在结合搜索引擎后,我将如下代码<script type="text/javascript">
$(document).ready(function(){
$('#lightgallery<?php the_ID(); ?>').lightGallery();
});
</script>
改成了如下
<script type="text/javascript">
$(document).ready(function($){
$('#lightgallery<?php the_ID(); ?>').lightGallery();
});
</script>
问题就神奇的解决了
0X06
基本功能完成,特效还是得有的往,header.php文件添加如下代码,可以让鼠标移到时对图片进行放大并去掉li标签中的点
li{
list-style-type:none;
margin:0px;
}
.demo-gallery > li a {
border: 3px solid #FFF;
border-radius: 3px;
display: block;
overflow: hidden;
position: relative;
float: left;
}
.demo-gallery > li a > img {
-webkit-transition: -webkit-transform 0.15s ease 0s;
-moz-transition: -moz-transform 0.15s ease 0s;
-o-transition: -o-transform 0.15s ease 0s;
transition: transform 0.15s ease 0s;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
.demo-gallery > li a:hover > img {
-webkit-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.1, 1.1, 1.1);
}
.demo-gallery > li a:hover .demo-gallery-poster > img {
opacity: 1;
}
.demo-gallery > li a .demo-gallery-poster {
background-color: rgba(0, 0, 0, 0.1);
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
-webkit-transition: background-color 0.15s ease 0s;
-o-transition: background-color 0.15s ease 0s;
transition: background-color 0.15s ease 0s;
}
.demo-gallery > li a .demo-gallery-poster > img {
left: 50%;
margin-left: -10px;
margin-top: -10px;
opacity: 0;
position: absolute;
top: 50%;
-webkit-transition: opacity 0.3s ease 0s;
-o-transition: opacity 0.3s ease 0s;
transition: opacity 0.3s ease 0s;
}
.demo-gallery > li a:hover .demo-gallery-poster {
background-color: rgba(0, 0, 0, 0.5);
}
.demo-gallery .justified-gallery > a > img {
-webkit-transition: -webkit-transform 0.15s ease 0s;
-moz-transition: -moz-transform 0.15s ease 0s;
-o-transition: -o-transform 0.15s ease 0s;
transition: transform 0.15s ease 0s;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
height: 100%;
width: 100%;
}
.demo-gallery .justified-gallery > a:hover > img {
-webkit-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.1, 1.1, 1.1);
}
.demo-gallery .justified-gallery > a:hover .demo-gallery-poster > img {
opacity: 1;
}
.demo-gallery .justified-gallery > a .demo-gallery-poster {
background-color: rgba(0, 0, 0, 0.1);
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
-webkit-transition: background-color 0.15s ease 0s;
-o-transition: background-color 0.15s ease 0s;
transition: background-color 0.15s ease 0s;
}
.demo-gallery .justified-gallery > a .demo-gallery-poster > img {
left: 50%;
margin-left: -10px;
margin-top: -10px;
opacity: 0;
position: absolute;
top: 50%;
-webkit-transition: opacity 0.3s ease 0s;
-o-transition: opacity 0.3s ease 0s;
transition: opacity 0.3s ease 0s;
}
.demo-gallery .justified-gallery > a:hover .demo-gallery-poster {
background-color: rgba(0, 0, 0, 0.5);
}
.demo-gallery .video .demo-gallery-poster img {
height: 48px;
margin-left: -24px;
margin-top: -24px;
opacity: 0.8;
width: 48px;
}
.demo-gallery.dark > li a {
border: 3px solid #04070a;
}
结束
漫长的折腾路终于完成了,不过大家还可以基于此继续修改,对于之前的教程,我有可能会进行重编,不过我会尽可能让博客多出一些干货的。 ]]>