Browse Source

add key handle for zoom in and out

master
filesite 3 days ago
parent
commit
27bac961e9
  1. 15
      FAQ.md
  2. 2
      themes/beauty/views/list/bydate.php
  3. 2
      themes/beauty/views/site/index.php
  4. 34
      www/js/beauty.js

15
FAQ.md

@ -283,11 +283,16 @@ sortOrderOfFiles则设定排序方式,asc顺序,desc倒序。 @@ -283,11 +283,16 @@ sortOrderOfFiles则设定排序方式,asc顺序,desc倒序。
## 怎么用键盘控制浏览图片以及自动播放?
从v0.4.4版本开始,PC下支持键盘控制,以下是快捷键:
* 上下左右方向键控制焦点元素
* Enter回车键进入对应目录,或者开始浏览图片
* p - 在图片浏览模式下按p键开始自动播放
* s - 在自动播放情况下按s键停止自动播放
* Esc退出键,退出图片浏览
| 快捷键 | 功能 |
| 上下左右方向键 | 控制元素焦点 |
| Enter回车键 | 进入对应目录,或者开始浏览图片 |
| p | 开始自动播放 |
| s | 停止自动播放 |
| + | 放大图片 |
| - | 缩小图片 |
| o | 查看1比1原图 |
| f | 切换全屏模式 |
| Esc退出键 | 退出图片浏览 |
## 相册部署到外网了,点击图片打开有点慢怎么办?

2
themes/beauty/views/list/bydate.php

@ -467,5 +467,5 @@ if ($total > $viewData['pageSize']) { @@ -467,5 +467,5 @@ if ($total > $viewData['pageSize']) {
</div>
<script type="text/template" id="btn_show1to1_tmp">
<button title="Toggle zoom 1 to 1" class="f-button"><svg tabindex="-1" width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M3.51 3.07c5.74.02 11.48-.02 17.22.02 1.37.1 2.34 1.64 2.18 3.13 0 4.08.02 8.16 0 12.23-.1 1.54-1.47 2.64-2.79 2.46-5.61-.01-11.24.02-16.86-.01-1.36-.12-2.33-1.65-2.17-3.14 0-4.07-.02-8.16 0-12.23.1-1.36 1.22-2.48 2.42-2.46Z"></path><path d="M5.65 8.54h1.49v6.92m8.94-6.92h1.49v6.92M11.5 9.4v.02m0 5.18v0"></path></svg></button>
<button title="Toggle zoom 1 to 1" class="f-button btn-original-1v1"><svg tabindex="-1" width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M3.51 3.07c5.74.02 11.48-.02 17.22.02 1.37.1 2.34 1.64 2.18 3.13 0 4.08.02 8.16 0 12.23-.1 1.54-1.47 2.64-2.79 2.46-5.61-.01-11.24.02-16.86-.01-1.36-.12-2.33-1.65-2.17-3.14 0-4.07-.02-8.16 0-12.23.1-1.36 1.22-2.48 2.42-2.46Z"></path><path d="M5.65 8.54h1.49v6.92m8.94-6.92h1.49v6.92M11.5 9.4v.02m0 5.18v0"></path></svg></button>
</script>

2
themes/beauty/views/site/index.php

@ -573,5 +573,5 @@ if ($total > $viewData['pageSize']) { @@ -573,5 +573,5 @@ if ($total > $viewData['pageSize']) {
</div>
<script type="text/template" id="btn_show1to1_tmp">
<button title="Toggle zoom 1 to 1" class="f-button"><svg tabindex="-1" width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M3.51 3.07c5.74.02 11.48-.02 17.22.02 1.37.1 2.34 1.64 2.18 3.13 0 4.08.02 8.16 0 12.23-.1 1.54-1.47 2.64-2.79 2.46-5.61-.01-11.24.02-16.86-.01-1.36-.12-2.33-1.65-2.17-3.14 0-4.07-.02-8.16 0-12.23.1-1.36 1.22-2.48 2.42-2.46Z"></path><path d="M5.65 8.54h1.49v6.92m8.94-6.92h1.49v6.92M11.5 9.4v.02m0 5.18v0"></path></svg></button>
<button title="Toggle zoom 1 to 1" class="f-button btn-original-1v1"><svg tabindex="-1" width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M3.51 3.07c5.74.02 11.48-.02 17.22.02 1.37.1 2.34 1.64 2.18 3.13 0 4.08.02 8.16 0 12.23-.1 1.54-1.47 2.64-2.79 2.46-5.61-.01-11.24.02-16.86-.01-1.36-.12-2.33-1.65-2.17-3.14 0-4.07-.02-8.16 0-12.23.1-1.36 1.22-2.48 2.42-2.46Z"></path><path d="M5.65 8.54h1.49v6.92m8.94-6.92h1.49v6.92M11.5 9.4v.02m0 5.18v0"></path></svg></button>
</script>

34
www/js/beauty.js

@ -1002,6 +1002,10 @@ var RC_LEFT = 37; @@ -1002,6 +1002,10 @@ var RC_LEFT = 37;
RC_PLAY_PC = 80, //Key p
RC_STOP_PC = 83, //Key s
RC_FULL_PC = 70, //Key f
RC_ZOOM_OUT_PC = 187, //Key +
RC_ZOOM_IN_PC = 189, //key -
RC_ZOOM_1v1_PC = 79, //key o
//tv only
RC_PLAY = 415,
@ -1125,10 +1129,10 @@ var keyPress = function(way) { @@ -1125,10 +1129,10 @@ var keyPress = function(way) {
if (next) {
next.focus();
}else {
console.warn('No next sibling');
//console.warn('No next sibling');
}
}else {
console.warn('No focused element');
//console.warn('No focused element');
}
};
@ -1137,15 +1141,19 @@ $(document.body).on('keydown', function(e) { @@ -1137,15 +1141,19 @@ $(document.body).on('keydown', function(e) {
//console.log('Key pressed', e.keyCode);
if (e.keyCode == RC_RIGHT) {
e.preventDefault();
keyPress('right');
}else if (e.keyCode == RC_LEFT) {
e.preventDefault();
keyPress('left');
}else if (e.keyCode == RC_UP) {
e.preventDefault();
keyPress('up');
}else if (e.keyCode == RC_DOWN) {
e.preventDefault();
keyPress('down');
}else if (e.keyCode == RC_PLAY || e.keyCode == RC_PLAY_PC) {
//play images
//autoplay images
var fancybox = Fancybox.getInstance();
if (fancybox) {
var autoplay = fancybox.plugins.Slideshow.ref;
@ -1163,5 +1171,25 @@ $(document.body).on('keydown', function(e) { @@ -1163,5 +1171,25 @@ $(document.body).on('keydown', function(e) {
fancybox.close();
}
}
}else if (e.keyCode == RC_FULL_PC) {
var fancybox = Fancybox.getInstance();
if (fancybox) {
fancybox.toggleFullscreen();
}
}else if (e.keyCode == RC_ZOOM_OUT_PC) {
var fancybox = Fancybox.getInstance();
if (fancybox) {
fancybox.getSlide().panzoom.zoomIn();
}
}else if (e.keyCode == RC_ZOOM_IN_PC) {
var fancybox = Fancybox.getInstance();
if (fancybox) {
fancybox.getSlide().panzoom.zoomOut();
}
}else if (e.keyCode == RC_ZOOM_1v1_PC) {
var fancybox = Fancybox.getInstance();
if (fancybox) {
$('.btn-original-1v1').click();
}
}
});
Loading…
Cancel
Save