O_基于OwlCarousel的全屏幻灯片相册

Web开发, 源生

起源

  手边有块4K外接触摸屏，平时用不到的时候就在旁边亮着显示桌面，不过主屏幕的桌面是横向的，外接屏喜欢竖向方，所以Win10的基本桌面背景就不好满足需求了。

  之间试过ACDSee的幻灯片，也试过PPT，从相册库的大小和增删过程来说还是感觉很繁琐，所以就做了这么个简单的html，归根到底，还是懒…

  这个插件库也是百度到的，用起来确实很贴合自己的需求，也是很幸运的有木有。本项目中用到的版本是 2.3.4，在官网下载的包里带了 3.3.1 的jQuery 以及 3.1.11 的 jquery.mousewheel 插件，用于滚轮翻页；其他插件可以在官网找下。

  目前项目实现的功能：

  • 以最大边为基准的自适应图片最大化，超出部分裁剪。测试使用的屏环境是1080*1920。
  • 图片自动轮询播放，轮转时间为30S，目前写死在代码里，可以根据自己需要加设置菜单。
  • 鼠标悬停在页面上时暂停轮询，如果单屏幕应用可以在配置中把autoplayHoverPause设为false。
  • 左键点击任意处切换播放/停止状态，停止时左上角显示三角指示。
  • 鼠标中键滚轮切换上下张，触摸屏滑动开启，但图片质量大的情况下触摸滑动时会卡卡的。
  • 图片基于当前时间戳随机顺序播放，每次刷新均为不同顺序；若不需要随机就把随机处理去掉；若随机顺序每次固定可以写死随机数种子。
  • 自动检测图片资源是否存在，图片加载失败自动在相册中去除元素。
  • 目前文件路径及文件名为固定，图片资源复制在本目录下以供调用。一开始想用input索引到指定目录，不过找了找除了用ActiveX没其他办法了（静态页面），所以就懒得弄了。
  • 文件名为Column (1).jpg，就是Windows的全选重命名默认格式，图片数量若大于561张需要改下代码里的maxFileNum，小于的话可以不改，找不到的会自动去除嘛。
  • 使用Bat调用Chrome并加参数实现自动全屏播放不可退出，当然可以在任务栏右键关闭或Alt+F4。

  总之目前只是实现的自己的刚需，所以没做太多通用性设计，像目录指定、图片文件名自动检索、各种参数设置，下方进度条等等，之后有需求再加吧。

  index_Current - V1_11_220618更新

  • 添加设置菜单，点击图片任意处暂停，显示暂停图标；点击暂停图标显示设置菜单。
  • 设置数据保存为json文件，文件位置为项目根目录，或直接改json内容。
  • 更改启动方式为Chrome的自定义工作环境为 D:\ChromeDebug_ATY\AlbumOwl，开启 --test-type --disable-web-security 模式以供本地跨域调用json。
    "ChromeParameters": "C:\Program Files\Google\Chrome\Application\chrome.exe" --allow-file-access-from-files --user-data-dir="D:\ChromeDebug_ATY\AlbumOwl" --test-type --disable-web-security --start-fullscreen "file:///E:/Projects/ATY/ProjectsOfHTML/Done/AlbumOwl/index.html"
  • 全屏方式换为非 kiosk 模式的 --start-fullscreen，使用 Win+Shift+Right 实现屏幕切换。
  • 两种方式去除无资源图片元素，同时在单次轮回后刷新页面，以保证无加载失败的图片显示出来，并实现无线轮询播放（也可以用 owl 的 destroy 加 initialize 实现）。
  • 动态根据窗口大小相应图片尺寸，不会再出现改变高度出现底边的情况。

  index_List - V1_01_220710更新

  • 由原工程目录下的相册文件夹改为其他文件夹的文件列表，减少大文件副本的空间占用。
  • 最大10张同时加载图片，减小过大过多图片同时加载时的内存占用或内存不足。
  • 自动检测文件列表中已删除文件并刷新，避免显示空白页。
  • 修改随机函数以适应文件名列表加载形式。

问题记录

HTML中 js刷新页面的几种方法

Guohao_Chen

  • reload() 方法：
    语法：location.reload([bForceGet])
    参数： bForceGet， 可选参数， 默认为 false，从客户端缓存里取当前页。true, 则以 GET 方式，从服务端取最新的页面, 相当于客户端点击 F5(“刷新”)
    该方法强迫浏览器刷新当前页面。

  • replace() 方法：
    语法： location.replace(URL)
    该方法通过指定URL替换当前缓存在历史里（客户端）的项目，因此当使用replace方法之后，你不能通过“前进”和“后退”来访问已经被替换的URL。

