Kartos主题为首页特色图片添加LightGallery特效

起因


再看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;
            }

结束


漫长的折腾路终于完成了,不过大家还可以基于此继续修改,对于之前的教程,我有可能会进行重编,不过我会尽可能让博客多出一些干货的。 ]]>

发表评论

电子邮件地址不会被公开。 必填项已用*标注