diff --git a/FAQ.md b/FAQ.md
index 3aa9478..fc8a223 100644
--- a/FAQ.md
+++ b/FAQ.md
@@ -29,6 +29,7 @@
3）图片控制
* [怎么设置自动播放时每张照片停留时间？](#怎么设置自动播放时每张照片停留时间)
* [在局域网内使用，能否所有图片使用原图而不是缩略图？](#在局域网内使用-能否所有图片使用原图而不是缩略图)
+* [怎么用键盘控制浏览图片以及自动播放？](#怎么用键盘控制浏览图片以及自动播放)
4）外网使用相关
@@ -279,6 +280,16 @@ sortOrderOfFiles则设定排序方式，asc顺序，desc倒序。
```
+## 怎么用键盘控制浏览图片以及自动播放？
+
+从v0.4.4版本开始，PC下支持键盘控制，以下是快捷键：
+* 上下左右方向键控制焦点元素
+* Enter回车键进入对应目录，或者开始浏览图片
+* p - 在图片浏览模式下按p键开始自动播放
+* s - 在自动播放情况下按s键停止自动播放
+* Esc退出键，退出图片浏览
+
+
## 相册部署到外网了，点击图片打开有点慢怎么办？
machete家庭相册默认为局域网使用，配置**enableSmallImageForWan**开启查看大图显示缩略图是关闭的，
diff --git a/conf/app.php b/conf/app.php
index 8042964..740b364 100644
--- a/conf/app.php
+++ b/conf/app.php
@@ -3,8 +3,8 @@
* Config
*/
$configs = array(
- 'version' => '0.4.3',
- 'releaseDate' => '2025-01-04',
+ 'version' => '0.4.4',
+ 'releaseDate' => '2025-01-14',
'showVersion' => false, //默认不显示版本号和发布日期
'default_timezone' => 'Asia/Hong_Kong', //timezone, check more: https://www.php.net/manual/en/timezones.asia.php
diff --git a/www/js/beauty.js b/www/js/beauty.js
index 6d1c6c5..c9389d0 100644
--- a/www/js/beauty.js
+++ b/www/js/beauty.js
@@ -5,6 +5,71 @@
//关闭videojs的ga统计
window.HELP_IMPROVE_VIDEOJS = false;
+//fancybox自定义显示原图按钮
+var customToolbar_show1to1 = {
+ tpl: $('#btn_show1to1_tmp').html(),
+ click: function() {
+ var fancybox = this.instance;
+ var slide = fancybox.getSlide();
+
+ if (slide.src == slide.downloadSrc) {
+ slide.panzoom.toggleZoom();
+ return false;
+ }
+
+ fancybox.showLoading(slide);
+ //如果没有自动显示loading图标，主动加上
+ if ($(slide.el).find('.fancybox-spinner').length == 0) {
+ var spinner = '';
+ $(spinner).insertBefore(slide.contentEl);
+ }
+
+ $(slide.imageEl).one('load', function() {
+ //console.log('image loaded');
+ fancybox.hideLoading(slide);
+ $(slide.el).find('.fancybox-spinner').remove();
+ slide.panzoom.toggleZoom();
+ });
+
+ slide.src = slide.downloadSrc;
+ slide.imageEl.src = slide.downloadSrc;
+ }
+};
+var fancyboxToolbar = {
+ items: {'show1to1': customToolbar_show1to1},
+ display: {
+ left: ["infobar"],
+ middle: [
+ "zoomIn",
+ "zoomOut",
+ "show1to1",
+ "rotateCCW",
+ "rotateCW",
+ "flipX",
+ "flipY",
+ "fitX",
+ "fitY",
+ "reset"
+ ],
+ right: ["slideshow", "fullscreen", "thumbs", "download", "close"],
+ },
+};
+if ($(window).width() < 640) { //小屏幕只显示部分按钮
+ fancyboxToolbar = {
+ items: {'show1to1': customToolbar_show1to1},
+ display: {
+ left: ["infobar"],
+ middle: [
+ "zoomIn",
+ "zoomOut",
+ "show1to1",
+ "rotateCW"
+ ],
+ right: ["download", "close"]
+ }
+ };
+}
+
if ($('#image_site').get(0)) {
//获取下一页图片/视频json数据
@@ -85,72 +150,7 @@ if ($('#image_site').get(0)) {
}, 1000);
};
- //自定义显示原图按钮
- var customToolbar_show1to1 = {
- tpl: $('#btn_show1to1_tmp').html(),
- click: function() {
- var fancybox = this.instance;
- var slide = fancybox.getSlide();
-
- if (slide.src == slide.downloadSrc) {
- slide.panzoom.toggleZoom();
- return false;
- }
-
- fancybox.showLoading(slide);
- //如果没有自动显示loading图标，主动加上
- if ($(slide.el).find('.fancybox-spinner').length == 0) {
- var spinner = '';
- $(spinner).insertBefore(slide.contentEl);
- }
-
- $(slide.imageEl).one('load', function() {
- console.log('image loaded');
- fancybox.hideLoading(slide);
- $(slide.el).find('.fancybox-spinner').remove();
- slide.panzoom.toggleZoom();
- });
-
- slide.src = slide.downloadSrc;
- slide.imageEl.src = slide.downloadSrc;
- }
- };
-
// 图片浏览
- var fancyboxToolbar = {
- items: {'show1to1': customToolbar_show1to1},
- display: {
- left: ["infobar"],
- middle: [
- "zoomIn",
- "zoomOut",
- "show1to1",
- "rotateCCW",
- "rotateCW",
- "flipX",
- "flipY",
- "fitX",
- "fitY",
- "reset"
- ],
- right: ["slideshow", "fullscreen", "thumbs", "download", "close"],
- },
- };
- if ($(window).width() < 640) { //小屏幕只显示部分按钮
- fancyboxToolbar = {
- items: {'show1to1': customToolbar_show1to1},
- display: {
- left: ["infobar"],
- middle: [
- "zoomIn",
- "zoomOut",
- "show1to1",
- "rotateCW"
- ],
- right: ["download", "close"]
- }
- };
- }
Fancybox.bind('[data-fancybox]', {
Toolbar: fancyboxToolbar,
loop: true,
@@ -168,12 +168,6 @@ if ($('#image_site').get(0)) {
},
endSlideshow: function(fancybox) {
refreshFancyBoxStatus = 'off';
- },
- keydown: function(fancybox, eventName) {
- console.log(`Fancybox eventName: ${eventName}`);
- if (eventName == 'ArrowDown') {
- return false;
- }
}
}
});
@@ -1006,10 +1000,14 @@ var RC_LEFT = 37;
RC_DOWN = 40;
RC_ENTER = 13;
+ RC_PLAY_PC = 80, //Key p
+ RC_STOP_PC = 83, //Key s
+
//tv only
RC_PLAY = 415,
RC_STOP = 413;
+
//support a and button
var getNextSibling = function(el, way) {
var next = null;
@@ -1136,7 +1134,7 @@ var keyPress = function(way) {
//handle key press
$(document.body).on('keydown', function(e) {
- console.log('Key pressed', e.keyCode);
+ //console.log('Key pressed', e.keyCode);
if (e.keyCode == RC_RIGHT) {
keyPress('right');
@@ -1146,30 +1144,24 @@ $(document.body).on('keydown', function(e) {
keyPress('up');
}else if (e.keyCode == RC_DOWN) {
keyPress('down');
- }else if (e.keyCode == RC_PLAY) {
+ }else if (e.keyCode == RC_PLAY || e.keyCode == RC_PLAY_PC) {
//play images
var fancybox = Fancybox.getInstance();
if (fancybox) {
var autoplay = fancybox.plugins.Slideshow.ref;
autoplay.start();
+ //}else {
+ //Fancybox.fromSelector('[data-fancybox]');
}
- }else if (e.keyCode == RC_STOP) {
+ }else if (e.keyCode == RC_STOP || e.keyCode == RC_STOP_PC) {
//stop play images
var fancybox = Fancybox.getInstance();
if (fancybox) {
var autoplay = fancybox.plugins.Slideshow.ref;
autoplay.stop();
+ if (e.keyCode == RC_STOP) {
+ fancybox.close();
+ }
}
}
-});
-
-//TODO: handle fancybox show for tv browser
-/*
-$('a[data-fancybox]').on('dblclick', function(e) {
- alert('double click');
- var fancybox = Fancybox.getInstance();
- if (fancybox) {
- fancybox.show();
- }
-});
-*/
\ No newline at end of file
+});
\ No newline at end of file