在实际应用的时候，重新刷新页面的时候，我们通常使用： location.reload() 或者是 history.go(0) 来做。因为这种做法就像是客户端点F5刷新页面，所以页面的method=”post”的时候，会出现”网页过期”的提示。那是因为Session的安全保护机制。

可以想到： 当调用 location.reload() 方法的时候， aspx页面此时在服务端内存里已经存在， 因此必定是 IsPostback 的。

如果有这种应用： 我们需要重新加载该页面，也就是说我们期望页面能够在服务端重新被创建， 我们期望是 Not IsPostback 的。这里，location.replace() 就可以完成此任务。被replace的页面每次都在服务端重新生成。

  • 返回并刷新页面：
    1
    2
    3
    4
    <script language=”JavaScript”>
        //document.referrer 前一个页面的URL
        location.replace(document.referrer);
    </script>

不要用 history.go(-1)，或 history.back();来返回并刷新页面，这两种方法不会刷新页面。

  • 自动刷新页面的方法：

    • 页面自动刷新：把代码<meta http-equiv=”refresh” content=”20″>加入区域中，其中20指每隔20秒刷新一次页面。
    • 页面自动跳转：把代码<meta http-equiv=”refresh” content=”20;url=http://www.baidu.con”>加入区域中，其中20指隔20秒后跳转到http://www.baidu.con页面。
    • 页面自动刷新js版
      1
      2
      3
      4
      5
      6
      <script language=”JavaScript”>
          function myrefresh(){
              window.location.reload();
          }
          setTimeout(‘myrefresh()’,1000); //指定1秒刷新一次
      </script>

  • 如果想关闭窗口时刷新或者想开窗时刷新的话，在中调用以下语句即可。

    1
    2
    3
    4
    5
    6
    <body onload=”opener.location.reload()”> 开窗时刷新
    <body onUnload=”opener.location.reload()”> 关闭时刷新

    <script language=”javascript”>
        window.opener.document.location.reload()
    </script>

Chrome浏览器默认全屏启动（非–kiosk模式）

实际上，只需要修改快捷方式的参数，只不过后面不加 –kiosk，而是在后面加 –start-fullscreen 即可！

Chrome启动参数–user-data-dir 和 –profile-directory的关系

–user-data-dir 浏览器存储用户配置文件的目录。
–profile-directory 选择要与启动的第一个浏览器关联的配置文件目录。

user-data-dir 下可以有多个 profile-directory，每创建一个user就就会多一个profile-directory，其中默认的profile-directory 位于“user-data-dir\Default”， 之后每创建一个，对应的文件夹名称是：“user-data-dir\Profile 2”、“user-data-dir\Profile 3”

m_Options.AddArgument(“–user-data-dir=C:/Users/Me/AppData/Local/Google/Chrome/User Data”);
m_Options.AddArgument(“–profile-directory=Default”);

————————————————
版权声明：本文为CSDN博主「bigcarp」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/bigcarp/article/details/121437108

index_List.html

Bat部分

  • 以UTF-8输出本目录下所有后缀为jpg与png的子文件到NameList.data，然后移动到AlbumOwl工程目录下。
    1
    2
    3
    4
    CHCP 65001	%UTF-8 Output%
    dir *.jpg *.png /s /b /a:a > NameList.data

    if exist NameList.data (move NameList.data E:\Projects\ATY\ProjectsOfHTML\Done\AlbumOwl\NameList.data)

index.html（V2_01_220710）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
<!doctype html>
<html>

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>AlbumOwl - ATY</title>

    <link rel="stylesheet" href="dist/assets/owl.carousel.min.css" />
    <link rel="stylesheet" href="dist/assets/owl.theme.default.min.css" />
    <script src="dist/vendors/jquery.min.js"></script>
    <script src="dist/owl.carousel.min.js"></script>

    <script src="dist/vendors/jquery.mousewheel.min.js"></script>

    <style>
        body,
        #owlMain,
        #owlMain div,
        #owlMain a,
        #owlMain img {
            margin: 0;
            width: 100%;
            height: 100%;
            text-align: center;
            overflow: hidden;
        }

        #owlMain img {
            /* width: auto; */
            object-fit: cover;
            height: 105%;
        }

        #stopImg,
        #settingMenu {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 999;
            text-align: center;
            margin: 1%;
            padding: 1%;
        }

        #stopImg,
        #settingMenu div {
            cursor: pointer;
        }

        #menuColumn:hover,
        #menuRow:hover,
        #menuSave:hover {
            color: #b700ff;
        }
    </style>

