Browse Source

add custom button to show 1to1 image

master
filesite 2 months ago
parent
commit
fbad35e7a1
  1. 6
      themes/beauty/views/site/index.php
  2. 41
      www/js/beauty.js

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

@ -457,4 +457,8 @@ if ($total > $viewData['pageSize']) { @@ -457,4 +457,8 @@ if ($total > $viewData['pageSize']) {
poster=""
id="pr-player">
</video>
</div>
</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>
</script>

41
www/js/beauty.js

@ -1,9 +1,7 @@ @@ -1,9 +1,7 @@
/*
******The author
******Tan
* The author
* Tan
*/
//关闭videojs的ga统计
window.HELP_IMPROVE_VIDEOJS = false;
@ -46,9 +44,11 @@ if ($('#image_site').get(0)) { @@ -46,9 +44,11 @@ if ($('#image_site').get(0)) {
_slidesOfNextPage = data.imgs;
}else if (typeof(data.videos) != 'undefined' && data.videos.length > 0) {
_slidesOfNextPage = data.videos;
}else {
}else if (typeof(data.msg) != 'undefined' && data.msg) {
_noMoreData = true;
console.warn('获取下一页json数据出错啦', data.msg);
}else {
_noMoreData = true;
}
}).fail(function(jqXHR, textStatus, errorThrown) {
console.error('获取下一页json数据失败,错误信息:' + errorThrown);
@ -85,29 +85,52 @@ if ($('#image_site').get(0)) { @@ -85,29 +85,52 @@ if ($('#image_site').get(0)) {
}, 1000);
};
//自定义显示原图按钮
var customToolbar_show1to1 = {
tpl: $('#btn_show1to1_tmp').html(),
click: function() {
var btn = this, fancybox = this.instance;
var slide = fancybox.getSlide();
fancybox.showLoading(slide);
$(slide.imageEl).one('load', function() {
console.log('image loaded');
fancybox.hideLoading(slide);
slide.panzoom.toggleZoom();
});
slide.src = slide.downloadSrc;
slide.imageEl.src = slide.downloadSrc;
}
};
// 图片浏览
var fancyboxToolbar = {
items: {'show1to1': customToolbar_show1to1},
display: {
left: ["infobar"],
middle: [
"zoomIn",
"zoomOut",
"toggle1to1",
"show1to1",
"rotateCCW",
"rotateCW",
"flipX",
"flipY"
"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",
"toggleZoom",
"show1to1",
"rotateCCW",
"rotateCW"
],

Loading…
Cancel
Save