相册问题

[huixueee]

参照教程，我把所有必要的JS,CSS文件放到根目录下的source/photos/文件夹内。在index下内编写：

---
layout: page
type: "photos"
title: 相册
noDate: 'true'
comments: 'true'
copyright: false
---

<link rel="stylesheet" href="./ins.css">
<link rel="stylesheet" href="./jquery.fancybox.css">

<div class="instagram">
    <section class="archives album">
        <ul class="img-box-ul">
        </ul>
    </section>
</div>

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="./jquery.lazyload.js"></script>
<script src="./jquery.fancybox.js"></script>
<script src="./photos.js"></script>

<script>
    var that = this;
    $.getJSON("tibet.json", function (data) {
        that.render(that.page, data);
    });
</script>

deploy后在网站上发现：

Uncaught SyntaxError: Unexpected end of input         jquery.lazyload.js:144 
Uncaught SyntaxError: Unexpected token =                jquery.fancybox.js:11 
Mixed Content: The page at 'https://huixueee.com/photos/' was loaded over HTTPS, but requested an insecure image 'http://i66.tinypic.com/9h6y6x.png'. This content should also be served over HTTPS.  (index):33
photos.js:8 Uncaught TypeError: $(...).lazyload is not a function
    at render (photos.js:8)
    at Object.success ((index):14)
    at i (jquery-3.2.1.min.js:2)
    at Object.fireWith [as resolveWith] (jquery-3.2.1.min.js:2)
    at A (jquery-3.2.1.min.js:4)
    at XMLHttpRequest.<anonymous> (jquery-3.2.1.min.js:4)

点击相册框后新增错误

pnxkcdttf.bkt.clouddn.com123.png/:1 GET http://pnxkcdttf.bkt.clouddn.com123.png/ 500 (Internal Privoxy Error)

@Null-PE

[Null-PE]

你使用的 jquery.lazyload.js 是个不完整的文件。 应该没使用什么特别复杂的功能，你试试直接使用最新版本的jquery.lazyload.js 以防万一，fancybox也确认一下吧

[Null-PE]

文件不完整的原因是hexo在编译的时候出现了问题，不使用本地文件，改用url, 修改index.md的17,18行

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.js"></script>
<script src="http://lib.baomitu.com/fancybox/3.5.2/jquery.fancybox.min.js"></script>
<script src="./photos.js"></script>

[Null-PE]

点击框架报错的一个原因是： photo.js生成img连接的时候(photo.js第4行)，XXX.com后面直接加上了文件名filename.png生成XXX.comfilename.png，这是无效的url，应该在XXX.com后面添加/，正确的url应该是XXX.com/filename.png

[huixueee]

@Null-PE 本地预览和deploy网页上显示不同，网页上有一个额外错误：

(index):12 Uncaught TypeError: that.render is not a function
    at Object.success
    at fire (jquery.js:3268)
    at Object.fireWith [as resolveWith] (jquery.js:3398)
    at done (jquery.js:9305)
    at XMLHttpRequest.<anonymous> (jquery.js:9548)

[huixueee]

@Null-PE 我在index里设置了标签通过图片跳转到下一层，但是没有成功，照片显示不出来好像自然没办法跳转。。。？？

相册使用的js文件布置的不是很合理，这样写下去会导致相册文件夹的代码数量庞大，function冲突，我看看能不能重写。

[huixueee]

我查到一种答案使用css样式的就近原则，让这个页面的css不被整体css覆盖。

[huixueee]

成功了！

[Null-PE]

最好追加个返回按钮。

[huixueee]

现在又有一个新问题 /cat层内的图片初始没有显示，点开有显示。错误代码是lazyload is not a function，我把lazyload的所有dunction都删掉了，console也没有报错，所以显示不出小照片的原因并不是lazyload加载错误造成的，那会是什么。。。

[Null-PE]

你把现在的工程文件往develop branch里面推一下

[huixueee]

不知道怎么推送到分支，创建了一个00的新项目，推送到那个上面了。

[Null-PE]

develop推送完了，你checkout一下看看； 我先研究下fancybox和lazyload的引用冲突

[huixueee]

问题应该不在这两者间的冲突，之前在第一层（photos）查看是可以显示小图片的，把这些css，js放到第二层（photos/cat）之后再运行就出错。