</head>

<body>
    <div id="owlMain" class="owl-carousel"></div>
    <div id="settingMenu" style="right:0; background-color:white;">
        <p>Album path (Album/): </p>
        <input id="albumPath" />
        <p>Img name: (Column): </p>
        <input id="imgName" />
        <p>Img suffixes (.jpg): </p>
        <input id="imgSuffixes" />
        <p>Cycle time seconds (30): </p>
        <input id="cycleTime" />
        <p>Max file number (561): </p>
        <input id="maxFileNum" />
        <p>Current mode:</p>
        <div id="menuColumn" style="display:inline; margin-right: 16px; padding: 0.5%; border: 1px solid black;">Column
        </div>
        <div id="menuRow" style="display:inline; padding: 0.5%; border: 1px solid black;">
            &nbsp;&nbsp;&nbsp;Row&nbsp;&nbsp;&nbsp;</div>
        <div id="menuSave" style="margin-top: 2.5%; padding: 0.5%; border: 1px solid black;">Save</div>
        <p></p>
    </div>
    <img id="stopImg" src="dist/assets/owl.video.play.png" />

    </div>

    <!-- <input type="file" webkitdirectory multiple> -->


    <script type="text/javascript">
        // "ChromeParameters": "C:\Program Files\Google\Chrome\Application\chrome.exe" --allow-file-access-from-files --user-data-dir="D:\ChromeDebug_ATY\AlbumOwl" --test-type --disable-web-security --start-fullscreen "file:///E:/Projects/ATY/ProjectsOfHTML/Done/AlbumOwl/index.html"
        // var loadingGif = "dist/assets/ajax-loader.gif"

        var owlMainElement = document.getElementById("owlMain");
        var owl = $("#owlMain");
        var imgOrderList = [];
        var imgErrorList = [];
        var currentImgNum = 0;
        var playStopFlag = "Play";      // "Play" or "Stop"
        var maxDisplayNum = 12;

        var saveJsonGroup = {
            "dirPath": "file:///E:/Projects/ATY/ProjectsOfHTML/Done/AlbumOwl/",
            "albumPath": "Album/",
            "imgName": "Column",
            "imgSuffixes": ".jpg",
            "cycleTime": 20,
            "maxFileNum": 1000,
            "currentMode": "Column"
        };

        $.ajax({
            url: "setting.json",
            // async: false,
            success: function (result) {
                saveJsonGroup.albumPath = result.albumPath;
                saveJsonGroup.imgName = result.imgName;
                saveJsonGroup.imgSuffixes = result.imgSuffixes;
                saveJsonGroup.cycleTime = result.cycleTime * 1;
                saveJsonGroup.maxFileNum = result.maxFileNum * 1;
                saveJsonGroup.currentMode = result.currentMode;
                // console.log(result);
                // console.log(saveJsonGroup);
            }
        });


        var nameListGroup = [];
        var loadOverFlag = 0;
        $.ajax({
            url: "NameList.data",
            success: function (result) {
                nameListGroup = result.split("\r\n");
                // random img
                var ramdonSeed = new Date().getTime();
                nameListGroup.sort(function () { return 0.5 - Math.random(); });
                // console.log(nameListGroup);
                loadOverFlag = 1;
            }
        });


        $(document).ready(function () {
            if(loadOverFlag == 0){
                location.reload();
            }

            saveJsonGroup.imgName = saveJsonGroup.currentMode

            // add img element
            // for (var i = 1; i <= saveJsonGroup.maxFileNum; i++) {
            for (var i = 1; i <= maxDisplayNum; i++) {
                var imgElementCreat = new Image();
                imgElementCreat.id = "img" + i;
                // console.log(nameListGroup[i - 1]);
                imgElementCreat.src = nameListGroup[i - 1];
                imgElementCreat.onclick = function () {
                    if (playStopFlag == "Play") {
                        playStopFlag = "Stop";
                        document.getElementById("stopImg").hidden = false;
                        owl.trigger("stop.owl.autoplay");
                    }
                    else {
                        playStopFlag = "Play";
                        document.getElementById("stopImg").hidden = true;
                        owl.trigger("play.owl.autoplay", [saveJsonGroup.cycleTime * 1000]);
                        document.getElementById("settingMenu").hidden = true;
                    }
                    // console.log("clicked: " + playStopFlag);
                };
                imgElementCreat.onerror = function () {
                    imgErrorList.push(this.id.replace("img", "") * 1);
                    // console.log(imgErrorList);
                    this.parentNode.parentNode.removeChild(this.parentNode);
                };
                owlMainElement.appendChild(imgElementCreat);
            }

            // set height with window
            owlMainElement.style.maxHeight =
                document.documentElement.clientHeight + "px";
            owlMainElement.style.height =
                document.documentElement.clientHeight + "px";

            // menu display
            document.getElementById("settingMenu").hidden = true;
            document.getElementById("albumPath").value = saveJsonGroup.albumPath;
            document.getElementById("imgName").value = saveJsonGroup.imgName;
            document.getElementById("imgSuffixes").value = saveJsonGroup.imgSuffixes;
            document.getElementById("cycleTime").value = saveJsonGroup.cycleTime;
            document.getElementById("maxFileNum").value = saveJsonGroup.maxFileNum;
            if (saveJsonGroup.currentMode == "Column") {
                document.getElementById("menuColumn").style.backgroundColor = "#d1ffff";
            }
            else if (saveJsonGroup.currentMode == "Row") {
                document.getElementById("menuRow").style.backgroundColor = "#d1ffff";
            }

            document.getElementById("stopImg").onclick = function () {
                document.getElementById("settingMenu").hidden = false;
            };

            document.getElementById("menuColumn").onclick = function () {
                saveJsonGroup.currentMode = "Column";
                saveJsonGroup.imgName = "Column";
                document.getElementById("imgName").value = "Column";
                document.getElementById("menuColumn").style.backgroundColor = "#d1ffff";
                document.getElementById("menuRow").style.backgroundColor = "#ffffff";
            };
            document.getElementById("menuRow").onclick = function () {
                saveJsonGroup.currentMode = "Row";
                saveJsonGroup.imgName = "Row";
                document.getElementById("imgName").value = "Row";
                document.getElementById("menuRow").style.backgroundColor = "#d1ffff";
                document.getElementById("menuColumn").style.backgroundColor = "#ffffff";
            };
            document.getElementById("menuSave").onclick = function () {
                // not null
                if (
                    !document.getElementById("albumPath").value
                    || !document.getElementById("imgName").value
                    || !document.getElementById("imgSuffixes").value
                    || !document.getElementById("cycleTime").value
                    || !document.getElementById("maxFileNum").value
                ) {
                    alert("Input cannot be empty!");
                }
                else {
                    saveJsonGroup.albumPath = document.getElementById("albumPath").value;
                    saveJsonGroup.imgName = document.getElementById("imgName").value;
                    saveJsonGroup.imgSuffixes = document.getElementById("imgSuffixes").value;
                    saveJsonGroup.cycleTime = document.getElementById("cycleTime").value;
                    saveJsonGroup.maxFileNum = document.getElementById("maxFileNum").value;
                    // console.log(saveJsonGroup);

                    if (typeof saveJsonGroup === 'object') {
                        saveJsonGroup = JSON.stringify(saveJsonGroup, undefined, 4);
                    }
                    var blob = new Blob([saveJsonGroup], { type: 'text/json' });
                    var a = document.createElement('a');
                    a.download = "setting.json";
                    a.href = window.URL.createObjectURL(blob);
                    a.dataset.downloadurl = ['text/json', a.download, a.href].join(':');
                    a.click();

                    document.getElementById("settingMenu").hidden = true;
                    document.getElementById("stopImg").hidden = true;
                    owl.trigger('play.owl.autoplay', [saveJsonGroup.cycleTime * 1000]);
                }
            };

            // start Owl Carousel
            owl.owlCarousel({
                items: 1,
                loop: false,
                mouseDrag: false,
                autoplay: true,
                autoplayTimeout: saveJsonGroup.cycleTime * 1000,
                autoplayHoverPause: true,
                nav: false,
                dots: false,
                center: true,
                lazyLoad: true,
            });
            document.getElementById("stopImg").hidden = true;
            owl.trigger('play.owl.autoplay', [saveJsonGroup.cycleTime * 1000]);

            // mouse wheel action
            owl.on("mousewheel", ".owl-stage", function (e) {
                if (e.deltaY > 0) {
                    owl.trigger("prev.owl");
                } else {
                    owl.trigger("next.owl");
                }
                e.preventDefault();
            });

            owl.on("translate.owl.carousel", function () {
                // console.log("Finished one img");
                // console.log(imgErrorList);
                currentImgNum++;
                // console.log(saveJsonGroup.maxFileNum - imgErrorList.length - currentImgNum);
                console.log(maxDisplayNum - imgErrorList.length - currentImgNum);
                // if ((saveJsonGroup.maxFileNum - imgErrorList.length - currentImgNum) <= 0) {
                if ((maxDisplayNum - imgErrorList.length - currentImgNum) <= 2) {
                    location.reload();
                }
            });
        });

        $(window).resize(function () {
            // alert("Changed");
            // set height with window
            owlMainElement.style.maxHeight =
                document.documentElement.clientHeight + "px";
            owlMainElement.style.height =
                document.documentElement.clientHeight + "px";
        });


        // function isSupportFileApi() {
        //     if (window.File && window.FileList && window.FileReader && window.Blob) {
        //         return true;
        //     }
        //     return false;

    </script>

