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']) {
poster="" poster=""
id="pr-player"> id="pr-player">
</video> </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 @@
/* /*
******The author * The author
* Tan
******Tan
*/ */
//关闭videojs的ga统计 //关闭videojs的ga统计
window.HELP_IMPROVE_VIDEOJS = false; window.HELP_IMPROVE_VIDEOJS = false;
@ -46,9 +44,11 @@ if ($('#image_site').get(0)) {
_slidesOfNextPage = data.imgs; _slidesOfNextPage = data.imgs;
}else if (typeof(data.videos) != 'undefined' && data.videos.length > 0) { }else if (typeof(data.videos) != 'undefined' && data.videos.length > 0) {
_slidesOfNextPage = data.videos; _slidesOfNextPage = data.videos;
}else { }else if (typeof(data.msg) != 'undefined' && data.msg) {
_noMoreData = true; _noMoreData = true;
console.warn('获取下一页json数据出错啦', data.msg); console.warn('获取下一页json数据出错啦', data.msg);
}else {
_noMoreData = true;
} }
}).fail(function(jqXHR, textStatus, errorThrown) { }).fail(function(jqXHR, textStatus, errorThrown) {
console.error('获取下一页json数据失败,错误信息:' + errorThrown); console.error('获取下一页json数据失败,错误信息:' + errorThrown);
@ -85,29 +85,52 @@ if ($('#image_site').get(0)) {
}, 1000); }, 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 = { var fancyboxToolbar = {
items: {'show1to1': customToolbar_show1to1},
display: { display: {
left: ["infobar"], left: ["infobar"],
middle: [ middle: [
"zoomIn", "zoomIn",
"zoomOut", "zoomOut",
"toggle1to1", "show1to1",
"rotateCCW", "rotateCCW",
"rotateCW", "rotateCW",
"flipX", "flipX",
"flipY" "flipY",
"fitX",
"fitY",
"reset"
], ],
right: ["slideshow", "fullscreen", "thumbs", "download", "close"], right: ["slideshow", "fullscreen", "thumbs", "download", "close"],
}, },
}; };
if ($(window).width() < 640) { //小屏幕只显示部分按钮 if ($(window).width() < 640) { //小屏幕只显示部分按钮
fancyboxToolbar = { fancyboxToolbar = {
items: {'show1to1': customToolbar_show1to1},
display: { display: {
left: ["infobar"], left: ["infobar"],
middle: [ middle: [
"zoomIn", "toggleZoom",
"zoomOut", "show1to1",
"rotateCCW", "rotateCCW",
"rotateCW" "rotateCW"
], ],

Loading…
Cancel
Save