特色图片 – Woshiluo's Notebook

起因

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

结束

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