</body>

</html>

index_Current.html

Bat部分（废弃）

1
2
3
4
5
6
::@echo off
start ./AlbumOwl_MicrosoftEdge.lnk
::start ./AlbumOwl_GoogleChrome.lnk
::"C:\Program Files\Google\Chrome\Application\chrome.exe" --allow-file-access-from-files --user-data-dir="C:\ChromeDebug" -kiosk -fullscreen "file:///E:/Projects/ATY/ProjectsOfHTML/Done/AlbumOwl/index.html"
::"C:\Program Files (x86)\Microsoft\Edge\Application\msedge.exe" --kiosk --edge-kiosk-type=fullscreen "file:///E:/Projects/ATY/ProjectsOfHTML/Done/AlbumOwl/index.html"
exit

  实现起来有两种方式，一是复制一个Chrome的标准快捷方式，然后右键属性里加入 --user-data-dir="C:\ChromeDebug" -kiosk -fullscreen "file:///E:/Projects/ATY/ProjectsOfHTML/Done/AlbumOwl/index.html"，然后就在Bat里start这个快捷方式就行了；另一种就是直接找Chrome的exe，其实就是把快捷方式里的内容复制出来在Bat执行，这样可移植性和目录下的文件数量都有优势，不过有个缺点就是语句不存在执行完的状态，Bat的黑窗口需要手动关。

  • –user-data-dir=”C:\ChromeDebug”
    第一部分是使用Debug环境的Chrome，这可以和日常用的Chrome环境分开，不需要可以不加。

  • -kiosk -fullscreen “file:///E:/index.html”

  • –kiosk –edge-kiosk-type=fullscreen “file:///E:/index.html”
    kiosk是调用Chrome的一个演示模式，所以可以自动全屏无法退出，无法右键；后边的文件就是打开Chrome后自动打开的网页。

后记：经过长时间摸索，因为两个屏幕的定位问题，最终还是只留了Edge的快捷方式，换屏 Shift+Win+Right 还是手动来…

index.html（V1_11_220618）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
<!doctype html>
<html>

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>AlbumOwl - ATY</title>

    <link rel="stylesheet" href="dist/assets/owl.carousel.min.css" />
    <link rel="stylesheet" href="dist/assets/owl.theme.default.min.css" />
    <script src="dist/vendors/jquery.min.js"></script>
    <script src="dist/owl.carousel.min.js"></script>

    <script src="dist/vendors/jquery.mousewheel.min.js"></script>

    <style>
        body,
        #owlMain,
        #owlMain div,
        #owlMain a,
        #owlMain img {
            margin: 0;
            width: 100%;
            height: 100%;
            text-align: center;
            overflow: hidden;
        }

        #owlMain img {
            /* width: auto; */
            object-fit: cover;
            height: 105%;
        }

        #stopImg,
        #settingMenu {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 999;
            text-align: center;
            margin: 1%;
            padding: 1%;
        }

        #stopImg,
        #settingMenu div {
            cursor: pointer;
        }

        #menuColumn:hover,
        #menuRow:hover,
        #menuSave:hover {
            color: #b700ff;
        }
    </style>

</head>

<body>
    <div id="owlMain" class="owl-carousel"></div>
    <div id="settingMenu" style="right:0; background-color:white;">
        <p>Album path (Album/): </p>
        <input id="albumPath" />
        <p>Img name: (Column): </p>
        <input id="imgName" />
        <p>Img suffixes (.jpg): </p>
        <input id="imgSuffixes" />
        <p>Cycle time seconds (30): </p>
        <input id="cycleTime" />
        <p>Max file number (561): </p>
        <input id="maxFileNum" />
        <p>Current mode:</p>
        <div id="menuColumn" style="display:inline; margin-right: 16px; padding: 0.5%; border: 1px solid black;">Column
        </div>
        <div id="menuRow" style="display:inline; padding: 0.5%; border: 1px solid black;">
            &nbsp;&nbsp;&nbsp;Row&nbsp;&nbsp;&nbsp;</div>
        <div id="menuSave" style="margin-top: 2.5%; padding: 0.5%; border: 1px solid black;">Save</div>
        <p></p>
    </div>
    <img id="stopImg" src="dist/assets/owl.video.play.png" />

    </div>

    <!-- <input type="file" webkitdirectory multiple> -->


    <script type="text/javascript">
        // "ChromeParameters": "C:\Program Files\Google\Chrome\Application\chrome.exe" --allow-file-access-from-files --user-data-dir="D:\ChromeDebug_ATY\AlbumOwl" --test-type --disable-web-security --start-fullscreen "file:///E:/Projects/ATY/ProjectsOfHTML/Done/AlbumOwl/index.html"
        // var loadingGif = "dist/assets/ajax-loader.gif"

        var owlMainElement = document.getElementById("owlMain");
        var owl = $("#owlMain");
        var imgOrderList = [];
        var imgErrorList = [];
        var currentImgNum = 0;
        var playStopFlag = "Play";      // "Play" or "Stop"

        var saveJsonGroup = {
            "dirPath": "file:///E:/Projects/ATY/ProjectsOfHTML/Done/AlbumOwl/",
            "albumPath": "Album/",
            "imgName": "Column",
            "imgSuffixes": ".jpg",
            "cycleTime": 20,
            "maxFileNum": 561,
            "currentMode": "Column"
        };

        $.ajax({
            url: "setting.json",
            // async: false,
            success: function (result) {
                saveJsonGroup.albumPath = result.albumPath;
                saveJsonGroup.imgName = result.imgName;
                saveJsonGroup.imgSuffixes = result.imgSuffixes;
                saveJsonGroup.cycleTime = result.cycleTime * 1;
                saveJsonGroup.maxFileNum = result.maxFileNum * 1;
                saveJsonGroup.currentMode = result.currentMode;
                // console.log(result);
                // console.log(saveJsonGroup);
            }
        });

        $(document).ready(function () {
            saveJsonGroup.imgName = saveJsonGroup.currentMode
            // random img
            for (var i = 1; i <= saveJsonGroup.maxFileNum; i++) {
                imgOrderList[i] = i;
            }
            var ramdonSeed = new Date().getTime();
            imgOrderList.sort(function () { return 0.5 - Math.random(); });
            // console.log(imgOrderList);

            // add img element
            for (var i = 1; i <= saveJsonGroup.maxFileNum; i++) {
                var imgElementCreat = new Image();
                imgElementCreat.id = "img" + i;
                imgElementCreat.src =
                    saveJsonGroup.albumPath
                    + saveJsonGroup.currentMode
                    + "/"
                    + saveJsonGroup.imgName
                    + " ("
                    + imgOrderList[i - 1]
                    + ")"
                    + saveJsonGroup.imgSuffixes;
                imgElementCreat.onclick = function () {
                    if (playStopFlag == "Play") {
                        playStopFlag = "Stop";
                        document.getElementById("stopImg").hidden = false;
                        owl.trigger("stop.owl.autoplay");
                        // console.log(imgErrorList);
                        // for (var i = 0; i < imgErrorList.length; i++) {
                        //     console.log(imgErrorList[i]);
                        //     owl.trigger("remove.owl.carousel", [imgErrorList[i] - 1]);
                        // }
                        // owl.trigger("refresh.owl.carousel");
                    }
                    else {
                        playStopFlag = "Play";
                        document.getElementById("stopImg").hidden = true;
                        owl.trigger("play.owl.autoplay", [saveJsonGroup.cycleTime * 1000]);
                        document.getElementById("settingMenu").hidden = true;
                    }
                    // console.log("clicked: " + playStopFlag);
                };
                imgElementCreat.onerror = function () {
                    imgErrorList.push(this.id.replace("img", "") * 1);
                    // console.log(imgErrorList);
                    this.parentNode.parentNode.removeChild(this.parentNode);
                };
                owlMainElement.appendChild(imgElementCreat);
            }

            // set height with window
            owlMainElement.style.maxHeight =
                document.documentElement.clientHeight + "px";
            owlMainElement.style.height =
                document.documentElement.clientHeight + "px";

            // menu display
            document.getElementById("settingMenu").hidden = true;
            document.getElementById("albumPath").value = saveJsonGroup.albumPath;
            document.getElementById("imgName").value = saveJsonGroup.imgName;
            document.getElementById("imgSuffixes").value = saveJsonGroup.imgSuffixes;
            document.getElementById("cycleTime").value = saveJsonGroup.cycleTime;
            document.getElementById("maxFileNum").value = saveJsonGroup.maxFileNum;
            if (saveJsonGroup.currentMode == "Column") {
                document.getElementById("menuColumn").style.backgroundColor = "#d1ffff";
            }
            else if (saveJsonGroup.currentMode == "Row") {
                document.getElementById("menuRow").style.backgroundColor = "#d1ffff";
            }

            document.getElementById("stopImg").onclick = function () {
                document.getElementById("settingMenu").hidden = false;
            };

            document.getElementById("menuColumn").onclick = function () {
                saveJsonGroup.currentMode = "Column";
                saveJsonGroup.imgName = "Column";
                document.getElementById("imgName").value = "Column";
                document.getElementById("menuColumn").style.backgroundColor = "#d1ffff";
                document.getElementById("menuRow").style.backgroundColor = "#ffffff";
            };
            document.getElementById("menuRow").onclick = function () {
                saveJsonGroup.currentMode = "Row";
                saveJsonGroup.imgName = "Row";
                document.getElementById("imgName").value = "Row";
                document.getElementById("menuRow").style.backgroundColor = "#d1ffff";
                document.getElementById("menuColumn").style.backgroundColor = "#ffffff";
            };
            document.getElementById("menuSave").onclick = function () {
                // not null
                if (
                    !document.getElementById("albumPath").value
                    || !document.getElementById("imgName").value
                    || !document.getElementById("imgSuffixes").value
                    || !document.getElementById("cycleTime").value
                    || !document.getElementById("maxFileNum").value
                ) {
                    alert("Input cannot be empty!");
                }
                else {
                    saveJsonGroup.albumPath = document.getElementById("albumPath").value;
                    saveJsonGroup.imgName = document.getElementById("imgName").value;
                    saveJsonGroup.imgSuffixes = document.getElementById("imgSuffixes").value;
                    saveJsonGroup.cycleTime = document.getElementById("cycleTime").value;
                    saveJsonGroup.maxFileNum = document.getElementById("maxFileNum").value;
                    // console.log(saveJsonGroup);

                    if (typeof saveJsonGroup === 'object') {
                        saveJsonGroup = JSON.stringify(saveJsonGroup, undefined, 4)
                    }
                    var blob = new Blob([saveJsonGroup], { type: 'text/json' });
                    var a = document.createElement('a');
                    a.download = "setting.json";
                    a.href = window.URL.createObjectURL(blob);
                    a.dataset.downloadurl = ['text/json', a.download, a.href].join(':');
                    a.click();

                    document.getElementById("settingMenu").hidden = true;
                    document.getElementById("stopImg").hidden = true;
                    owl.trigger('play.owl.autoplay', [saveJsonGroup.cycleTime * 1000]);
                }
            };

            // start Owl Carousel
            owl.owlCarousel({
                items: 1,
                loop: false,
                mouseDrag: false,
                autoplay: true,
                autoplayTimeout: saveJsonGroup.cycleTime * 1000,
                autoplayHoverPause: true,
                nav: false,
                dots: false,
                center: true,
                lazyLoad: true,
            });
            document.getElementById("stopImg").hidden = true;
            owl.trigger('play.owl.autoplay', [saveJsonGroup.cycleTime * 1000]);

            // mouse wheel action
            owl.on("mousewheel", ".owl-stage", function (e) {
                if (e.deltaY > 0) {
                    owl.trigger("prev.owl");
                } else {
                    owl.trigger("next.owl");
                }
                e.preventDefault();
            });

            // owl.on("refreshed.owl.carousel", function () {
            //     console.log("Refreshed");
            //     location.reload();
            // });

            owl.on("translated.owl.carousel", function () {
                // console.log("Finished one img");
                // console.log(imgErrorList);
                currentImgNum++;
                console.log(saveJsonGroup.maxFileNum - imgErrorList.length - currentImgNum);
                if ((saveJsonGroup.maxFileNum - imgErrorList.length - currentImgNum) <= 0) {
                    location.reload();
                    // owl.trigger("refresh.owl.carousel");
                }
            });
        });

        $(window).resize(function () {
            // alert("Changed");
            // set height with window
            owlMainElement.style.maxHeight =
                document.documentElement.clientHeight + "px";
            owlMainElement.style.height =
                document.documentElement.clientHeight + "px";
        });


        // function isSupportFileApi() {
        //     if (window.File && window.FileList && window.FileReader && window.Blob) {
        //         return true;
        //     }
        //     return false;

    </script>

</body>

</html>
  • setting.json
    1
    2
    3
    4
    5
    6
    7
    8
    9
    {
        "dirPath": "file:///E:/Projects/ATY/ProjectsOfHTML/Done/AlbumOwl/",
        "albumPath": "Album/",
        "imgName": "Column",
        "imgSuffixes": ".jpg",
        "cycleTime": "30",
        "maxFileNum": "561",
        "currentMode": "Column"
    }

index.html（V1_01_220611）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
<!doctype html>
<html>

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>AlbumOwl - ATY</title>

    <link rel="stylesheet" href="dist/assets/owl.carousel.min.css" />
    <link rel="stylesheet" href="dist/assets/owl.theme.default.min.css" />
    <script src="dist/vendors/jquery.min.js"></script>
    <script src="dist/owl.carousel.min.js"></script>

    <script src="dist/vendors/jquery.mousewheel.min.js"></script>

    <style>
        body,
        #owlMain,
        #owlMain div,
        #owlMain a,
        #owlMain img {
            margin: 0;
            width: 100%;
            height: 100%;
            text-align: center;
            overflow: hidden;
        }

        #owlMain img {
            /* width: auto; */
            object-fit: cover;
            height: 103%;
        }
    </style>

</head>

<body>
    <div id="owlMain" class="owl-carousel"></div>
    <img id="stopImg" src="dist/assets/owl.video.play.png" style="position:absolute; top:0; left:0; z-index: 999;" />

    <!-- <input type="file" webkitdirectory multiple> -->


    <script>
        // var loadingGif = "dist/assets/ajax-loader.gif"
        var albumPath = "Album/Column/";
        var imgSuffixes = ".jpg";

        var owlMainElement = document.getElementById("owlMain");
        var owl = $("#owlMain");
        // var cycleTime = 1 * 1000;
        // var cycleTime = 5 * 1000;
        var cycleTime = 30 * 1000;
        var maxFileNum = 561;
        var imgOrderList = [];
        var playStopFlag = 1;

        $(document).ready(function () {
            // random img
            for (var i = 1; i <= maxFileNum; i++) {
                imgOrderList[i] = i;
            }
            var ramdonSeed = new Date().getTime();
            imgOrderList.sort(function () { return 0.5 - Math.random(); });
            // console.log(imgOrderList);

            // add img element
            for (var i = 1; i <= maxFileNum; i++) {
                var imgElementCreat = new Image();
                imgElementCreat.src =
                    albumPath
                    + "Column ("
                    + imgOrderList[i - 1]
                    + ")"
                    + imgSuffixes;
                imgElementCreat.onclick = function () {
                    if (playStopFlag == 1) {
                        playStopFlag = 0;
                        document.getElementById("stopImg").hidden = false;
                        owl.trigger("stop.owl.autoplay");
                    }
                    else {
                        playStopFlag = 1;
                        document.getElementById("stopImg").hidden = true;
                        owl.trigger("play.owl.autoplay", [cycleTime]);
                    }
                    // console.log("clicked: " + playStopFlag);
                };
                imgElementCreat.onerror = function () {
                    // console.log(this.parentNode);
                    this.parentNode.parentNode.removeChild(this.parentNode);
                }
                owlMainElement.appendChild(imgElementCreat);
            }

            // start Owl Carousel
            owl.owlCarousel({
                items: 1,
                loop: true,
                mouseDrag: false,
                autoplay: true,
                autoplayTimeout: cycleTime,
                autoplayHoverPause: true,
                nav: false,
                dots: false,
                center: true,
            });
            document.getElementById("stopImg").hidden = true;
            owl.trigger('play.owl.autoplay', [cycleTime]);

            // set height with window
            owlMainElement.style.maxHeight =
                document.documentElement.clientHeight + "px";
            owlMainElement.style.height =
                document.documentElement.clientHeight + "px";

            // mouse wheel action
            owl.on("mousewheel", ".owl-stage", function (e) {
                if (e.deltaY > 0) {
                    owl.trigger("prev.owl");
                } else {
                    owl.trigger("next.owl");
                }
                e.preventDefault();
            });
        });


        // function isSupportFileApi() {
        //     if (window.File && window.FileList && window.FileReader && window.Blob) {
        //         return true;
        //     }
        //     return false;
        // }

    </script>

</body>

</html>

所有文件打包（最新）